Canvas には 2D の画像(Sprite)や文字を UI として表示する機能があります。
これら機能を利用して、ゲーム画面の UI に、宝石の画像と得点の値を文字として表示させていきます。

　まずはアセットストアより、無料のアセットをインポートして利用します。

　アセットストアにて Simple UI & icons と検索窓に入力するか、下記の URL より移動してアセットのページに移動し、インポートを行ってください。

Simple UI & icons

---

アセットストア



PackageManager



Import 確認ポップアップ

---

　インポートが終了したら Project フォルダ内の Assets に AurynSky フォルダが追加されていることを確認してください。
インポートされる際のフォルダの構成はアセットストア内で確認できます。アセット名 = フォルダ名ではないことを覚えておくとよいでしょう。


フォルダ



　インポートが終了したので、次はこのアセットを利用して、Canvas 内に UI 用のゲームオブジェクトを作成します。

---

　この手順は必要な方だけ行ってください。

　Unity には Text コンポーネント用に専用の文字のフォントが最初からインポートされています。
他のフォントを利用したい場合には、無料サイトなどからダウンロードを行い、Unity 内にインポートして利用する必要があります。

　最初からインポートされている Arial フォントでよければ、他のフォントのインポートは不要です。

　他のフォントを使いたい場合には、Google などで「無料　フォント」などで検索して、各サイトより無料のフォントをダウンロードしてください。
Unity では、otf か ttf 拡張子のフォント・ファイルが利用できます。


参考サイト

Unity公式マニュアル
フォント

---

　フォントのインポート方法も画像ファイルやオーディオファイルの場合と同じです。
解凍されていないファイルはインポートできませんので、解凍してからインポートします。

　解凍した otf ファイルか、ttf ファイルを Unity へドラッグアンドドロップすればインポートされます。
インポートする際には事前に Fonts フォルダを作成しておいて、その中にインポートするとよいでしょう。


Fonts フォルダ



　英数字だけを扱うフォントもありますので、色々なフォントを探してみてください。

---

　ゲーム画面のUI(ユーザーインターフェース)については別の記事に詳しくまとめてありますので、そちらをご確認ください。

　=>　画面UI

---

　この手順からは順番に、ゲーム内に実装されている内部処理をゲーム画面上に表示・更新する処理を実装していきます。

　前回の手順で ScoreManager スクリプトには totalPoint 変数が追加されました。
こちらの情報をゲーム画面に表示して、宝石を獲得するたびに得点がアップしていく表示を実装します。

　必要な情報としては totalPoint 変数ですが、こちらをゲーム画面に反映するためのゲームオブジェクトも必要になります。

　この時に利用するのが、UIです。Canvas というコンポーネントを持つゲームオブジェクトの中に(子オブジェクトとして)
UI 専用のコンポーネントを持つゲームオブジェクトを設置することで、ゲーム画面の一定の位置に常に情報を表示する機能を実装出来ます。

　今回はゲーム画面の左上に常時スコアの数字の表示を行い、宝石を獲得して得点を加算したときに、スコアの数字を更新するようにします。
なお、表示する位置に関しては任意の位置に変更していただいて構いません。
自分がもしもユーザーだったら、どの位置に、どの位の大きさであれば見やすいか、そういったことを考えて配置を行います。

---

　それでは Canvas ゲームオブジェクトの作成と、スコアの表示を行うためのゲームオブジェクトの作成を行います。


ヒエラルキー画像　完成図



Gameビュー画像　完成図

---

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
ヒエラルキーに Canvas ゲームオブジェクトが作成されます。
一緒に EventSystem ゲームオブジェクトも追加されます。これは１セットで扱いますのでそのままで問題ありません。


ヒエラルキー画像



　Canvas ゲームオブジェクトをダブルクリックしてください。
いままで作業を行っていた Scene ビューの上の方に Canvas 用の場所が追加されています。
これはゲーム画面に Canvas が表示されてしまうと、双方の編集作業が大変になるための措置です。

　Canvas では設定した情報は、ゲーム画面に一緒に表示されるようになります。
そのため、作業のスペースを分けているだけであって、同じゲームの画面として表示されますので問題ありません。

再度 Scene ビューでの作業に戻りたい場合には、Canvas 以外の、ヒエラルキーにあるゲームオブジェクトをダブルクリックしてください。

---

　Canvas ゲームオブジェクトのインスペクターを確認し、Canvas Scaler の UIScaleMode の設定を Scale With Screen Size に変更します。
変更すると Reference Resolusion という設定が追加されますので、こちらに、Game ビューで使用している解像度と同じ大きさを指定します。
今回の教材では 2880 * 1440 の解像度で設定していますので、こちらも同じ数字に指定します。これは、ご自分の設定した解像度と同じにしてください。

　また Screen Match Mode を Expand に変更しておきます。
この設定にしておくことで Canvas の設定を水平・垂直に拡大してくれますので、スマホの解像度とCanvasのサイズに合わせてくれます。

