今回は、コインの残り枚数を画面に表示する方法を学びます。UIを使って「コインのアイコン画像」を表示し、コインを取得したらアイコンが1つずつ減っていくことを表現します。
*今回の作業は「Mian」シーンで行いますので、それ以外のシーンになっている場合には「Main」をダブルクリックしてシーンを切り替えておきましょう。
・まずは「Canvas」を設置します。「Hierarchy」→「Create」→「UI」→「Canvas」で新たにオブジェクトを1つ作成してください。
このCanvasの上に、「コインのアイコン画像」を設置していきます。
・「Canvas」を選択して右クリック→「UI」を選択→「Image」を選択してクリック
・名前を「CoinIcon」に変更する。
・次に、「コインのイメージ画像」を「Import New Asset…」を使ってUnityの中に取り込みましょう。
(ここがポイント!)
取り込んだ画像はそのままではUIでは使えません。UIで使う場合にはTexture Typeを「Sprite(2D and UI)」に変更すると覚えておきましょう。
・Texture Typeの変更が済んだら、CoinIconの「Source Image」にドラッグ&ドロップします。
これでコイン画像が1つ表示されました。
・コイン画像の大きさは「Width」と「Height」で自由に調整しましょう。
次はコイン画像を「複製」します。
・「CoinIcon」を選択して右クリック→「Duplicate」を選択してクリック。今回はとりあえず「3個」作りましょう。
・作成したコインの画像は右上に並べて配置します。
次に、3つのコイン画像を「まとめて管理」できるようにします。
・「Canvas」を選択して右クリック→「UI」を選択→「Panel」を選択してクリック
・作成した「Panel」の名前は「CoinPanel」に変更します。
・「CoinPanel」の「大きさ」と「位置」をコイン画像がちょうど3つ入るように調整しましょう。
・「CoinPanel」を選択した状態で「Image」のチェックを外しましょう。
するとCoinPanelは透明な状態になります。
ここまでできたら、「3つのコイン画像(= CoinIcon)」をドラッグして「CoinPanel」の中にいれましょう。
これで、CoinIconは「CoinPanelの子供」になり、まとめて管理ができるようになりました。
次にスクリプトを作成します。
・「C# Script」を1つ作成しましょう。名前は「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」を「3」にしてエンターを押す。
そうすると、「Element0」「Element1」「Element2」が出現します。
・「Element0」「Element1」「Element2」に「CoinIcon」「CoinIcon(1)」「CoinIcon(2)」を1ずつずつ入れていく。
・下記のようになれば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」を1つ作成して、名前を「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=位置の情報」しかありません。
・「Create Empty」を作成したら、名前を「GameController」に変更する。
・「GameControllerスクリプト」を「GameControllerオブジェクト」にドラッグ&ドロップする。
(ここがポイント!)
・「Coincount」の右空欄部分に「Ball」オブジェクトをドラッグ&ドロップする。
・「Coin Panel」の右空欄部分に「CoinPanel」オブジェクトをドラッグ&ドロップする。
ここまで来たらもう「再生ボタン」を押してみましょう。
コインを取得するごとにコインのアイコンが消えれば成功です。