Last Updated 2025.8.13
初心者による週末Unity備忘録。
今回は格ゲーっぽいキャラクターセレクト画面を作成してみたので、その手順とか要点とか疑問とか。
その①は、キャラセレ画面全体のUIとインスペクターの設定。
その②で、カーソルなどを実際に動かすスクリプト関係のお話です。
▲こんなカンジのものを作っていきます(※24年3月時点)
Scene作成
まずは基盤となるSceneの作成から。
描画負荷の関係で、現行だと特に理由がない限りは URPで作成した方が軽い 的なお話を目にした記憶があったので、今回はURPのテンプレートから作成します。
実際のところ、3Dモデルとか特殊な描画を一切使用しないデザインの場合、意味がないんですかね？ 正直解りません(´･ω･`)
今回、Scene名は《CharacterSelect》としました。
本筋とは関係のない疑問点
このとき、URPのテンプレートが「Basic」と「Standard」の2つあって、『前こんなのあったっけ？』と思い軽く調べてみたのですが、何がどう違うのか分かりませんでした。おそらく最初に置いてあるGameObjectと付属するコンポーネントに違いがあるのでしょうが……
出だしからこんな調子で大丈夫なのかって話なんですが、ここで躓いても仕方ないので、今回は「Basicプラン」で作成してます。
背景の変更
次に、背景を変更します。
URPプロジェクトの場合
《MainCamera》オブジェクトのインスペクターにあるCameraの設定
[ Environment ] タグ内にある [ Background Type ] を
[ Solid Color ] に変更します。
これにより、[ Background ] で背景色を変更できるようになります。
Built-in Render Pipelineの場合
MainCameraインスペクターのCamera設定内に [ClearFlags] があるはずなので、そこを Skybox から SolidColor に変更して下さい。あとは同じように、[ Background ] で背景色を変更できるようになります。
要素の洗い出し
今回配置したい要素を分解すると──
- キャラクターアイコン
- 選択中のキャラを示すカーソル
- 選択中のキャラ名
- 選択中のキャラが視覚的に分かる何か（キャラ絵とか3Dモデル）
- プレイヤーセレクトの文字列
”視覚的に盛る演出や装飾” を除くと、最低限組み込みたい要素はこの辺になります。
Canvas設定
まずヒエラルキー上で右クリックから[UI] > [Canvas]で、UIの基盤となるCanvasを作成。
インスペクター欄の [ UIScaleMode ] を [ ScaleWithScreenSize ] に。
[ CanvasScaler ] を " 制作したい画面のサイズ " に変更します。
これをやっておかないと、UIの配置や調整がまともに出来ないので重要です。
UI作成時にアンカーが思い通りにいかなかったり、画面の拡大縮小で配置が崩れる場合、まずここの設定を確認してみて下さい。
※なお、Canvas配置時に《EventSystem》というオブジェクトが自動で作成された場合、入力やイベント送信を処理するのに必要なものですので、（削除とかせずに）そのままにしておいて下さい。
キャラクターアイコンの配置
今回の配置やデザインは、シンプルに正方形のアイコンを横一列に並べてみます。
アイコン全体の配置
ヒエラルキー上で右クリックから [ UI ] > [ Panel ]を選択。
名前を《CharacterIcon》に変更します。
次に、CharacterIconインスペクターのAddComponentから
[ Layout ] > [ Horaizontal Layout Group ] を選択して取り付け。
※Horaizontal Layout Group は、子要素のゲームオブジェクトを自動的に横に整列してくれるコンポーネントです。
Horaizontal Layout Group インスペクター欄の [ Spacing ] でアイコンの間隔。
[ ChildAlignment ] で配置の設定が出来ます。
また、この時点で CharacterIcon の「RectTransform」内、widthとHeightの値も、ゲーム画面に合わせて調整します。
並んでるアイコン全体の配置 は、ここの設定で調整できます。
※配置したい位置によっては Pos X と Y の値も使用して下さい。
アイコン単体の基盤を作る
次に、再びヒエラルキー上でCharacterIconから右クリック、[ UI ] > [ Panel ]で新しいPanelを作成し、CharacterIconの "子要素" にPanelを作成します。
名前は暫定的に《Character1》としました。
このとき、Character1のインスペクタ、RectTransform の[ width ]と[ Height ]の値も、使いたい画像のサイズに変更します。
今回は128×128に設定しました。
同じ手順で、今度は上で作成したCharacter1からPanelを作成し、"Character1の子要素" にPanelを設定します。
これは 選択位置に表示されるカーソル になるので、名前は《cursor1》とします。
このオブジェクトは選択されているときにアクティブにしたいので、インスペクター欄上部、オブジェクト名の横にあるチェックを外し、最初は非表示の状態にしておきます。
※最終的に、ヒエラルキー上ではこういった表示になります
アイコン基盤の複製
あとは、Character1オブジェクトを選択した状態で ” Ctrl+D ” するとオブジェクトが複製され、ゲーム画面上では横にアイコンが1つ増える筈です。必要な分だけ複製し、名前を変更していきます。
↓今回はそのまま末尾の数字をCharacter2、Character3と変更しました。
子要素のcursorも設定された状態で複製されるので、そこの名前も変更しておきます。
画像だと、今回回5番目のキャラだけ色々試したかったのでこういう状態になりました
最後に、キャラクター選択のアイコンに使用するスプライトを用意します。
画像をUnityに取り込んだら、インスペクターの TextureType を Sprite(2D and UI) に変更。
Character1オブジェクトのインスペクターにある [Imege] > [SourceImage] にアイコン画像。
corsorの [Imege] > [SourceImage] に、カーソル画像を設定していきます。
キャラクターネームの配置
今回は TextMeshPro を使用します。
基本的にはアイコン配置の時と同じように、RectTransformのアンカーと数字で調整していきます。
導入方法からの解説は、今回の本題ではないため割愛します。
仮組の場合は普通のText機能で問題ありません。
デザイン的な調整
プレイヤーセレクト画面であることを視覚的に解りやすくするために、TextMeshPro で 「PLAYERSELECT」の文字を中央に配置。
あとは直感的に選択キャラが分かるよう、画面両端に選択キャラの画像を表示をさせます。
今回の作例では、短冊状のスプライトを使う予定です。
使用キャラが、現代の基準だとあり得ないレベルで少ないのが気になるでしょうが……
個人開発の限界 です
ストⅡやバーチャだって、最初に使えるのは8キャラだったんですよ！
その②へ続く
▼カーソルの移動、キャラ画像の変更を行うスクリプトの作例は、その②に続きます。
【Unity】キャラクターセレクト画面を作成してみる②
最後までお読みいただき、ありがとうございました。
何か一つでも、制作の手掛かりになりましたら幸いです。