はじめに
短いメッセージをメッセージログのように表示するものを作りたい。
目に見える動作として、
1）ボタンが押されたらメッセージが表示されること。
2）新しいメッセージを追加したら前のメッセージは上に流れること。
にします。
今回は、自前のRPGで作ったものを解説用に直してご紹介したいと思います。
目次
準備
まず、ヒエラルキー"Hierarchy"を右クリックして"UI"から
"Canvas"、"Text(Legacy)"、"Button(Legacy)"を作成します。
それぞれの親子関係を fig.1 のようにします。（赤枠で囲った部分です）
シーン上にテキストとボタンが現れるので重ならないように配置します。
2D表示にすると見やすいかもしれません。
fig.1 オブジェクトの作成
1.表示の調整
テキストは複数行で表現したいので表示範囲を大きくします。(fig.2)
fig.2 テキストの調整
2.テキストログの動作の流れ
テキストログの動作の流れを確認します。
- 新しいメッセージが発生する
- 1行分の新しいメッセージを作成する
- 新しいメッセージは一番下に表示される
- 既存のメッセージは上の行に移動する
- 時間が経ったメッセージから消えていく
恐らく、「4.既存のメッセージは上に移動する」かと思います。
ではどうやって下から表示していけばよいのでしょうか？
テキストオブジェクトは1つだけです。
fig.3のように下から表示しているように見せるようにすれば良さそうです。
fig.3 上へ流れるテキストログの考え方
3.テキストログスクリプトの作成
プロジェクトに新しいスクリプトを追加します。
"Project"ウィンドウの中を右クリックし、"Create" → "C# script" を選択。
ファイル名を"TextLog"とします。(fig.4)
fig.4 "TextLog.cs"の作成
"TextLog.cs"
※ 前項では3行までの解説図でしたが、実際のテキストログは5行まで表示可能としました。
※ スクリプトに無駄があると思いますが、動作できるので問題なしとしました。
まず、このプログラムは BuildLogText()関数が重要です。
変数"log"の最後の要素から最初の要素へと順番にStringBuilderを用いて連結していきます。
"log"は"lNum"変数と次の一行にてリングバッファ扱いにしています。
lNum = (lNum + 1) % LogMax;
スクリプトを作成し終わったらそれを"Text(Legacy)"オブジェクトにアタッチします。
ここで再生すると、"NewText"の表示が消えるかと思います。(fig.5)
fig.5 Text(Legacy)オブジェクト単体の動作
4.メッセージボタンの作成
プロジェクトに新しいスクリプトを追加します。
"Project"ウィンドウの中を右クリックし、"Create" → "C# script" を選択。
ファイル名を"Button"とします。
まず、"Button.cs"の中身を書きます。
"Button.cs"
書き終わったらButtonオブジェクトにアタッチします。
次に、Buttonオブジェクトのインスペクター"Inspector"の設定をします。（fig.6）
- "Button"コンポーネントの"OnClick()"にて、"+"ボタンをクリックします。
- ヒエラルキーの"Button"を"None(Object)"と書いてある欄へドラッグ&ドロップします。
- "No Function"をクリックし、"Button"→"ShowMessage()"を選択します。
fig.6 OnClick()の設定
5.動作の確認
UnityEditorの"Play"ボタンを押して再生してみましょう。
ボタンをクリックするとfig.7(GIFアニメ)のように文字が出ては消えると思います。
fig.7 実行結果
6.おわりに
今回の機能はは私が必要に迫られて作成したものでして、
事前にWEBで調べたのですが参考になるものがあまりなかった印象です。
今後はできるならば、テキストが滑らかに移動するなどをやってみたいと思います。
現在はこれ以上追うとゲーム作りに支障をきたしそうなので見送ります。
最後に、この記事が皆様のお役に立てれば幸いです。
最後までお読みいただきありがとうございました。
7.参考サイト
【unity】ボタンの使い方【押したら処理が呼び出される】:Bokulog様
https://bokulog.org/unity-button/