ノベルゲーム制作②ティラノビルダーでのメッセージウィンドウ変更方法

どうも！

アフォ毛

アフォ毛

マスコット担当アフォ毛と申します！

アフォ毛

管理人のアカキです！

アカキ

今回はメッセージウィンドウの変更

アフォ毛

アフォ毛

についてですか！

アフォ毛

はい！

アカキ

今回は詳しくご説明しようと思ってます！

アカキ

よろしくお願いします！

アフォ毛

①メッセージウィンドウの変更方法
②セーブ・ロードボタン表示
③まとめ

メッセージウィンドウの変更

変更するにあたって、

アフォ毛

アフォ毛

用意するものとかはありますか？？

アフォ毛

最低でもフレーム画像は

アカキ

用意しておいてください！

アカキ

当たり前な話ですが、

アカキ

これがないと何も始まりません

アカキ

ちなみに画像形式は

アフォ毛

アフォ毛

なんでもいいんですか？

アフォ毛

特に指定はありませんが、

アカキ

JPEGやPNG形式で用意するのが

アカキ

無難かなと思います！

アカキ

今回説明用に準備した画像はこちら↓

アカキ

説明用に作成したフレームです！

むっちゃシンプル！！

アフォ毛

アフォ毛

説明用にと作ったものなので(笑)

アカキ

サイズに決まりはありますか？

アフォ毛

アフォ毛

特に決まりはありませんので、

アカキ

ゲーム画面のサイズに合わせて

アカキ

各自お好きに作ってください！

アカキ

わかりました！

アフォ毛

アフォ毛

次に設定画面の説明に入ります！

アカキ

メッセージウィンドウの設定方法

フレームは準備できましたし、

アフォ毛

アフォ毛

次は何をしたらいいんでしょう？

アフォ毛

最初にプロジェクトの編集画面

アカキ

を開いてください

アカキ

プロジェクトの作成方法は

アカキ

前回ご説明しておりますので、

アカキ

ぜひそちらをご確認ください！

アカキ

前回のブログ記事はこちら！

こちらはプロジェクト編集画面です！

編集画面を開きました！

アフォ毛

アフォ毛

では次に左上にある

アカキ

「プロジェクト」を

アカキ

クリックしてください。

アカキ

プロジェクトを開いた画面です！

なにやら色々表示されましたね

アフォ毛

アフォ毛

この中から一番下にある

アカキ

「ゲームコンフィグ」を選択してください！

アカキ

こちらがゲームコンフィグ編集画面です！

おぉ！なんか出てきた！

アフォ毛

アフォ毛

今回は上から5番目にある、

アカキ

「メッセージウィンドウ」

アカキ

を開いてください！

アカキ

メッセージウィンドウ編集画面です！

開きました！

アフォ毛

アフォ毛

では次に、

アカキ

「メッセージウィンドウに独自画像を指定する」

アカキ

にチェックを入れてください。

アカキ

チェック後の画面がこちら！

「選択する」が出てきました！

アフォ毛

アフォ毛

ここをクリックして

アカキ

使用するフレーム画像を選択します！

アカキ

こちらは画像選択画面です！

…あれ？

アフォ毛

アフォ毛

さっき用意したフレーム画像が

アフォ毛

見当たらないですね…

アフォ毛

あ、フォルダに入れ忘れてました💦

アカキ

ここで一旦

アカキ

ティラノビルダーのフォルダ

アカキ

を開いてください！

アカキ

ティラノビルダーフォルダ内はこんな感じ！

いくつかフォルダが出てきましたね！

アフォ毛

アフォ毛

今回は上から5番目にある

アカキ

「myproject」を開きます！

アカキ

今回作成しているプロジェクトフォルダです！

↑ゲームフォルダが出てくると思うので、

アカキ

フォルダ内に入ってください！

アカキ

こちらはプロジェクトフォルダ内です！

さらに2つフォルダがありますね！

アフォ毛

アフォ毛

今回は「data」フォルダに入ります！

アカキ

dataフォルダ内です！

また色々とフォルダが出てきました！

アフォ毛

アフォ毛

今回は画像データを入れるので、

アカキ

「image」フォルダに画像を入れてください！

アカキ

そして先ほどの画面に戻ると…

アカキ

先ほどの画像選択画面です！

