ティラノビルダーの分岐ボタンをカスタマイズしよう【デザイン編】

2021年4月3日ティラノビルダー備忘録

この記事はティラノビルダーの最新バージョンがV4だったときに作成していた記事です。
2021年3月時点に出ているV5は分岐ボタンのデザインが大幅に強化されておりますが「α版」とのことなので、正規版が出るまでの補助としてお役立てください。

こんにちは、まつぼ(@matsubojob)です。

ティラノビルダーでは「分岐ボタン」というコンポーネントを置くだけで、簡単に選択肢が作れます。

既に使いやすいデザインなのですが、作品によってボタンデザインを変えたいと思ったことはありませんか?

難しい知識不要で変更できるので是非お試しくださいませ~!

本記事はティラノビルダーについて初心者の気付きをまとめたメモです。備忘録のニュアンスが強いですが、ティラノビルダーへ何らかの貢献ができればという気持ちで執筆しています。

ティラノビルダーの分岐ボタンをカスタマイズする方法

ティラノビルダーで分岐ボタンのデザインをカスタマイズする方法は全部で3ステップです。

  1. tyrano.cssを開く
  2. /* color stylesから編集したい色の分岐ボタンを選ぶ
  3. CSSを好みのデザインのものに書き換える

※以降はダウンロード前提で話を進めていくので、お済みでない方はこちらからどうぞ!(公式サイトに移動します)

1. tyrano.cssを開く

まず、ティラノビルダーで分岐ボタンをカスタマイズしたいプロジェクトを選び「tyrano.css」を開きます。

確認方法:myproject>カスタマイズしたいプロジェクト>tyrano>tyrano.css

ここではカスタマイズしたいプロジェクトは「matsubo」というファイルを選びました。

2. /* color stylesから編集したい色の分岐ボタンを選ぶ

メモ帳やワードパッドで開くとコードがたくさん書かれていますが、下へスクロールして「/* color styles」という項目を見つけましょう。

black、gray…と続いているので、ここで「分岐ボタン」コンポーネントのカラー設定をしていることが分かりました。

一番上にあったので、今回は「ブラック」の分岐ボタンをカスタマイズしていきます。

デフォルトのデザインはこんな感じ。どのように変わるかワクワクしますね!

Left Captionまつぼ
そのゲームでは使わないカラーを選ぶことをおすすめします!

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

設定されている全ての色を分岐ボタンで使うことはあまりないと思うので、もし作品内で使わない色があればこの方法をお試しくださいませ♪

次回は選択肢にオンマウスで音が出る方法を紹介します。結構お手軽でした!

Left Captionまつぼ
次回は少し応用で「ティラノスクリプト」コンポーネントを使ってみるよ!

制作に行き詰まっても公式のサポートがある!

ティラノビルダーでのゲーム制作で行き詰まってしまったら、公式・非公式問わず手厚いサポートがあります。

そのほか公式ガイドブックが販売されているようなので要チェックです~!

引用元:BOOTH ティラノマーケットスクエア:ティラノビルダー公式ガイドブック

ティラノビルダー公式ガイドブックの購入はこちら

また、ティラノビルダーにはキャラクター数や使用できるBGM数などに制限がある無料版と、それらが無制限になったPro版(有料)があります。 無料版でお試しして「もっと色んな機能を使いたいな…」と思ったら是非Proの購入をおすすめします。

そこまでお高く感じるお値段ではないし、おそらくゲーム制作にハマったら無料版じゃ物足りなくなりますよ~(笑) スクリプト知識がある方は、ティラノスクリプトを使うことでより高度なゲーム制作ができます。

ティラノビルダーにはない操作をしたい場合はティラノスクリプト機能をご利用ください!

スクリプトの知識が全くない自分がゲームを作れた時は本当に感動しました。同じ気持ちを味わった方は感謝の気持ちを込めて公式ガイドブックやティラノビルダーProを購入し、ご支援してみてはいかがでしょうか。

よろしければ応援お願いします!

ブログランキング・にほんブログ村へ まつぼじょぶ - にほんブログ村