３Ｄダイビングゲーム　手順１２

　ここからはUI（ユーザーインターフェース）について学習しながら実装を行います。
ゲーム画面に獲得した得点をスコアとして表示する制御処理を実装します。

＜完成画像＞

＜完成動画＞
https://gyazo.com/0ca1e536894ec7a6269c88402098ed41

　以下の内容で順番に実装を進めていきます。

手順１２　－スコアの表示制御－

１９．Canvas内にUI部品を作成する①(スコア表示)
２０．画面に現在の得点をスコアとして更新表示する

　新しい学習内容は、以下の通りです。

　・アンカー設定

１９．Canvas内にUI部品を作成する①(スコア表示)

１．設計

　ゲーム画面のUI(ユーザーインターフェース)については別の記事に詳しくまとめてありますので、そちらをご確認ください。

　=>　画面UI

　この手順からは順番に、ゲーム内に実装されている処理をゲーム画面上に表示・更新する処理を実装していきます。

　前回の手順で PlayerController スクリプトには score 変数が追加されました。
こちらの情報をゲーム画面に表示して、花輪をくぐるたびに得点がアップしていく表示を実装します。

　必要な情報としては score 変数ですが、こちらをゲーム画面に反映するためのゲームオブジェクトも必要になります。

　この時に利用するのが、UIです。Canvas というコンポーネントを持つゲームオブジェクトの中に(子オブジェクトとして)
ゲームオブジェクトを設置することで、ゲーム画面の一定の位置に常に情報を表示する機能を実装出来ます。

　今回はゲーム画面の左上に常時スコアの数字の表示を行い、花輪をくぐって得点を獲得したときに、スコアの数字を更新するようにします。

　最初に Canvas ゲームオブジェクトの作成と、スコアの表示を行うためのゲームオブジェクトの作成を行います。
それから、PlayerController スクリプトを修正して、score 変数の情報を、スコア表示用のゲームオブジェクトに対して送り出す制御を実装します。

ヒエラルキー画像　完成図

Gameビュー画像　完成図

２．Canvas ゲームオブジェクトを作成する

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
ヒエラルキーに Canvas ゲームオブジェクトが作成されます。
一緒に EventSystem ゲームオブジェクトも追加されます。これは１セットで扱いますのでそのままで問題ありません。

ヒエラルキー画像

　Canvas ゲームオブジェクトをダブルクリックしてください。
いままで作業を行っていた Scene ビューの上の方に Canvas 用の場所が追加されています。
これはゲーム画面に Canvas が表示されてしまうと、双方の編集作業が大変になるための措置です。

　Canvas では設定した情報は、ゲーム画面に一緒に表示されるようになります。
そのため、作業のスペースを分けているだけであって、同じゲームの画面として表示されますので問題ありません。

＜検証動画　作業スペースとして分けているだけ＞
https://gyazo.com/628ac8732a55aa22a8be4878c3f0017f

　Canvas ゲームオブジェクトのインスペクターを確認し、Canvas Scaler の UIScaleMode の設定を Scale With Screen Size に変更します。
変更すると Reference Resolusion という設定が追加されますので、こちらに、Game ビューで使用している解像度と同じ大きさを指定します。
今回の教材では 2880 * 1440 の解像度で設定していますので、こちらも同じ数字に指定します。これは、ご自分の設定した解像度と同じにしてください。

　また ScreenMathcMode を Expand に変更しておきます。
この設定にしておくことで Canvas の設定を水平・垂直に拡大してくれますので、スマホの解像度とCanvasのサイズに合わせてくれます。

Canvas ゲームオブジェクト　インスペクター画像

Gameビューの解像度

Sceneビュー画像

　以上でこのゲームオブジェクトの設定は完了です。

参考サイト

Metal Brage 様
画面解像度とスケーリング
http://www.metalbrage.com/UnityTutorials/uGUI/Scal...

３．Canvas ゲームオブジェクトの子オブジェクトとして Scores ゲームオブジェクトを作成する

　Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を Scores に変更します。
Scores ゲームオブジェクトは、スコア表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。

Scores ゲームオブジェクト　ヒエラルキー画像

　Scores ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。

Scores ゲームオブジェクト　インスペクター画像

Scores ゲームオブジェクト　Sceneビュー画像

　Scores ゲームオブジェクトの位置とアンカーを変更します。
RectTransform コンポーネント内にある Anchor（アンカー）をクリックして、Alt キーを押しながら、Top Left の位置をクリックしてください。
Scores ゲームオブジェクトが画面の左上の位置に移動するとともに、アンカーの位置も画面左上に設定されます。

