Skip to main content

UIを作成

インベントリの中にあるアイテム(コイン、鍵)を画面上で表示し、主人公の体力も可視化しましょう。

Canvas作成

ヒエラルキーに新しい Canvas を追加してください。

Canvas Scaler を紹介

Canvas を作成するときに、同時に「Canvas Scaler」のコンポーネントを作成される。このコンポーネントは想定する画面のサイズに合わせて、自動的にCanvasを拡大縮小する。

例えば、UIを開発したときに、想定していた画面サイズは FullHD (1920 x 1080) だった。ただ、プレーヤーは 4K(3840 x 2160)で遊ぶとしたら、画面がすごく小さくなってしまう。

この場合は Canvas Scaler を使用すれば、画面が大きくなっても、小さくなっても、いつも正しく表示される

image.png

Canvas Scaler 無し:FullHD から 4K に切り替えると、UIが小さくなってしまう

image.png

Canvas Scaler で想定サイズを入力すると、4K に切り替えても、UIがのサイズを保持する

今回、上記の設定で進めましょう。

コインの数

画面の右上にコインの数を表示しましょう。Canvas の中で、以下のようにヒエラルキーを作ってください:

image.png

 

こうなるように:

 

image.png

  • Coin:Image(画像)にし、背景は半透明の黒にする

image.png

  • Icon:Image(画像)にし、コインのアイコンにする

image.png

 

  • Text:TextMeshPro にし、000 ので始まるようにする

image.png