UI Unityゲーム開発 2023年1月21日

ドラクエ風簡単な名前入力システムを作る

ドラクエをはじめ、名前を入力するシステムはよくありますね。
今回はなるべく簡単にその仕組を作ってみたいと思います。
完成系はこのような感じです。

今どきのゲームはよくわかりませんが、レトロゲームではおなじみの名前入力システムだと思います。

必要なものを配置

では早速やっていきましょう。

枠の作成

必要な素材とUIオブジェクトを配置していきます。
Hierarchy上に2つImageを作ります。

LetterPanel（文字を選択する枠）
NamePanel（選択した名前を表示する枠）

それぞれを程よい位置に配置します。

名前用の枠の調整

続いてNamePanelに「なまえ：」と書いてあるテキストを配置します。
NameHeaderとします。
次に実際に文字が選択されたら表示されるテキストをNamePanelに配置します。
NameTextとします。
Widthは実際に表示させたい文字数で収まるように調整して下さい。
位置を調整するときに親要素のNamePanelにHorizontalLayoutGroupコンポーネントを追加しておくと配置が楽です。
このような感じになりました。

文字選択用枠の調整

続いて文字選択用のLetterPanelを作り込んでいきます。
まずLetterPanelにGridLyaoutGroupコンポーネントを追加します。
これは格子状に子要素を並べてくれるので便利です。
続いて子要素に1文字のTextを作ります。「あ」と表示させておきましょう。
この名前をLetterとします。
選択中のカーソルが必要ですね。
カーソルとなるような素材を用意してプロジェクトにインポートしておきましょう。

カーソルの準備ができたらLetterの子要素にImageを作成しカーソルの素材を配置します。
名前はArrowとしました。
次にArrowの位置調整が必要です。
Transformで調整しても構いませんが、LetterにHorizontalLayoutGroupを追加すると楽に配置できます。
良い位置にArrowを配置してみて下さい。
現在こんな感じになっています。

Letterの位置を調整しましょう。
LetterPanelに追加したGridLayoutGroupのPaddingの値を調整すると位置を調整できます。
今回はLeftを50、Topを50にしました。

それでは子要素のLetterを複製してどのように並ぶか見てみましょう。
試しに15個並べましたが間隔が結構開いてると思います。
今回はLetterが横に10個並んで折り返しするようにしたいです。
再びLatterPanelのGridLayoutGroupを調整します。
Cell SizeというプロパティでXとYの大きさを調整します。
今回はXを55、Yを50としました。
ゲームビューとLetterPanelのInspectorはこんな感じになっています。

このあたりはお好みで調整してみて下さい。

これで配置は完成です。続いてLetterの文字の中身を「あ」ではなく五十音にしていきたいと思います。

五十音の表示

LetterのTextコンポーネントは「あ」となっていますが、それを五十音分複製し「い」「う」「え」…と手動で作っていっても良いのですが、少し手間ですのでCSVデータから自動で五十音分のLetterを作る方法をやってみたいと思います。

LetterをPrefab化

そのためにまずLetterをPrefab化しましょう。
Prefab化したLetterの文字を空にします。そして子要素のArrowを非表示にしておきましょう。
何も表示されなくなりました。

続いてLetterというC#スクリプトを作成し、LetterのPrefabにアタッチします。
Letterスクリプトの中身はこのようにします。

SerializeFieldで子要素のArrowを取得するための変数arrow、Text型の変数letterを定義します。
Start関数で自身のTextコンポーネントを取得しletter変数に格納します。
次のSelected関数は自身の選択状態によって子要素Arrowの表示・非表示を切り替える処理をしています。
SettLetter関数は自身のTextコンポーネントの文字を設定する関数です。
最後のSelectLeterは決定されたときに文字を返す関数です。
これでLetterPrefabは完成です。

続いてLetterPanelを作っていきましょう。

LetterPanelスクリプト

