ゲーム製作  ·  23日 4月 2024

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

 

どうも！

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

管理人のアカキです！
アカキ

  アカキ           

 

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

アフォ毛

         アフォ毛

 

についてですか！

アフォ毛

         アフォ毛

 

はい！
アカキ

 アカキ           

 

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

 アカキ           

 

よろしくお願いします！

アフォ毛 

         アフォ毛

 

  




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

 

変更するにあたって、

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

最低でもフレーム画像は
アカキ

 アカキ           

 

用意しておいてください！
アカキ

  アカキ           

 

当たり前な話ですが、
アカキ

  アカキ           

 

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

 アカキ           

 

ちなみに画像形式は

アフォ毛

         アフォ毛

 

なんでもいいんですか？

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

  アカキ           

 

無難かなと思います！
アカキ

  アカキ           

 

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

  アカキ           

 

 

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

こちらの画像の悪用・無断転載・無断使用はお控えください。

 

むっちゃシンプル！！

アフォ毛

         アフォ毛

 

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

 アカキ           

 

 

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

アフォ毛

         アフォ毛 

 

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

 アカキ           

 

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

  アカキ           

 

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

 アカキ           

 

わかりました！

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

 

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

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

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

 アカキ           

 

を開いてください
アカキ

  アカキ           

 

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

 アカキ           

 

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

  アカキ           

 

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

  アカキ           

  

 

 

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

 

 

 

編集画面を開きました！

アフォ毛

         アフォ毛

 

では次に左上にある
アカキ

 アカキ           

 

「プロジェクト」を
アカキ

 アカキ           

 

クリックしてください。
アカキ

  アカキ           

 

 

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

 

 

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

アフォ毛

         アフォ毛

 

この中から一番下にある
アカキ

  アカキ           

 

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

  アカキ           

 

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

 

 

おぉ！なんか出てきた！

アフォ毛

         アフォ毛

 

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

  アカキ           

 

「メッセージウィンドウ」
アカキ

  アカキ           

 

を開いてください！
アカキ

 アカキ           

 

 

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

 

 

開きました！

アフォ毛

         アフォ毛

 

では次に、
アカキ

 アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

 

 

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

 

 

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

アフォ毛

         アフォ毛

 

ここをクリックして
アカキ

アカキ           

 

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

 アカキ           

 

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

 

 

…あれ？

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

見当たらないですね…

アフォ毛

         アフォ毛

 

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

 アカキ           

 

ここで一旦
アカキ

  アカキ           

  

ティラノビルダーのフォルダ
アカキ

  アカキ           

 

を開いてください！
アカキ

  アカキ           

 

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

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

「myproject」を開きます！
アカキ

  アカキ           

 

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

 

 

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

  アカキ           

 

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

  アカキ           

 

 

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

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

 

dataフォルダ内です！

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

 アカキ           

 

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

 アカキ           

 

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

 

 

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

アフォ毛

         アフォ毛

 

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

 アカキ           

 

 

画像選択後の画面です！

 

 

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

アフォ毛

         アフォ毛

 

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

アカキ           

 

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

  アカキ           

 

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

アカキ           

 

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

  アカキ           

 

 

テストプレイ画面です！

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

 アカキ           

　

 

テキスト位置の変更

 

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

 

 

 

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

  アカキ           

 

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

  アカキ           

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

  アカキ           

 

 

 

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

 

 

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

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

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

 

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

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

セーブなどのボタンが

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

 

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

  アカキ           

 

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

アフォ毛

         アフォ毛

 

もちろんできます！
アカキ

  アカキ           

 

では今度は、
アカキ

  アカキ           

 

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

  アカキ           

 

を開いてみてください！
アカキ

  アカキ           

 

 

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

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

  アカキ           

 

 

 

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

 

 

セーブボタンの場合は…
アカキ

  アカキ           

 

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

  アカキ           

 

をクリックしてください！
アカキ

  アカキ           

 

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

 

 

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

アフォ毛

         アフォ毛

 

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

 アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

 

配置完了後がこちら！

 

 

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

アフォ毛

         アフォ毛

 

ボタンが小さいような…

アフォ毛

         アフォ毛

 

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

  アカキ           

 

 

 

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

 

 

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

 アカキ           

 

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

  アカキ           

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

アフォ毛

         アフォ毛

 

「Width」と「Height」の数値を
アカキ

  アカキ           

 

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

  アカキ           

 

サイズ変更後がこちら！

 

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

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

  アカキ           

 

 

まとめ

 

＊今回のポイント

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

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

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

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

 

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

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

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

アフォ毛

         アフォ毛

 

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

  アカキ           

 

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

  アカキ           

 

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

アフォ毛

         アフォ毛

 

 

前の記事／次の記事