画像が1つ増えてますね！

アフォ毛

アフォ毛

あとは画像をWクリックしてください！

アカキ

画像選択後の画面です！

表示されました！すごい！

アフォ毛

アフォ毛

あとは「更新する」のボタン

アカキ

を押したら一旦設定は完了です。

アカキ

ではここでどう表示されるのか

アカキ

プレイ画面を見てみましょう！

アカキ

テストプレイ画面です！

文字の表示位置がなんか変！

アフォ毛

アフォ毛

これは想定の範囲内です。

アカキ

次に文字の位置調節をしていきます！

アカキ

テキスト位置の変更

次は「位置」を選択してください！

「ゲームコンフィグ」→「メッセージウィンドウ」→「位置」

アカキ

の順番で開いてみてください！

アカキ

何やら入力できそうな画面になりましたね

アフォ毛

アフォ毛

ここの数値を変更することで、

アカキ

フレームや文字の表示位置を変更できます！

アカキ

数値はこんな感じで変更しました！

修正後のテストプレイ画面はこちら！

おぉ！いい感じになりましたね！

アフォ毛

アフォ毛

ちなみにキャラクター名部分は、

アカキ

「ゲームコンフィグ」→「メッセージウィンドウ」→「名前欄」

アカキ

で、位置調整しております！

アカキ

また文字色を変更したい場合は、

アカキ

「フォントスタイル」→「効果」

アカキ

で、お好きな色に変更できますよ！

アカキ

セーブ・ロードボタンの表示

無事設定は完了しましたが、

アフォ毛

アフォ毛

メッセージウィンドウ内に

アフォ毛

セーブなどのボタンが

アフォ毛

設置されてることもありますよね

アフォ毛

そういった仕様は多いですね

アカキ

ちなみに設置はできますか？

アフォ毛

アフォ毛

もちろんできます！

アカキ

では今度は、

アカキ

「プロジェクト」→「UIデザインツール」

アカキ

を開いてみてください！

アカキ

編集画面はこんな感じです！

メッセージウィンドウが出てきました！

アフォ毛

アフォ毛

右上に表示されている「パーツ追加」から

アカキ

各種ボタンを追加していきます！

アカキ

ここから選択していきます！

セーブボタンの場合は…

アカキ

「セーブボタン」を選択→「パーツの追加」

アカキ

をクリックしてください！

アカキ

セーブボタンが追加されました！

おぉ！簡単に表示できましたね！

アフォ毛

アフォ毛

配置変更は画像をドラッグ&ドロップで、

アカキ

位置を調節し適用ボタンを押してください！

アカキ

この要領でロードボタンも追加していきます！

アカキ

配置完了後がこちら！

いい感じに配置はできましたが、

アフォ毛

アフォ毛

ボタンが小さいような…

アフォ毛

パラメータの設定で大きくしましょう！

アカキ

パラメータ設定画面です！

「パーツ追加」の横(右側)にある

アカキ

「パレメータ」を開いてください！

アカキ

なにやら入力できそうな画面！

アフォ毛

アフォ毛

「Width」と「Height」の数値を

アカキ

いじれば大きさも変更できます！

アカキ

サイズ変更後がこちら！

いい感じの大きさになりましたね！

アフォ毛

アフォ毛

ちなみにボタン画像の変更も可能です！

アカキ

「パラメータ」→「クリックで画像変更」

アカキ

で、お好きな画像を選択できます！

アカキ

使用する画像はメッセージウィンドウと同様に、

アカキ

「image」フォルダに入れておいてくださいね！

アカキ

まとめ

＊今回のポイント

・フレーム画像さえ準備できたら、メッセージウィンドウは好きなデザインに変更が可能！

・ただし設定後テキスト表示位置の修正は必須なので注意！

・またウィンドウ内にセーブやロード等のボタンを表示させることもできる！

・ボタンデザインも変更可能なので凝ったデザインにすることも◎

簡単にデザイン変更ができるなんてすごい！

アフォ毛

アフォ毛

しかもティラノビルダーは無料ですし、

アフォ毛

至れり尽くせりとはまさにこのことですね！

アフォ毛

次回はセーブ・ロード画面の変更について

アカキ

ご説明できたらと思ってます！

アカキ

おぉ！楽しみにしてますね！

アフォ毛