＜手順動画　アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)＞
https://gyazo.com/ff88a572f71577445906e09ecbbd7511

Scores ゲームオブジェクト　インスペクター画像

Sceneビュー画像

　以上で設定は完了です。

４．＜アンカー設定＞

　Canvas用のゲームオブジェクトの位置情報は RectTransform コンポーネントによって管理されています。
RectTransform コンポーネントを持つゲームオブジェクトは、ワールド座標による座標の計算ではなく、
親となるゲームオブジェクトからみてどの位置にいるかというローカル座標(相対座標)による座標の計算を行っています。

　この RectTransform コンポーネントには通常の Transform コンポーネントにはない情報がいくつかあります。
その１つがアンカーです。

アンカーのアイコン

　

　アンカーとは、親のゲームオブジェクトからみて、このゲームオブジェクトの基準地点をどの位置に設定するか、という情報です。
ローカル座標によって座標を計算していますので、親のゲームオブジェクトからみて、どこから計算を始めるかというのは重要な設定情報です。
基本的には Center Middle という設定になっており、親のゲームオブジェクトからみて中心の位置をアンカーに設定しています。

アンカーの設定

　

　今回、Scores ゲームオブジェクトに設定したアンカーは、Top Left の位置です。(これはプリセット情報なので、もっと詳細に自分でも設定できます。)
親オブジェクトである Canvas ゲームオブジェクトからみて、画面の中心を基準値としてではなく、画面の左上を基準として座標の計算を行うようにしています。
　
　理由としては、ゲーム画面の比率が変化した際に、RectTransform コンポーネントを持つゲームオブジェクトは、アンカーの位置を基準に配置されるため
画面の比率が変化しても、その状態に対応して、自分の位置を設定してくれるようになるためです。

　例えば今回のように左上にアンカーを設定しておくと、どのゲーム画面でゲームを実行しても、常に画面の左上からみて座標の計算をして、ゲームオブジェクトを配置してくれます。
そうすることによって、ゲーム画面を変えたらスコア表示が見えなくなってしまった、という事態を回避出来るようにしています。

参考サイト

Unity公式ユーザーマニュアル
基本的なレイアウト
https://docs.unity3d.com/ja/2018.4/Manual/UIBasicL...

徒然エンジニアブログ様
【Unity】UIの基本(Canvas,描画順,アンカー,ピボット)を徹底解説してみる
https://turedureengineer.hatenablog.com/entry/2019...

５．Scores ゲームオブジェクトの子オブジェクトとして、imgBackground ゲームオブジェクトを作成する

　Scores ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Imgae コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgBackground に変更します。

imgBackground ゲームオブジェクト　ヒエラルキー画像

　imgBackground ゲームオブジェクトは、スコアの数字表示の背景画像表示の役割を持ちます。

imgBackground ゲームオブジェクトインスペクター画像

imgBackground ゲームオブジェクト Sceneビュー画像

　最初に画像を設定します。
imgBackground ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

　背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

　今回はこちらのパスにある画像を利用しています。

Assets/JKT_Art/UI/Arrow/box_2.png

フォルダ画像

　画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください。このスイッチの意味は自分で調べてみましょう。

　画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)

imgBackground ゲームオブジェクト　インスペクター画像

imgBackground ゲームオブジェクト　Sceneビュー画像

　以上で設定は完了です。つづいて、この imgBackground ゲームオブジェクトに子オブジェクトを２つ追加していきます。

６．imgBackground ゲームオブジェクトの子オブジェクトとして、lblScore ゲームオブジェクトを作成する

　imgBackground ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Textコンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を lblScore に変更します。

　lblScore ゲームオブジェクトは、画面上に pts という文字列を常に表示する、ラベルの役割を持ちます。
このゲームオブジェクトではスコアの更新は行いません。

lblScore ゲームオブジェクト　ヒエラルキー画像

　lblScore ゲームオブジェクトを選択し、Textコンポーネントの Text プロパティ欄に、"pts" と入力してください。
ラベル役のゲームオブジェクトですので、この文字列を常に画面に表示します。フォントの種類やサイズは適宜に調整してください。
位置は中央・中央寄せに設定しています。
　また、Raycast Target のチェックを外してオフの状態にしておいてください。

lblScore ゲームオブジェクト　インスペクター画像①

　続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。

lblScore ゲームオブジェクト　Sceneビュー画像

lblScore ゲームオブジェクト　Gameビュー画像

lblScore ゲームオブジェクト　インスペクター画像②

　以上でこのゲームオブジェクトの設定は完了です。

７．imgBackground ゲームオブジェクトの子オブジェクトとして、txtScore ゲームオブジェクトを作成する

