前回のチュートリアル

はじめに

前回は、玉と収集アイテムがぶつかったら、収集アイテムが消えるようになりました
今回は、玉と収集アイテムがぶつかったらスコアが増えていき、
すべての収集アイテムを獲得したら画面に「You Win!」と表示されるようにしていきます

スコアの UI の配置

f:id:baba_s:20171208164345p:plain

Unity メニューの「GameObject>UI>Text」を選択します

f:id:baba_s:20171208171040p:plain

すると、ゲーム画面のどこかに黒い文字で「New Text」と表示されるようになりました

f:id:baba_s:20171208164630p:plain

オブジェクトの一覧を見てみると、3つのオブジェクトが追加されていることがわかります
これらのオブジェクトの役割は次のようになっています

オブジェクト	呼び方	役割
Canvas	キャンバス	UI のオブジェクトを管理する
Text	テキスト	文字を表示する
Event System	イベントシステム	ボタンが押されたかどうかなどの判定を行う

今回は、「Text」のオブジェクトを使用してスコアを表示します

f:id:baba_s:20171208165114p:plain

まず、オブジェクトの名前をわかりやすくします
「Text」オブジェクトを選択して F2 を押して
「Score Text」という名前に変更して Enter を押します

f:id:baba_s:20171208165254p:plain

次に、文字が黒くて見づらいので、文字を白色に変更します
「Score Text」オブジェクトを選択して「Color」の枠をクリックします

f:id:baba_s:20171208165428p:plain

「Color」ウィンドウが表示されたら、入力欄に上から順に
「255」「255」「255」「255」と入力して、「Color」ウィンドウを閉じます

f:id:baba_s:20171208165852p:plain

これで、文字が白色になって見やすくなりました

f:id:baba_s:20171208165721p:plain

次は、文字の表示位置を画面左上に設定します
「Score Text」オブジェクトを選択して、赤枠で囲まれた箇所をクリックします

f:id:baba_s:20171208170314p:plain

そして、このように表示されたら Shift + Alt を押しながら
赤枠で囲まれた箇所をクリックします

f:id:baba_s:20171208170412p:plain

すると、文字が画面左上に表示されるようになりました
しかし、画面端に寄りすぎているので、少し余白を加えます

f:id:baba_s:20171208170635p:plain

「Score Text」オブジェクトを選択して、
「Pos X」（横位置）に「10」、「Pos Y」（縦位置）に「-10」と入力します

f:id:baba_s:20171208170733p:plain

これで、文字と画面端に余白が入って見やすくなりました
ここまででスコアの UI の配置が完了です

リザルトの UI の配置

次は、リザルトの UI を配置していきます

f:id:baba_s:20171208171408p:plain

「Canvas」を右クリックして「UI>Text」を選択します

f:id:baba_s:20171208171625p:plain

作成した「Text」オブジェクトを選択して F2 を押して
「Win Text」という名前に変更して Enter を押します

f:id:baba_s:20171208171726p:plain

文字が黒くて見づらいので、文字を白色に変更します
「Win Text」オブジェクトを選択して「Color」の枠をクリックします

f:id:baba_s:20171208165428p:plain

「Color」ウィンドウが表示されたら、入力欄に上から順に
「255」「255」「255」「255」と入力して、「Color」ウィンドウを閉じます

f:id:baba_s:20171208171847p:plain

次に、リザルトの文字は大きく目立たせたいので
「Win Text」オブジェクトを選択して
「Font Size」（文字サイズ）に「24」と入力します

f:id:baba_s:20171208172120p:plain

そして、リザルトの文字は目立つ位置に配置したいので
「Win Text」オブジェクトを選択して
「Alignment」（位置合わせ）を、上記のスクリーンショットのように設定して、
「Pos Y」（縦位置）に「100」と入力します

f:id:baba_s:20171208172339p:plain

これで、リザルトの UI の配置が完了です

もしもお使いの環境で文字が見づらい場合は
「Pos Y」や「Font Size」の数値を自由に調整してみてください

UI の表示の更新

ここまでで、スコアとリザルトの UI の配置が完了したので
最後に、玉と収集アイテムがぶつかったらスコアが増えていき、
すべての収集アイテムを獲得したら画面に「You Win!」と表示されるように
「PlayerController」スクリプトにプログラムを実装していきます

f:id:baba_s:20171208173123p:plain

「PlayerController」をダブルクリックします

すると、お使いの環境に合わせて Visual Studio や MonoDevelop などの、
プログラムを書くためのエディタが起動するので、
下記のプログラムをコピーして貼り付けて
Ctrl + S を押すなどしてスクリプトを保存します

using UnityEngine;
using UnityEngine.UI;

public class PlayerController : MonoBehaviour
{
    public float speed; // 動く速さ
    public Text scoreText; // スコアの UI
    public Text winText; // リザルトの UI

    private Rigidbody rb; // Rididbody
    private int score; // スコア

    void Start()
    {
        // Rigidbody を取得
        rb = GetComponent<Rigidbody>();

        // UI を初期化
        score = 0;
        SetCountText();
        winText.text = "";
    }

    void Update()
    {
        // カーソルキーの入力を取得
        var moveHorizontal = Input.GetAxis("Horizontal");
        var moveVertical = Input.GetAxis("Vertical");

        // カーソルキーの入力に合わせて移動方向を設定
        var movement = new Vector3(moveHorizontal, 0, moveVertical);

        // Ridigbody に力を与えて玉を動かす
        rb.AddForce(movement * speed);
    }

    // 玉が他のオブジェクトにぶつかった時に呼び出される
    void OnTriggerEnter(Collider other)
    {
        // ぶつかったオブジェクトが収集アイテムだった場合
        if (other.gameObject.CompareTag("Pick Up"))
        {
            // その収集アイテムを非表示にします
            other.gameObject.SetActive(false);

            // スコアを加算します
            score = score + 1;

            // UI の表示を更新します
            SetCountText ();
        }
    }

    // UI の表示を更新する
    void SetCountText()
    {
        // スコアの表示を更新
        scoreText.text = "Count: " + score.ToString();

        // すべての収集アイテムを獲得した場合
        if (score >= 12)
        {
            // リザルトの表示を更新
            winText.text = "You Win!";
        }
    }
}