Skip to content

5.ゲームのuiを追加する

pollenjp edited this page Oct 5, 2018 · 5 revisions

5.ゲームのUIを追加する

ゲームのUIを追加します。 UIといっても簡単なもので「残りのItem数を表示する」だけの機能です。この機能も分解してみると、以下の様な機能になります。

  1. 残りのItem数を数える
  2. Item数をUIで表示する

Scoreを表示するUI

「残りのアイテム数」を表示するUIの準備

まずはUIを用意します。今回は余り凝ったことはせず、単純に画面左下に残りのアイテム数を表示するUIを作成します。

Canvasの設定

まずはUIを表示するCanvasを用意します。

  1. HierarchyビューのCreateボタンをクリックします。
  2. UI > Canvasを選択します。

Canvasの追加

Canvasが生成されますので、想定サイズを設定します。

  1. HierarchyビューでCanvasオブジェクトを選択します。
  2. CanvasScalerの「UI Scale Mode」を「Scale With Screen Size」に設定します。

CanvasScalerの設定

テキストの設定

次にテキストを表示します。

  1. HierarchyビューのCreateボタンをクリックします。
  2. UI -> Text をクリックします。
  3. 作成したCanvas>TextオブジェクトをInspectorビューでScoreLabelと改名します。

Textの追加

これで文字が表示されるようになりました。

これを中央へ移動し、フォントの大きさを調整します。

  1. HierarchyでCanvas>ScoreLabelオブジェクトを選択します。
  2. RectTransformコンポーネントの値を以下のように設定します。 (PosX : -230, PosY : -230, Width : 300, Height : 100)

ScoreLabelのTextコンポーネント設定

  1. HierarchyでCanvas>ScoreLabelオブジェクトを選択します。
  2. TextコンポーネントのFont Sizeを60に設定します。
  3. TextコンポーネントのTextを「0」に設定します。

ScoreLabelのRectTransform ScoreUI(SceneView)

GameControllerの作成

次に、残りのItem数を先ほど作成したScoreLabelに通知する仕組みを用意します。

この機能を実装する方法は無数にありますが、今回は一番簡単なGameControllerに管理させる方法を採用します。またItem数のようなゲーム全体の進行に関する機能はGameControllerが持つのが望ましいです。 このGameControllerがItemの残数を数え、変更があれば通知する仕組みを持ちます。

ではGameControllerを作成していきましょう。

  1. HierarchyビューのCreateボタンをクリックします。
  2. 「Create Empty」を選択します。
  3. 作成したオブジェクト名を「GameController」へ変更します。
  4. Tagを「GameController」へ変更します。

GameControllerの作成

Itemをカウントする前準備

タグの設定

今回はItemオブジェクトに「Item」タグを設定し、該当のタグを持つオブジェクトの個数を計測する方法を使用します。

  1. メニューバー > Edit > ProjectSetting > Tags And Layers を選択します。
  2. Inspectorビューを確認し、Tagsメニューを開きます。
  3. +ボタンを押し、タグを表示します。
  4. 「New Tag」を「Item」に変更します。

Itemタグの設定

ItemオブジェクトにItemタグを設定する

次にItemタグを設定します。 先ほどItemタグを登録したことで一覧にItemタグが追加されましたので、Itemオブジェクトにタグを設定します。

  1. HierarchyビューでItemオブジェクトを選択します。
  2. InspectorビューでTagをItemに変更します。
  3. Applyボタンを押しPrefabを更新します。

Itemタグを設定

Itemをカウントする機能を追加

GameControllerにItemをカウントする機能を追加します。

まずはGameControllerコンポーネントを作成します。

  1. HierarchyビューでGameControllerを選択します。
  2. InspectorビューでAdd Componentをクリックします。
  3. NewScript を選択し、GameControllerを生成します。

GameControllerに以下のようにコードを記述します。

using UnityEngine;
using System.Collections;

public class GameController : MonoBehaviour
{
	public void Update ()
	{
		int count = GameObject.FindGameObjectsWithTag ("Item").Length;
	}
}

残りのアイテム数を表示する

残りのアイテム数を先ほど作成したUIに表示するように変更します。

まずはGameControllerからTextコンポーネントへアクセスする方法を考えます。 今回もエディタでTextコンポーネントへの参照を設定する方法を利用します。

まずは参照に使用するコードを作成します。

using UnityEngine;
using System.Collections;

public class GameController : MonoBehaviour
{
	public UnityEngine.UI.Text scoreLabel;
	public void Update ()
	{
		int count = GameObject.FindGameObjectsWithTag ("Item").Length;
	}
}

次に取得したItem数をtextに代入します。

using UnityEngine;
using System.Collections;

public class GameController : MonoBehaviour
{
	public UnityEngine.UI.Text scoreLabel;
	public void Update ()
	{
		int count = GameObject.FindGameObjectsWithTag ("Item").Length;
		scoreLabel.text = count.ToString ();
	}
}

GameControllerとScoreLabelのヒモ付

最後にUnityエディタへ戻り、GameControllerとScoreLabelを紐付けます。

  1. HierarchyビューでGameControllerオブジェクトを選択します。
  2. Canvas>ScoreLabelオブジェクトをScoreLabelへドラッグ&ドロップします。

ScoreLabelとGameControllerのヒモ付

ゲームを再生してみてください。 ゲーム再生時に残りのアイテム数が左下に表示され、アイテムを取得する度に残り個数が減ることが分かります。

CountScore