　imgBackground ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Textコンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を txtScore に変更します。

　txtScore ゲームオブジェクトは、画面上にスコアの値を表示する役割を持ちます。
このゲームオブジェクトの Text コンポーネントの機能を利用して、画面上に獲得しているポイント数をスコアとして表示・更新していきます。

txtScore ゲームオブジェクト　ヒエラルキー画像

　txtScore ゲームオブジェクトを選択し、Textコンポーネントの Text プロパティ欄に 0 と入力してください。
ここにはゲーム中にスクリプトを利用して、動的にスコアの値が表示されます。

　フォントのサイズは点数が目立つように、lblScore ゲームオブジェクトの Text コンポーネントより少し大きめがいいでしょう。
フォントも同様に、lblScore と同じフォントを選択してください。文字の位置は中央・右寄せに設定しています。
こちらもRaycastTarget のチェックも外してください。

txtScore ゲームオブジェクト　インスペクター画像①

　続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。下記の画像も参考してください。
lblScore ゲームオブジェクトと高さの位置を合わせるようにしましょう。

txtScore ゲームオブジェクト　Sceneビュー画像①

txtScore ゲームオブジェクト　Sceneビュー画像②

txtScore ゲームオブジェクト　Gameビュー画像

txtScore ゲームオブジェクト　インスペクター画像②

　以上の手順でスコア表示用のゲームオブジェクト群は完成です。

ヒエラルキー画像

Gameビュー　完成画像

２０．画面に現在の得点をスコアとして更新表示する

１．設計

　Canvas ゲームオブジェクト内にスコア表示用のゲームオブジェクトを設置しましたので、次は、このスコアの表示を更新していく処理を実装していきます。

　スコアの点数表示は txtScore ゲームオブジェクトにアタッチされているText コンポーネントによって制御されています。
この Text コンポーネントに対しての紐づけを行い、命令を出すことでスコアの表示制御を行います。

　得点を獲得する処理は PlayerController スクリプトに実装してありますので、この部分にさらに処理を追加して、
花輪を通過して得点を獲得したら、txtScore ゲームオブジェクトの持つ Text コンポーネントの Text プロパティに命令を出して値を書き換えます。
それがゲーム画面に表示されるようになるため、ゲーム上は、花輪を通過するたびにスコアを更新していくように見えます。

＜スコア表示までの処理の流れ＞

１．PlayerController スクリプトを修正し、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントを変数に代入して、操作できるようにしておく
２．同じくPlayerController スクリプトを修正し、OnTriggerEnter メソッドの処理の中に、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントのプロパティを更新する命令を追加する
３．花輪を通過して得点を獲得したら、OnTriggerEnter メソッドの処理によってスコアが現在の score の値に更新される

　この手順でロジックを実装します。処理は順序だてて、順番に１つずつ追加していくことを考えましょう。

２．PlayerController スクリプトを修正する

　宣言フィールドに、score 変数の値を表示させるためのコンポーネントの変数を追加します。
こちらは Text コンポーネントになりますので、宣言も Text 型になります。
Canvas 内に表示させるコンポーネントをスクリプトで扱う場合、using UnityEngine.UI の追加が必要になります。

　OnTriggerEnter メソッド内に、得点の加算処理のあとに、score 変数を画面に表示する処理を追加します。
得点の加算前に入れてしまうと、加算前の値が表示されてしまいますので、プログラムを記述する際には、処理の順番に気を付けてください。

　txtScore 変数は Text 型を扱うことができますので、Text コンポーネントの持っている Text プロパティ(文字列を入力する場所)に対しても命令を出すことが出来ます。
この機能を利用して、現在の得点である score 変数の値を表示するように制御をします。

PlayerController.cs

　<=　クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;    <=  追加します

public class PlayerController : MonoBehaviour
{
    [Header("移動速度")]
    public float moveSpeed;

    [Header("落下速度")]
    public float fallSpeed;

    [Header("着水判定用。trueなら着水済")]
    public bool inWater;

    private Rigidbody rb;

    private float x;
    private float z;

    private Vector3 straightRotation = new Vector3(180, 0, 0);     // 頭を下(水面方向)に向ける際の回転角度の値

    private int score;      // 花輪を通過した際の得点の合計値管理用


    [SerializeField, Header("水しぶきのエフェクト")]
    private GameObject waterEffectPrefab = null;

    [SerializeField, Header("水しぶきのSE")]
    private AudioClip splashSE = null;


////* ここから追加 *////


    [SerializeField]
    private Text txtScore;


////* ここまで *////


