オリジナルポストカードは”こちら”で好評発売中!

Unity2D / 只見周遊すごろく制作4(UIエレメント)

BoardGameのチュートリアルを参考に、プレイヤーのチャとシロが、只見町の各名所を巡るボードゲームの制作に挑戦した時のまとめ。

今回のゲームで参考にしたチュートリアルはこちら
Unity 2D Tutorial How To Create Simple Board Game With Dice Rolling And Turn Based Movement Features

 チャとシロの只見周遊すごろくの概要

サイコロをクリックするだけで遊べる、簡単な2人対戦のすごろくゲームです。

2Dゲームで遊んでいる時の様子

チャの勝ちです
シロの勝ちです

 レスポンシブなUIエレメントの追加(画像)

新しくcanvasを追加し、スケールモードをScale With Screen Sizeに設定する

Hierarchyのcanvas上で右クリックし、新しいUIイメージを2つ追加

UIイメージの名前をPlayer1IconとPlayer2Iconに変更

Player1IconとPlayer2Iconそれぞれの Source Imageに、各スプライト画像をアサインする

Player1Iconを画面右上に、Player2Iconを画面右下に配置

今気づいたけど、チュートリアルではAlt(option)を押しながらクリックしているよう。一旦PosXもPosYも0で合わせて、アイコンのスケールを調整してから、位置の調整をする。

作った当時はAlt(option)を押さないでやってしまいました。これだと、ほんとの端の方には配置されない感じなのですかね。

ボード上にチャとシロのイラストを別途追加しているため、取り急ぎposXとposYは0ではない位置で設定。後々、ボード画面のスケールの設定か何かががうまくいかなかったので、このPlayer1IconとPlayer2Iconをそのまま使用するか、ボードに直描きしている方を使うか、両方残すか、今回の制作過程を復習しながら判断しようと思います。

 レスポンシブなUIエレメントの追加(どちらのPlayerの番かを表示するテキスト)

Hierarchyのcanvas上で右クリックし、新しいUIテキストを2つ追加し名前を変更

ここで付ける名前は、GameControlスクリプトに影響するので、大文字小文字の違いも含めて、スクリプトで使用する綴りと同じになるようにしておくこと。スクリプトと異なった場合、スクリプトがGameObjectを見つけることができない。

この場合は、Player1MoveText と Player2MoveText に設定。

GameControlスクリプトの中身記事へのリンク及び抜粋は以下です。
Unity2D / 只見周遊すごろく制作3(プレイヤを移動させる仕組み)

フォントの変更

テキストのフィールドに表示したい文字を入れる。日本語は日本語が使用できるフリーのものをダウンロード。

UIテキストの配置

 UIエレメントの追加(勝ったPlayerの名前を表示するテキスト)

UIテキスト WhoWinsTextをボードの中心に配置

WhoWinsTextをボードの中心に配置。(チュートリアルより。画像はクリック前と、クリック後)

フォントと文字の大きさを調整

「PlayerX」の部分は、ゲームの結果によって表示される文字が変わるように、スクリプトで制御。

 UIエレメントの整列とオーバーフローの設定(勝ったPlayerの名前を表示するテキスト)

文字が変化する部分を含むので、文字が途中で切れたりしないように、幅も高さもOverflowに変えておく。

 ボード上のWaypointsをPlayerを動かすスクリプトの変数にアサイン

Player1を選択して、ヒエラルキー上の個々のWaypointsを全選択し、Player1のFollowThePathスクリプトのWaypointsのスロットの辺りにドラッグ。Player2も同様にします。

FollowThePathスクリプトの中身記事へのリンク及び抜粋は以下です。
Unity2D / 只見周遊すごろく制作1(背景-Waypoint-キャラの移動)

 Unity上では動いて先ずは一安心

チュートリアルビデオはここまで。次回はホスティングに挑戦する回です。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。