新たにLetterPanelというC#スクリプトを作成し、ゲームオブジェクトLetterPanelにアタッチします。
LetterPanelスクリプトを作り込んでいきましょう。

変数の定義

まず必要となる変数を定義していきます。

上から順番に、

LetterPrefab用の変数
五十音CSV用の変数
名前表示用のText型変数
生成されたLetterを格納するList
名前の最大文字数
選択中の文字の番号用変数
名前用のstring型変数

となっています。
ではUnityエディターに戻ってLetterPanelのInspectorからそれぞれアタッチしていきましょう。
Letterには先程プレファブ化したLetterを、LetterTextには五十音用CSVを、NameTextにはNamePanelの子要素であるNameTextをそれぞれ割り当てます。
五十音用のCSVは検索すればいくつかのサイトで提供しくれていますが、私の作ったCSVデータを載せておきますので、よろしければコピペして使ってみて下さい。

CSVデータ読み込み

いよいよCSVデータを読み込んでいきます。Start関数を以下のようにします。

ここではCSVデータから一行ずつ分割し、さらにカンマ区切りで分割して一文字ずつ取り出しています。
詳しくは過去の記事「テキストデータからマップを作ってみる」をご覧ください。
実行してログがちゃんと出ているか確認してみましょう。

ちゃんとひらがなが一文字ずつログで表示されていますね。

ひらがなを画面に表示する

続いて画面上にこのひらがなを表示させてみましょう。
流れはこのようになっています。

Letterオブジェクトの生成
lettersに格納
letterに文字を送る

スクリプトはこのようになります。

Start関数の最初でListを初期化しています。
続いてループ内のDebug.Logを削除し、Letterを生成、Listに格納、コルーチンで生成したLetterの文字をセットしています。
生成してすぐに letterObj.SetLetter(l); とするとNullReferenceExceptionになってしまいますのでコルーチンを挟んで処理をしています。

実行してみるとこのようになりました。

無事に五十音のひらがなが並びましたね。
次はカーソルを表示して文字を選択出来るようにしていきます。

文字の選択

ではまずLetterPanelスクリプトのUpdateでキー入力の処理を書いていきましょう。

キー入力

入力したキーの方向でcurrentIndexの値を操作しています。
左で＋1、右で-1、下で+10、上で-10と言った感じです。
上下に関してはもっと良いやり方もありますが、わかりやすくするためにマジックナンバーにしています。
10という値に関してはLetterPanel内の折り返し文字数が10個なのでこのようにしています。

カーソルの表示

次にLetterの子要素であるArrowの表示非表示をやっていきましょう。
LeterPanelスクリプトにShowArrowという関数を新たに追加します。
そしてStart時、Updateのキー入力時でそれぞれ呼び出すように修正します。

ShowArrow関数内ではまず、currentIndexの値が範囲外にならないようにMathf.Clampで数値を丸めています。
関連記事：プレイヤーの移動範囲をMathf.Clampで制限する
その後、lettersの数だけループしcurrentIndexの値とiの値が一致した場合はLetterスクリプトのSelectedを呼んで表示、それ以外は非表示としています。

実際に動かしてみるとこのようになります。

カーソルが範囲内で正常に動いてくれています。
次は一文字ずつ決定したり、間違えた場合はバックスペースで一文字消したりしたいと思います。

文字の決定と削除

スクリプトを触る前にNameTextが「ああああああああ」となっていますので空っぽにしておきましょう。

文字を決定していく

今回はスペースキーを押したら一文字決定とし、nameTextに表示していきます。
LetterPanelスクリプトのUpdate関数に処理を追加します。

スペースキー入力時の処理を書きました。
string型のmyNameの長さが最大文字数maxNameLengthの値より少なければmyNameに現在選択中のLetterのSelectLetter関数を呼び出し一文字追加しています。
その後nameTextのtextにその値を入れています。
実行するとこのような感じです。

文字数の制限もできているのが確認できました。