UnityでRPGゲームのメッセージ表示機能を作る

今回はRPGゲーム等でよく使われるメッセージ表示機能を作りたいと思います。
誰かと話した時に、その会話の内容を表示する部分です。

大まかな仕様として、表示したい会話の内容を一定秒数後に一文字づつ表示していく。
1回で表示出来る文字数を指定しておき、それを超えたらマウスクリックするまで次の
話の内容を表示しない。

また、文字を表示している間にマウスクリックをしたら、1回で表示出来る文字数分を一気に表示するクイック表示機能をつける。
表示したい会話の内容がなくなった場合、マウスクリックでメッセージ画面ごと消す。

こんな感じの仕様にします。

スポンサーリンク

メッセージ表示用のUIを作成

まずはメッセージを表示する場所を作成します。

ヒエラルキーにCreateからUI→Canvasを作り、名前をMessageUIとします。
MessageUIの子要素にUI→Panelを作り、その子要素にUI→Text、UI→Imageを作成します。

メッセージ1

上のような感じの階層を作成します。


メッセージ2

大枠がPanelで、それより少し小さくTextを作成します。Imageは右下に配置します。
Imageはクリックを促すアイコンになるのでインスペクタのSource ImageでSpriteを設定してください。
TextをPanelより少し小さくしたのは、同じ大きさにすると枠ギリギリに表示されてしまうので見づらくなる為です。

メッセージ3

Textのインスペクタで設定を上のようにします。

Alignmentは左上を指定し、左上から会話が表示されるようにします。
Horizontal OverflowはWrapにし、横幅を超える文字があった場合自動で次の行に表示します。
Vertical OverflowはTruncateにします。Truncateにすると縦幅を超える文字があった場合表示しません。
Overflowに設定すると、指定した文字は枠を超えて表示されるようになります。

ここの設定は自由に設定してください。

Best Fitにチェックを入れると枠に応じて制限内で文字の大きさが自動で変更されます。
制限値はBest Fitにチェックを入れると、Min SizeとMax Sizeの指定が出来ます。
しかし、メッセージは統一した文字の大きさで表示したいので、今回はチェックを入れません。

メッセージ表示スクリプトMessageを作成

ではメッセージを表示するスクリプトMessageを作成します。

変数宣言はコメントにある通りです。

メッセージ4

public変数で指定されたものは上のように設定しました。
メッセージ表示間隔textSpeedは0にしてUpdate関数の実行毎に次の文字が表示されるようにします。

クリックを促すアイコンはImageに設定するので、そのImageを取得する為にtransform.FindChildを使用します。
自分自身の子要素から特定の階層のゲームオブジェクトを取得するのに便利です。

取得したら非表示にしておきます。

その他Textの取得と初期化、メッセージの処理の初期化をStart関数内で行っています。

今回はサンプルなので、Start関数内で表示したいメッセージを設定しています。

Update関数で実際のメッセージ表示機能を作成します。
メッセージを一定時間毎に表示していきますが、改行文字(\n)であった時は、次の行に移動するので、nowLineに1を足して、次の行になったことを記憶しておきます。

改行文字以外の時はその行の現在の文字数であるtextLengthを1ずつ足していき、
指定した1行の文字数を超えた時にnowLineに1を足して次の行に移行したことを記憶します。

まぎらわしいですが、nowTextは1回で表示される現在の文字の値ではなく、メッセージ全体でどこまで表示したかを表す変数です。

メッセージ表示中にマウスの左クリックが行われた時はallTextに現在まで表示している文字を全部入れて、その後繰り返しを使って1回で表示できる文字数までallTextに文字を足していきます。
制限を超えたらmessegeUIにallTextを入れて表示します。

1回で表示できる文字数を超えたら、クリックを促すアイコンを点滅させます。

クリックされたら、全部のメッセージが表示されているかされていないかで分岐させ、
全部のメッセージが表示されていたらメッセージUI自体を削除します。

まだ表示していないメッセージがある場合はテキスト処理関連の変数を初期化し、
メッセージの途中からまた表示させていく、という感じになります。

これでメッセージ表示機能の作成が出来ました。
Unityの実行ボタンを押して確認してみましょう。

メッセージ5

上のようになりました。

メッセージ機能の問題点

現状ではメッセージの途中で意図せず途切れてしまう事があります。
これは文字数で行を制限している為です。

1回のメッセージで表示をする最後を何らかの記号などを書いて設定しておき、
その文字を検出したら一旦表示をやめクリックを促すという処理を加えるといいかもしれません。
その最後の検出文字が出る前に1回のメッセージ表示限度を超えてしまっては元も子もありませんが・・・。