    void Start() {
        rb = GetComponent<Rigidbody>();

        // 初期の姿勢を設定(頭を水面方向に向ける)
        transform.eulerAngles = straightRotation;。
    }

    void FixedUpdate() {

        // キー入力の受付
        x = Input.GetAxis("Horizontal");
        z = Input.GetAxis("Vertical");

        // 斜め移動の距離が増えないように正規化処理を行い、単位ベクトルとする(方向の情報は持ちつつ、距離による速度差をなくして一定値にする)
        Vector3 direction = new Vector3(x, 0, z).normalized;

        // velocity(速度)に新しい値を代入して移動
        rb.velocity = new Vector3(direction.x * moveSpeed, -fallSpeed, direction.z * moveSpeed);
    }

　　// IsTriggerがオンのコライダーを持つゲームオブジェクトを通過した場合に呼び出されるメソッド
    private void OnTriggerEnter(Collider col) {

        // 通過したゲームオブジェクトのTagが Water であり、かつ、isWater が false(未着水)であるなら
        if (col.gameObject.tag == "Water" && inWater == false) {

            // 着水状態に変更する
            inWater = true;

            // 水しぶきのエフェクトを生成
            GameObject effect = Instantiate(waterEffectPrefab, transform.position, Quaternion.identity);
            effect.transform.position = new Vector3(effect.transform.position.x, effect.transform.position.y, effect.transform.position.z - 0.5f);

            // エフェクトを２秒後に破壊
            Destroy(effect, 2.0f);

　　　　　　// 水しぶきのSEを再生
　　　　　　AudioSource.PlayClipAtPoint(splashSE, transform.position);

　　　　　　// コルーチンメソッドである OutOfWater メソッドを呼び出す
            StartCoroutine(OutOfWater());        
        }

　　　　// 侵入したゲームオブジェクトの Tag が FlowerCircle なら
        if (col.gameObject.tag == "FlowerCircle") {





　　　　　　//Debug.Log("花輪ゲット");        //  <=  確認が済みましたのでコメントアウトするか削除してください

            // 侵入した FlowerCircle Tag を持つゲームオブジェクト(Collider)の親オブジェクト(FlowerCircle)にアタッチされている FlowerCircle スクリプトを取得して、point 変数を参照し、得点を加算する
            score += col.transform.parent.GetComponent<FlowerCircle>().point;


////* ここから追加 *////


            //Debug.Log("現在の得点 : " + score);　　　//　<=　確認が済みましたので、コメントアウトするか削除してください

            // 画面に表示されている得点表示を更新
　　　　　　txtScore.text = score.ToString();


////* ここまで *////

        }
    }

    /// <summary>
    /// 水面に顔を出す
    /// </summary>
    /// <returns></returns>
    private IEnumerator OutOfWater()
    {
        // １秒待つ
        yield return new WaitForSeconds(1.0f);   //  <= yield による処理。yield return new WaitForSecondsメソッドは、引数で指定した秒数だけ次の処理へ移らずに処理を一時停止する処理 

        // Rigidbody コンポーネントの IsKinematic にスイッチを入れてキャラの操作を停止する
        rb.isKinematic = true;

        // キャラの姿勢（回転）を変更する
        transform.eulerAngles = new Vector3(-30, 180, 0);

        // DOTweenを利用して、１秒かけて水中から水面へとキャラを移動させる
        transform.DOMoveY(4.7f, 1.0f);
    }
}

　

　スクリプトの修正が終了したら、インスペクターを確認して、新しく宣言した txtScore 変数が追加されているか確認しましょう。

Penguin ゲームオブジェクト　インスペクター画像

３．Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報にアサインを行う

　スクリプトの修正が完了しましたら、Penguin ゲームオブジェクトのインスペクターを確認してください。
PlayerController スクリプトに新しく宣言した txtScore 変数が表示されています。

　ここに、まずは手順を見ずに自分で考えて、アサインするゲームオブジェクトを特定してアサインをしてみてください。

＜手順動画　アサイン＞
https://gyazo.com/c7599ed9dfee7a3c6fb1e80d3a71c435

Penguin ゲームオブジェクト　アサイン後のインスペクター画像

４．ゲームを実行して動作を確認する

　すべての処理の実装が収容しましたので、ゲームを実行して花輪をくぐってみましょう。
無事にスコアの表示が更新されれば、スクリプトによって制御が正常に行われています。

＜実行動画＞
https://gyazo.com/0ca1e536894ec7a6269c88402098ed41

　以上でこの手順は終了です。

　=>　次は　手順１３　－キャラと水面までの距離を計測する処理の実装－　です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

３Ｄダイビングゲーム　手順１２ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school