ティラノビルダーの分岐ボタンをカスタマイズしよう【デザイン編】
2021年3月時点に出ているV5は分岐ボタンのデザインが大幅に強化されておりますが「α版」とのことなので、正規版が出るまでの補助としてお役立てください。
こんにちは、まつぼ(@matsubojob)です。
ティラノビルダーでは「分岐ボタン」というコンポーネントを置くだけで、簡単に選択肢が作れます。
既に使いやすいデザインなのですが、作品によってボタンデザインを変えたいと思ったことはありませんか？
難しい知識不要で変更できるので是非お試しくださいませ～！
ティラノビルダーの分岐ボタンをカスタマイズする方法
ティラノビルダーで分岐ボタンのデザインをカスタマイズする方法は全部で3ステップです。
- tyrano.cssを開く
- /* color stylesから編集したい色の分岐ボタンを選ぶ
- CSSを好みのデザインのものに書き換える
※以降はダウンロード前提で話を進めていくので、お済みでない方はこちらからどうぞ！(公式サイトに移動します)
1. tyrano.cssを開く
まず、ティラノビルダーで分岐ボタンをカスタマイズしたいプロジェクトを選び「tyrano.css」を開きます。
ここではカスタマイズしたいプロジェクトは「matsubo」というファイルを選びました。
2. /* color stylesから編集したい色の分岐ボタンを選ぶ
メモ帳やワードパッドで開くとコードがたくさん書かれていますが、下へスクロールして「/* color styles」という項目を見つけましょう。
black、gray…と続いているので、ここで「分岐ボタン」コンポーネントのカラー設定をしていることが分かりました。
一番上にあったので、今回は「ブラック」の分岐ボタンをカスタマイズしていきます。
デフォルトのデザインはこんな感じ。どのように変わるかワクワクしますね！
まつぼ3. CSSを好みのデザインのものに書き換える
では、いよいよお好みのデザインに変えるCSSに書き換えます。
私はフラットなデザインに変更したかったので、/* black */の項目を下記のように書き替えました。
※CSSはこちらのサイトを参考にしております。
/* black */
.black {
background-color: #fff;
border: 1px solid #000;
color: #000;
line-height: 20px;
}
.black:hover {
background-color: #000;
border-color: #000;
color: #fff;
}
どこかのサイトからコードをお借りして使用する際は元々のクラス名が入っているので、全て「tyrano.css」にて最初に書かれていたクラス名(今回だと.black )に直すのを忘れずに！
カスタマイズした分岐ボタンが完成！
では、最後にプレビューで確認しましょう！
カスタマイズしたブラックの分岐ボタンはこんな感じになりました。シンプル！
黒背景：ホバー(オンマウス)時
コードの構造が分かってくると、ボタンの背景を透過したりグラデーションなども可能です。
ちなみに最初のデザインに戻したい場合は、新規プロジェクトを作成→新規プロジェクトのtyrano.cssから戻したいプロジェクトファイルのtyrano.cssにコピペすればOK！
設定されている全ての色を分岐ボタンで使うことはあまりないと思うので、もし作品内で使わない色があればこの方法をお試しくださいませ♪
次回は選択肢にオンマウスで音が出る方法を紹介します。結構お手軽でした！
まつぼ
https://matsubo-job.com/tyranobutton-2/制作に行き詰まっても公式のサポートがある！
ティラノビルダーでのゲーム制作で行き詰まってしまったら、公式・非公式問わず手厚いサポートがあります。
- ティラノビルダー公式サイト：使い方＆チュートリアル
- ティラノ非公式wiki：ティラノビルダー制作テクニックwiki ※有志の方々が運営していると公式サイトに表記あり
そのほか公式ガイドブックが販売されているようなので要チェックです～！
また、ティラノビルダーにはキャラクター数や使用できるBGM数などに制限がある無料版と、それらが無制限になったPro版(有料)があります。 無料版でお試しして「もっと色んな機能を使いたいな…」と思ったら是非Proの購入をおすすめします。
そこまでお高く感じるお値段ではないし、おそらくゲーム制作にハマったら無料版じゃ物足りなくなりますよ～(笑) スクリプト知識がある方は、ティラノスクリプトを使うことでより高度なゲーム制作ができます。
ティラノビルダーにはない操作をしたい場合はティラノスクリプト機能をご利用ください！
スクリプトの知識が全くない自分がゲームを作れた時は本当に感動しました。同じ気持ちを味わった方は感謝の気持ちを込めて公式ガイドブックやティラノビルダーProを購入し、ご支援してみてはいかがでしょうか。
よろしければ応援お願いします！
