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

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

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

必要なものを配置

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

枠の作成

必要な素材と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にその値を入れています。
実行するとこのような感じです。

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

間違えた文字を消す

では最後にバックスペースキーで文字を消していく処理を追加します。
同じくLetterPanelスクリプトのUpdate関数内に記述します。

これでmyNameの一番最後の一文字が削除されます。
一点注意ですがmyNameが何も無い場合、この処理を行おうとするとエラーになりますので、0以上の場合という条件をつけています。
それでは実行してみましょう。

文字を後ろから消していけることが確認できました。
濁点、半濁点、カタカナ、英数など色々改良出来ると思います。

Unityの学習方法

Unity初心者の方にオススメの学習方法をいくつか紹介します。

Unity本【kindle unlimited】

私も利用しているAmazonが提供する電子書籍読み放題のサービスです。

月額980円で約200万冊以上が読み放題でとてもお得です。

また30日無料体験もできるのが魅力です。当然Unityに関する書籍もたくさん揃っています。

またC#関連の書籍や、プログラミングのものも多数あります。

プログラミング関連の書籍は値段が結構しますので、それらが無料で読めるのはかなりお得なサービスです。

30日無料体験もありますので気に入らなければその期間に解約すれば料金は発生しません

通常のUnity本

kindle unlimitedは全部のUnity関連書籍が読めるわけではありません。

通常に購入しなければ読めない本もありますので、その中から私が参考になった書籍を紹介します。

Udemy

Udemyの動画講座にもUnity関連のオススメの動画がたくさんあります。

その中でも私が特に気に入っている動画を紹介します。

どの動画も初心者でも完成することが出来るように丁寧に解説しています。

オンラインで学習

質問が出来るおすすめのUnity学習方法ページです。

・Unityでゲーム作りたいけど何から初めたら良いかわからない。

・独学でゲームを完成させられるか不安。

・ゲーム開発でわからないことを一人で解消できない。

・入門書を一通りやってみたが次に何していいかわからない。

こんな人におすすめしたい内容になっています。

最後までご覧頂いてありがとうございました。

感想・コメントをどうぞ

購読
通知する
guest
0 コメント
Inline Feedbacks
View all comments