![](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/think_office-worker_14911.png?resize=700%2C780&ssl=1)
ゲームのスコア表示ってどうやるのだろう?
![](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/Smile-man.png?resize=768%2C768&ssl=1)
UI(ユーザーインターフェース)ですね!
【解説画面に沿ってやりたい方】
以下の2記事の内容をベースに解説しますので、事前に実施をお願いします。(必須)
[所要時間:約20分]
ここまでで、事前準備は完了です。早速作成していきましょう。
▼キーボードからオブジェクトを操作▼
▼当たり判定▼
解説画面と全く同じ環境にしたい場合は、追加で以下の4記事を実施お願いします。(任意) [所要時間:約30分]▼オブジェクトに色を付ける▼
▼オブジェクトが落ちないように壁を作る▼
▼エディタでパラメータ調整▼
▼回転するアイテム配置▼
Consoleウインドウに表示
Gameビューに表示する前に、Consoleウインドウで練習をしてみましょう。 [Player]がGETしたアイテム数をConsoleウインドウに表示します。Scriptの追加
[Player]視点での数のため、[Player]に関連付けられたScriptにコードを追加します。ProjectウインドウでScript[PlayerController]を開きます。
![1-project-playcontroller](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/57163a747249c5b98d7f3606604059fc.png?resize=472%2C488&ssl=1)
- GETしたアイテムをカウントするitemcountというint型(整数)の変数を定義します。
- ゲームスタート時はカウンタをリセットします。
- ゲーム中は常時カウントを更新します。Debug.Log(変数)がコンソールウインドウに変数を表示するという意味です。
- アイテムをGETする度にGETした個数を1つずつ加算します。以下のようになります。
Consoleウインドウで確認
[▶︎]ゲームプレイを押して、実行結果を確認します。
![4-gameplay1](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/4-gameplay1.jpg?resize=800%2C429&ssl=1)
![5-gameplay1-C](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/5-gameplay1-C.png?resize=795%2C117&ssl=1)
![6-gameplay2](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/6-gameplay2.jpg?resize=800%2C432&ssl=1)
![7-gameplay2-C](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/7-gameplay2-C.png?resize=797%2C184&ssl=1)
Gameビューに表示
今回はGameビュー上にTextを表示させる方法を解説します。ここでは、Canvasを使用します。Hierarchyウインドウ下の[+]をクリックして、[UI]>[Canvas]を選びます。
![8-Canvas-choice](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/8-Canvas-choice.png?resize=664%2C910&ssl=1)
![9-Canvas-EventSystem](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/9-Canvas-EventSystem.png?resize=398%2C544&ssl=1)
EventSystem:UIのイベントを管理。UIのScript実行に使用される。
Canvasの確認
Canvasが配置されている場所を確認しましょう。 Sceneビューの[2D]をクリックして、2Dにしてマウスホイールを回転させて画面を引きます。![10-Canvas-Sceneview](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/10-Canvas-Sceneview.png?resize=800%2C448&ssl=1)
- 2D/3Dで設定方法は同じ
- カメラやライトの影響を受けない
- 画面正面からの視点で表示
- Canvasの大きさはGameビューの大きさに比例
UIオブジェクトの設置
作成したCanvas上にTextを配置します。Hierarchyウインドウの[Canvas]を右クリックして、[UI]>[Text]をクリックします。
![11-UI-text-add](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/11-UI-text-add-1.png?resize=800%2C676&ssl=1)
![12-NewText](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/12-NewText.jpg?resize=800%2C334&ssl=1)
Hierarchyウインドウの[Text]を選択した状態で、Inspectorウインドウで、オブジェクト名の変更、Textの変更、Font Sizeの変更を実施します。
![13-name-change](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/13-name-change.png?resize=800%2C612&ssl=1)
Textの配置の調整
表示したTextの配置を調整していきます。 HierarchyウインドウのText[ItemCountText]を選択した状態で、Inspectorウインドウの[Rect Transform]で調整します。
方法は2通りあります。
今回は、後者を解説していきます。
- 座標を直接変更
- 決められた位置に配置
決められた位置に配置する場合は、topとcenterで囲まれた図形をクリックします。
[Shiftキー]+[Altキー]を押したまま、配置したい場所をクリックします。
![14-Shift+alt](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/14-Shiftalt.png?resize=554%2C960&ssl=1)
Scriptの追加
Projectウインドウで[PlayerController]を開きます。
![16-Script1](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/16-Script1-1.png?resize=800%2C893&ssl=1)
![17-Script2](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/17-Script2.png?resize=800%2C704&ssl=1)
TextとScriptの関連付け
Scriptの内容をTextと関連付けて、Gameビューに表示するように設定します。Hierarchyウインドウの[Player]を選択して、Hierarchyウインドウの[Item Count Text]を、Inspectorウインドウの[PlayerController]Scriptの[Item Count Text]にドラッグして離します。
![15-text-Player-relate](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/15-text-Player-relate.jpg?resize=800%2C547&ssl=1)
Gameビューで確認
[▶︎]ゲームプレイを押して、実行結果を確認します。
![20-game](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/20-game-1.jpg?resize=800%2C358&ssl=1)
![18-method1](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/18-method1-1.png?resize=800%2C934&ssl=1)
![19-method2](https://i0.wp.com/takugymnastics.com/wp-content/uploads/2021/10/19-method2.png?resize=800%2C922&ssl=1)