Last Updated 2024.03.25
初心者による週末Unity備忘録。
今回は格ゲーっぽいキャラクターセレクト画面を作成してみたので、その手順とか要点とか疑問とか。
かなりの長文になってしまったので、今回は分割して掲載します。
その①は、キャラセレ画面全体のUIとインスペクターの設定
その②で、カーソル移動など実際に動かすスクリプト関係のお話になる予定です
Scene作成
まず基盤となるSceneの作成から。
描画負荷の関係で、完全プレーンなテンプレートからの作成は罠で、現行だと特に理由がない限りはURPで作成した方が軽い……的なお話を、過去の調べでぼんやりとは認識していたので、URPのテンプレートから作成していきます。
実際のところ、今回は3Dモデルとか特殊な描画を一切使用しないデザインだったので、意味がないんですかね？ 正直解りません(´･ω･`)
このときURPのテンプレートが「Basic」と「Standard」の2つあって、「前こんなのあったっけ？」と思い、軽く調べてみたのですが……
何がどう違うのか分かりませんでした。おそらく最初に置いてあるGameObjectと付属するコンポーネントに違いがあるのでしょうが…
出だしからこんな調子で大丈夫なのかって話なんですが、ここで躓いても仕方ないので、今回はBasicプランで作成してみます。
Scene名は『CharacterSelect』としました。
次に、MainCameraインスペクターのCamera設定でClearFlagsを[Skybox]から[SolidColor]に変更。
Backgroundで背景色を変更できるようになります。
DirectionalLightは一応[Mode]設定を[Baked]に。
今回は使用しないのでチェックを外し、非アクティブ化しておきます。
今回配置したい要素を分解すると……
・キャラクターアイコン
・選択中のキャラを示すカーソル
・選択中のキャラ名
・選択中のキャラが視覚的に分かる何か（キャラ絵とか3Dモデル）
・プレイヤーセレクトの文字列
視覚的に盛る演出や装飾を除くと、最低限組み込みたい要素はこの辺になります。
まずヒエラルキー上で右クリックから[UI]→[Canvas]で、UIの基盤となるCanvasを作成。
インスペクター欄の[UIScaleMode]を[ScaleWithScreenSize]に。
[CanvasScaler]を『制作したい画面のサイズ』に変更します。
これをやっておかないとUIの配置や調整がまともに出来ないので重要です。
UI作成時にアンカーが思い通りにいかなかったり、画面の拡大縮小で配置が崩れる場合、まずここの設定を確認してみて下さい。
キャラクターアイコンの配置
キャラセレ画面の配置やデザインは、今回はシンプルに正方形のアイコンを横一列に並べます。
ヒエラルキー上で右クリックから[UI]→[Panel]を選択。
名前は『CharacterIcon』とします。
『CharacterIcon』インスペクターのAddComponentから
[Layout]→[Horaizontal Layout Group]を選択して取り付け。
[Horaizontal Layout Group]コンポーネントは、子要素のゲームオブジェクトを横に整列してくれます。
Horaizontal Layout Groupインスペクターの
Spacingでアイコンの間隔
ChildAlignmentで配置の設定が出来ます。
今回はアイコン間隔を－30、中央配置のmiddleCenterに設定しました。
CharacterIconのRectTransform、widthとHeightも、ゲーム画面に合わせて調整します。
次にヒエラルキー上でCharacterIconから右クリック、[UI]→[Panel]で新しいPanelを作成し、CharacterIconの子要素にPanelを作成します。名前は暫定的にCharacter1としました。
Character1のインスペクタ、RectTransformのwidthとHeightを、今回仕様したい画像サイズの128に変更。
同じ手順で、今度はCharacter1からPanelを作成し、Character1の子要素にPanelを設定します。
これは選択位置に表示されるカーソルになるので、名前はcursor1とします。
このオブジェクトは選択されているときにアクティブにしたいので、インスペクターのチェックを外し、RectTransformのwidthとHeightも、アイコンより少し大きめに設定しました。数字は、使用したいカーソル画像に合わせて調整して下さい。
ヒエラルキー上ではこういう表示になります。
あとはCharacter1オブジェクトを選択した状態でCtrl+Dするとオブジェクトが複製され、ゲーム画面では横に1つアイコンが増える筈です。必要な分だけ複製し、名前を変更していきます。今回はそのまま末尾の数字をCharacter2、Character3と変更します。
子要素のcursorも設定された状態で複製されるので、そこの名前も変更しておきます。今回5番目のキャラだけ画像を試したかったのでこういう状態になりました。
最後に、キャラクター選択のアイコンに使用するスプライトを用意します。
今回は128×128サイズの画像を使用しました。
画像をUnityに取り込んだら、インスペクターのTextureTypeをSprite(2D and UI)に変更。
あとは、Character1オブジェクトのインスペクターにある[Imege]→[SourceImage]にアイコン画像。
corsorの[Imege]→[SourceImage]にカーソル画像を設定していきます。
キャラクターネームの配置
今回はTextMeshProを使用します。
基本的にはアイコン配置の時と同じように、RectTransformのアンカーと数字で調整していきます。
デザイン的な調整
プレイヤーセレクト画面であることを視覚的に解りやすくするために
TextMeshProで「PLAYERSELECT」の文字を中央に配置。
直感的に選択キャラが分かるよう、画面両端に選択キャラの表示をさせます。
今回は短冊状の絵を使う予定 幽〇白書FAINL的な。
使用キャラが現代の基準だとあり得ないレベルで少ないのが気になるでしょうが……
個人開発の限界です
ストⅡやバーチャだって、最初に使えるのは8キャラだったんですよ！
あと単純に、Unityで格ゲーを開発する際に直面するもっと根本的な問題もあります。
この辺のお話はまた別の機会があれば。