---

　なお、今回のように Canvas の Render Mode を初期設定である Screen Space - Overlay に設定している場合、
その Canvas は「Camera を用いず(カメラの有無に関係なく)、常に Game 画面の最前部に Canvas 内の UI を表示する」という設定になります。

　よって、Canvas には位置の概念がなくなるため、 RectTransform の各値はいじれません。気にせずに作業してください。


Canvas ゲームオブジェクト　インスペクター画像



Gameビューの解像度(この解像度とCanvasの解像度を合わせる)



Sceneビュー画像



　以上でこのゲームオブジェクトの設定は完了です。


参考サイト

Metal Brage 様
画面解像度とスケーリング

---

　Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を Scores に変更します。

Scores ゲームオブジェクトは、スコア表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。

Scores ゲームオブジェクト　ヒエラルキー画像



　Scores ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


Scores ゲームオブジェクト　インスペクター画像



Scores ゲームオブジェクト　Sceneビュー画像(Sceneビューの中央にある)

---

　Scores ゲームオブジェクトの位置とアンカーを変更します。
RectTransform コンポーネント内にある Anchor（アンカー）をクリックして、Alt キーを押しながら、Top Left の位置をクリックしてください。
Scores ゲームオブジェクトが画面の左上の位置に移動するとともに、アンカーの位置も画面左上に設定されます。


＜手順動画　アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)＞
https://gyazo.com/72638c932c398f8ca482dbe0fef4fb89


Scores ゲームオブジェクト　インスペクター画像



Sceneビュー画像



　以上で設定は完了です。

---

　Canvas用のゲームオブジェクトの位置情報は RectTransform コンポーネントによって管理されています。
RectTransform コンポーネントを持つゲームオブジェクトは、ワールド座標による座標の計算ではなく、
親となるゲームオブジェクトからみてどの位置にいるかというローカル座標(相対座標)による座標の計算を行っています。

　この RectTransform コンポーネントには通常の Transform コンポーネントにはない情報がいくつかあります。
その１つがアンカーです。


アンカーのアイコン

　

　アンカーとは、親のゲームオブジェクトからみて、このゲームオブジェクトの基準地点をどの位置に設定するか、という情報です。
ローカル座標によって座標を計算していますので、親のゲームオブジェクトからみて、どこから計算を始めるかというのは重要な設定情報です。
基本的には Center Middle という設定になっており、親のゲームオブジェクトからみて中心の位置をアンカーに設定しています。


アンカーの設定

　

　今回、Scores ゲームオブジェクトに設定したアンカーは、Top Left の位置です。(これはプリセット情報なので、もっと詳細に自分でも設定できます。)
親オブジェクトである Canvas ゲームオブジェクトからみて、画面の中心を基準値としてではなく、画面の左上を基準として座標の計算を行うようにしています。
　
　理由としては、ゲーム画面の比率が変化した際に、RectTransform コンポーネントを持つゲームオブジェクトは、アンカーの位置を基準に配置されるため
画面の比率が変化しても、その状態に対応して、自分の位置を設定してくれるようになるためです。

　例えば今回のように左上にアンカーを設定しておくと、どのゲーム画面でゲームを実行しても、常に画面の左上からみて座標の計算をして、ゲームオブジェクトを配置してくれます。
そうすることによって、ゲーム画面を変えたらスコア表示が見えなくなってしまった、という事態を回避出来るようにしています。


参考サイト

Unity公式ユーザーマニュアル
基本的なレイアウト

徒然エンジニアブログ様
【Unity】UIの基本(Canvas,描画順,アンカー,ピボット)を徹底解説してみる

---

　Scores ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Imgae コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgBackground に変更します。


imgBackground ゲームオブジェクト　ヒエラルキー画像



　imgBackground ゲームオブジェクトは、スコア用のアイコン画像と、数字表示の背景画像表示の役割を持ちます。


imgBackground ゲームオブジェクト インスペクター画像



imgBackground ゲームオブジェクト Sceneビュー画像



imgBackground ゲームオブジェクト Gameビュー画像


　親子関係を間違えないように作成してください。

---

　最初に画像を設定します。
imgBackground ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

　背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

　今回はこちらのパスにある画像を利用しています。

Assets/VIRTI/VOXEL-Forniture-FREE/Example/Standard Assets/CrossPlatformInput/Sprites/TouchpadSprite.png

フォルダ画像



インスペクター画像



　画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください。このスイッチの意味は自分で調べてみましょう。

---

　画像を設定したら、大きさを調整します。この画像内にスコア表示が入りますので、もしも収まりが悪いようでしたら、後で大きさを調整しましょう。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)

　最後に画像の色を設定します。初期では白になっていますが、変更できます。
今回は黒にし、アルファの値を下げて半透明にしています。下記の画像は参考値としてご利用ください。


色の設定

---

　完成時の画像です。


