[１９]コインの残り枚数を表示する方法

今回は、コインの残り枚数を画面に表示する方法を学びます。UIを使って「コインのアイコン画像」を表示し、コインを取得したらアイコンが１つずつ減っていくことを表現します。

＊今回の作業は「Mian」シーンで行いますので、それ以外のシーンになっている場合には「Main」をダブルクリックしてシーンを切り替えておきましょう。

・まずは「Canvas」を設置します。「Hierarchy」→「Create」→「UI」→「Canvas」で新たにオブジェクトを１つ作成してください。

このCanvasの上に、「コインのアイコン画像」を設置していきます。

・「Canvas」を選択して右クリック→「UI」を選択→「Image」を選択してクリック

・名前を「CoinIcon」に変更する。

・次に、「コインのイメージ画像」を「Import New Asset…」を使ってUnityの中に取り込みましょう。

（ここがポイント！）

取り込んだ画像はそのままではUIでは使えません。UIで使う場合にはTexture Typeを「Sprite(2D and UI)」に変更すると覚えておきましょう。

・Texture Typeの変更が済んだら、CoinIconの「Source Image」にドラッグ＆ドロップします。

これでコイン画像が１つ表示されました。

・コイン画像の大きさは「Width」と「Height」で自由に調整しましょう。

次はコイン画像を「複製」します。

・「CoinIcon」を選択して右クリック→「Duplicate」を選択してクリック。今回はとりあえず「３個」作りましょう。

・作成したコインの画像は右上に並べて配置します。

次に、３つのコイン画像を「まとめて管理」できるようにします。

・「Canvas」を選択して右クリック→「UI」を選択→「Panel」を選択してクリック

・作成した「Panel」の名前は「CoinPanel」に変更します。

・「CoinPanel」の「大きさ」と「位置」をコイン画像がちょうど３つ入るように調整しましょう。

・「CoinPanel」を選択した状態で「Image」のチェックを外しましょう。

するとCoinPanelは透明な状態になります。

ここまでできたら、「３つのコイン画像（= CoinIcon）」をドラッグして「CoinPanel」の中にいれましょう。

これで、CoinIconは「CoinPanelの子供」になり、まとめて管理ができるようになりました。

次にスクリプトを作成します。

・「C# Script」を１つ作成しましょう。名前は「CoinPanel」に変更します。

スクリプトが作成できたらダブルクリック。

・以下のコードを記載しましょう。

using UnityEngine;
using System.Collections;

public class CoinPanel : MonoBehaviour {

	// ①★配列の箱を作る（配列は複数のデータを入れることができる箱）
	public GameObject[] icons;

	// ②★このメソッド（命令ブロック）を記載する
	// コインの残り枚数に応じてコインの画像を出し分ける。
	public void UpdateCoin(int coin){

		for(int i = 0; i < icons.Length; i++){
			if(coin <= i){
				icons[i].SetActive(true);
			} else {
				icons[i].SetActive(false);
			}
		}
	}
}

・作成したスクリプトを「CoinPanel」オブジェクトにドラッグ＆ドロップする。

・Inspectorで「Size」を「３」にしてエンターを押す。

そうすると、「Element０」「Element１」「Element２」が出現します。

・「Element０」「Element１」「Element２」に「CoinIcon」「CoinIcon(1)」「CoinIcon(2)」を１ずつずつ入れていく。

・下記のようになればOKです。

★ここで以前作成した「Ball」スクリプトをダブルクリックして開きましょう。

・下記のコードを追加してください。

using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;

public class Ball : MonoBehaviour {

	public float move_speed;
	private Rigidbody rb;
	public AudioClip coinGet;
	public float jump_speed;
	private bool isJumping = false;
	private int count;


	// Use this for initialization
	void Start () {

		rb = GetComponent<Rigidbody>();

		count = 0;
	}

	// ★★このメソッド（命令ブロック）を記載する
	// コイン取得用の関数
	public int Coin(){
		return count;
	}
	// ここまで

	
	// Update is called once per frame
	void Update () {

		float moveHorizontal = Input.GetAxis("Horizontal");
		float moveVertical = Input.GetAxis("Vertical");

		Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);
		rb.AddForce(movement * move_speed);

		if(Input.GetButtonDown("Jump") && isJumping == false){
			rb.velocity = Vector3.up * jump_speed;
			isJumping = true;
		}
	}
		
	void OnCollisionEnter(Collision col){
		if(col.gameObject.CompareTag("Floor")){
			isJumping = false;
		}
	}


	void OnTriggerEnter(Collider other){

		if(other.CompareTag("Coin")){
			Destroy(other.gameObject);

			AudioSource.PlayClipAtPoint(coinGet, transform.position);

			count = count + 1;

			if(count == 2){
				Invoke("ReturnToFile", 0.5f);
			}
		}
	}
		
	void ReturnToFile(){
		SceneManager.LoadScene("GameClear");
	}
}

次にゲーム全体を管理するスクリプトを作成します。

・「C# Script」を１つ作成して、名前を「GameController」に変更してください。

スクリプトが作成できたらダブルクリック。

・以下のコードを記載しましょう。

using UnityEngine;
using System.Collections;

public class GameController : MonoBehaviour {

	// ★変数を定義する
	public Ball coinCount;
	public CoinPanel coinPanel;

	
	// Update is called once per frame
	void Update () {

		// ★コインパネルを更新する。
		coinPanel.UpdateCoin(coinCount.Coin());
	
	}
}

スクリプト（台本）が作成できたら、今度はこのスクリプトをドラッグ＆ドロップするオブジェクトを作成します。

・「Hierarchy」→「Create」→「Create Empty」をクリック

これは文字通り、「Empty=空っぽ」のオブジェクトで、Inspector上には「Transform=位置の情報」しかありません。