imgBackground ゲームオブジェクト　インスペクター画像



imgBackground ゲームオブジェクト　Sceneビュー画像



imgBackground ゲームオブジェクト Gameビュー画像


　以上で設定は完了です。つづいて、この imgBackground ゲームオブジェクトに子オブジェクトを追加していきます。

---

　imgBackground ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Imageコンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を imgGemIcon に変更します。

　imgGemIcon ゲームオブジェクトは、画面上に宝石のアイコンを常に表示する役割を持ちます。


imgGemIcon ゲームオブジェクト　ヒエラルキー画像



imgGemIcon ゲームオブジェクト　インスペクター画像



imgGemIcon ゲームオブジェクト　Sceneビュー画像



imgGemIcon ゲームオブジェクト　Gameビュー画像



　親子関係を間違えないように作成してください。

---

　最初に画像を設定します。
imgGemIcon ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

　背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

　今回はこちらのパスにある画像を利用しています。

Assets/simple UI & icons/icons/icon_09.png

フォルダ画像



インスペクター画像

---

　なお、この画像の場合、TextureType の設定が Default になっているため、そのままでは利用できません。
ドラッグアンドドロップして SourceImage に画像をアサインしようとしてもキャンセルされます。

　画像を選択した状態でインスペクターの TextureType を Sprite(2D and UI) に変更し、右下にある Apply ボタンを押してください。
Apply すると、画像の設定が更新されて、Sprite ファイルとして登録されます。フォルダ内の表示も変わります。(画像の右側に矢印が出ます)


フォルダ画像



インスペクター画像



　この状態に設定してから SourceImage に画像をドラッグアンドドロップすればアサイン出来ます。

　画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください。

---

　続いて、RectTransform コンポーネントを確認します。
Sceneビュー内でゲームオブジェクトを操作する、あるいは RectTransform の Width と Height を調整してサイズを変更します。
また、Position の値を調整して、適宜な位置に設置してください。

　Gameビューで実際にどのように画面に映るか確認することも必要です。


　下記の画像は参考値です。

imgGemIcon ゲームオブジェクト　インスペクター画像



imgGemIcon ゲームオブジェクト　Sceneビュー画像



imgGemIcon ゲームオブジェクト　Gameビュー画像



　以上でこのゲームオブジェクトの設定は完了です。

---

　imgGemIcon ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Textコンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を txtScore に変更します。

　txtScore ゲームオブジェクトは、画面上にスコアの値を表示する役割を持ちます。
このゲームオブジェクトの Text コンポーネントの機能を利用して、画面上に獲得しているポイント数をスコアとして表示・更新していきます。


txtScore ゲームオブジェクト　ヒエラルキー画像

---

　まず最初に、txtScore ゲームオブジェクトを選択し、RectTransform コンポーネント内の設定を２つ行います。

　Width 850、Height 600 に設定してください。

　Scale を (0.3, 0.3, 0.3) に変更してください。
このサイズを調整することで、文字がにじむのを防ぐことが出来ます。なお位置については、文字の設定を決めてから調整します。

---

　次は表示する文字の設定をしますので、Textコンポーネント の Text プロパティ欄に 0 と入力してください。
ここにはゲーム中にスクリプトを利用して、動的にスコアの値が表示されます。数字は4〜5桁位まで入ることを想定しておきましょう。

　フォントのサイズは点数が目立つように少し大きめがいいでしょう。250 〜 300 位の範囲で設定してください。
フォントを大きくした際に画面から消えてしまうことがありますが、それはゲームオブジェクトのサイズが小さいためです。
その場合には Width と Height を調整してください。

　フォントは初期設定のままで構いませんが、任意のフォントを選択してください。
インポートしたフォントがある場合には、そちらを試してみてください。複数のフォントをインポートしておくと比較できます。
文字の位置は中央・左寄せに設定しています。

　また Image コンポーネントと同じように、こちらからもRaycastTarget のチェックも外してください。

---

　最後に Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。下記の画像も参考してください。
imgGemIcon ゲームオブジェクトと高さの位置を合わせるようにしましょう。


txtScore ゲームオブジェクト　インスペクター画像



txtScore ゲームオブジェクト　Sceneビュー画像



txtScore ゲームオブジェクト　Gameビュー画像(初期フォント)



txtScore ゲームオブジェクト　Gameビュー画像(フォントを変えた場合)



　Game ビューを比較するとわかるように、フォントの違いがゲーム画面に与える影響はとても大きいです。
フォントはいつでもインポート出来ますので、完成してからでも色々なフォントを試してみるとよい学習になります。

---

　以上の手順でスコア表示用のゲームオブジェクト群は完成です。
抜かしている手順がないか、見直しておきましょう。

　また今後は自分で UI を作成していく際には、このように順番に組み立てて作っていくように覚えておいてください。

---

　以上でこの手順は終了です。

　=>　次は　手順１５　ーゲーム画面のスコア表示を更新する機能の追加ー　です。