パズルゲーム　手順１０

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

１９．Canvas内にパズルゲーム用のUI部品を作成する③（残り時間表示部分）
２０．GameDataスクリプトを修正する②　残り時間を登録して管理できるようにする

２１．UI管理を行うUIManagerスクリプトを修正する①残り時間表示の更新）
２２．GameManagerスクリプトを修正する⑥　残り時間をカウントする処理を追加する

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

・ToString()メソッドの引数【２１】
・TODOの使い方【２２】

１９．Canvas内にパズルゲーム用のUI部品を作成する③（残り時間表示部分）

　ヒエラルキーにあるCanvasゲームオブジェクトの中に、新しくゲームオブジェクトを追加していきます。
これらはゲームの残り時間表示用の部品となります。この手順が終わった際には、下記の画像のような形になります。

ヒエラルキー　参考画像

TopUIゲームオブジェクトの子オブジェクトとして、Timesゲームオブジェクトを作成する

　TopUIゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前をTimesに変更します。
Timesゲームオブジェクトでは、残り時間表示部の背景画像を設定するとともに、この画像上に表示するText(残り時間の数字)を管理する役割を持たせます。

　Timeeゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。（細かい数字は適宜切り上げてください）

　つづいてImageコンポーネントのSourceImageに残り時間表示部分の背景となる画像を設定します。
ここでは無料画像を探してきてインポートして利用していますが、画像は自由に設定してください。
　合わせてImageコンポーネントにある Raycast Target のチェックを外します。

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

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

Timesゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、名前を txtTimer に変更する

　前回の手順で作成したTextBasePrefabをTimesゲームオブジェクトの子オブジェクトとして配置します。
TextBasePrefabをドラッグアンドドロップしてヒエラルキーのTimesゲームオブジェクトの子として配置してください。

　名前を txtTimer に変更します。これは残り時間表示の部分の数字表示の役割を持ちます。

　txtTimer ゲームオブジェクトのインスペクターを確認して、RectTransfromコンポーネント、あるいはSceneビューを利用して位置と大きさを調整します。
下記の画像を参考に、適宜な位置と大きさに調整をしてください。

　TextコンポーネントのText欄にはデバッグ用に適宜な数字を入れておきます(0，999など)。Outlineの設定なども数字を見ながら一緒に行いましょう。
これで常に画面上には残り時間の数字が表示されるようになりました。

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

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

Sceneビュー画像

　　以上で残り時間表示に関連するUI部品の作成は終了です。

UIの確認

完成画像

２０．GameDataスクリプトを修正する②　残り時間を登録して管理できるようにする

　GameDataスクリプトを修正して、残り時間の設定値(initTime)と現在の残り時間(gameTime)とを、それぞれ変数を用意して管理できるようにします。

　initTime変数は残り時間の設定値です。この値がゲーム内における残り時間の初期値になります。基準値は60(秒)です。任意の値にしてください。
このinitTime変数を使用するクラスはGameDataクラス内のみですのでprivate修飾子で宣言していますが、設定値をインスペクターで操作出来た方が
デバッグなどもしやすいため、SerializeField属性をつけて、インスペクターでの設定が行えるようにしています。

　gameTime変数は、ゲームが始まってからの実際の時間経過を測定する値です。初期値としてinitTime変数の値が与えられて、時間経過に合わせて減少させます。
この値を【１９】で作成した txtTimer ゲームオブジェクトのTextコンポーネントに紐づけを行ってゲーム画面の残り時間を更新します。

この値はpublic 修飾子で宣言していますが、0のままにしておいてください。ゲームが開始されるとInitGameメソッドで設定されます。
ではなぜpublic修飾子なのかというと、GamanManagerクラス（GameDataではない外部のクラス）で使用するためです。

　それでは修正していきます。

GameData.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameData : MonoBehaviour
{
    // 今までの宣言フィールドはそのままなので省略


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


    [SerializeField, Header("1回辺りのゲーム時間")]
    private int initTime = 60;

    [Header("現在のゲームの残り時間")]
    public float gameTime;


////* ここまで追加 * /////


    void Awake() {
        // 変更なしのため省略
    }

    private void InitGame() {         // ☆　処理を追加する　☆ //
        score = 0;
        eraseEtoCount = 0;


////* ここから処理を追加 */////


　　　　// ゲーム時間を設定
　　　　gameTime = initTime;


////* ここまで追加 */////


        Debug.Log("Init Game");
    }
}

　GameDataスクリプトの修正が終了しましたら、GameDataゲームオブジェクトを選択してインスペクターを確認します。
InitTime変数には 60 、GameTime変数には 0 がはいっています。そのままで問題ありませんので、アサイン情報が表示されているかを確認しておきます。
もしもInitTime変数の値が 0 になっている場合には 60 を入力してください。

インスペクター画像

２１．UI管理を行うUIManagerスクリプトを修正する①残り時間表示の更新）

　UIManagerスクリプトの修正を行い、残り時間の値を画面表示できるように処理を追加します。
GamanManagerスクリプトから現在の残り時間をメソッドの引数として受け取り、それをTextコンポーネントを利用して画面の残り時間表示を更新します。

　それでは修正していきます。

UIManager.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIManager : MonoBehaviour
{
    [SerializeField] 
    private Text txtScore;


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


    [SerializeField] 
    private Text txtTimer;


////* ここまで追加 *////


    public void UpdateDisplayScore() {
　　　　// 変更なしのため省略
    }


////* ここからメソッドを１つ追加 *////


    /// <summary>
    /// ゲームの残り時間の表示更新
    /// </summary>
    /// <param name="time"></param>
    public void UpdateDisplayGameTime(float time) {
        txtTimer.text = time.ToString("F0");
    }


////* ここまで追加 *////


}

　UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認します。
新しく追加したtxtTimer変数へのアサインが表示されますので、こちらにCanvas内にあるtxtTimerゲームオブジェクトをドラッグアンドドロップしてアサインします。

アサイン画像

＜ToString()メソッドの引数＞

　新しく追加したUpdateDisplayGameTimeメソッドでは引数としてfloat型で残り時間の値を time変数として受け取ります。
このとき画面表示には小数点を表示したくありませんので、ToStringメソッドの引数を利用して表示する値を整数のみにします。

　txtTimer.text = time.ToString("F0");

　ToString()メソッドの引数に "F0" が指定されています。このメソッドは引数に指定した文字列によって表示方法を変化させることができます。
今回の F0 では、小数点を表示しないでint型をstring型にする処理を行っています。
F の後ろの数字が小数点の位を指定しており、F0 の場合には少数点なし、F1 の場合には小数点第１位まで表示、というように表示方法の指定が可能です。

　実際にいろいろな値にして小数点表示を試してみましょう。

２２．GameManagerスクリプトを修正する⑥　残り時間をカウントする処理を追加する

　GameMamagerスクリプトの修正を行い、Updateメソッド内に時間経過に合わせて残り時間を減少させる処理を追加します。
また、UIManagerのUpdateDisplayTimeメソッドを呼び出して、画面の残り時間の更新を行わせます。

　処理の流れは、次のようになります。

１．GamanManagerのUpdateメソッドでGameDataに用意したgameTime変数を減少させる
　　　↓
２．UIManagerのUpdateDisplayTimeメソッドの中で残り時間を表示しているTextコンポーネントに対して処理を行い、画面表示をGameDataのgameTime変数の値に更新する
　　　↓
３．GameDataのgameTime変数の値が0になるまで、１と２を繰り返す。

　まずは教材を見る前に、自分で処理を考えて書いてみて動かしてみてください。

GameManager.cs

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

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class GameManager : MonoBehaviour
{
    // 今までの宣言フィールドはそのままなので省略


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


    private float timer;        // 残り時間計測用


////* ここまで追加 *////


    IEnumerator Start() {                                           // ☆　処理を追加する　☆ //
　　　　// 干支の画像を読みこむ。この処理が終了するまで、次の処理へはいかないようにする
	yield return StartCoroutine(LoadEtoSprites());


////* ここから処理を追加 *////


        // 残り時間の表示
	uiManager.UpdateDisplayGameTime(GameData.instance.gameTime);


////* ここまで追加 *////


	// 引数で指定した数の干支を生成する
	StartCoroutine(CreateEtos(GameData.instance.createEtoCount));
　　}

    private IEnumerator LoadEtoSprites(){
        // 変更なしのため省略
    }

    private IEnumerator CreateEtos(int count) {
        // 変更なしのため省略
    }

　　void Update() {                                                     // ☆　処理を追加する　☆ //
        // 干支をつなげる処理
	if (Input.GetMouseButtonDown(0) && firstSelectEto == null) {
            // 干支を最初にドラッグした際の処理
            OnStartDrag();
        } else if (Input.GetMouseButtonUp(0)) {
            // 干支のドラッグをやめた（指を離した）際の処理
	    OnEndDrag();
        } else if  (firstSelectEto != null) {
            // 干支のドラッグ（スワイプ）中の処理	    
            OnDragging();
	}


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


	// ゲームの残り時間のカウント処理
	timer += Time.deltaTime;

        // timerが 1 以上になったら
        if(timer >= 1){
            // リセットして再度加算できるように
            timer = 0;
            
            // 残り時間をマイナス 
            GameData.instance.gameTime--;

            // 残り時間がマイナスになったら
            if (GameData.instance.gameTime <= 0) {
                
                //0で止める
	        GameData.instance.gameTime = 0;

          	// TODO ゲーム終了を追加する
	        Debug.Log("ゲーム終了");
	    }
		
            // 残り時間の表示更新
	    uiManager.UpdateDisplayGameTime(GameData.instance.gameTime);
        }	


////* ここまで追加 *////


    }

    private void OnStartDrag() {
　　　　// 変更なしのため省略
    }

    private void OnDragging() {
        // 変更なしのため省略
    }

　　private void OnEndDrag() {
        // 変更なしのため省略
    }

    private void AddEraseEtolList(Eto dragEto) {
        // 変更なしのため省略
    }

    private void RemoveEraseEtoList(Eto dragEto) {
        // 変更なしのため省略
    }

    private void ChangeEtoAlpha(Eto dragEto, float alphaValue) {
        // 変更なしため省略
    }

    private void AddScores(EtoType? etoType, int count) {
        // 変更なしため省略
    }
}

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

　ゲームを実行してみましょう。画面に残り時間がinitTime変数で指定した時間で表示され、時間経過によって残り時間表示が更新されて減少していけば正常に動作しています。
また残り時間の値は0以下にはならないようにしていますので、0で更新が止まるかも確認をします(デバッグの際にはinitTime変数を少ない数に減らしましょう)

　デバッグ用に残り時間が0になった際にはConsoleにゲーム終了のログが表示されるはずですので、そちらも合わせて確認をします。

　もしも処理がうまく動作しない場合には、どこに問題があるか切り分けて、順番に考えていきます。

　また時間の計測方法については、他にも色々な方法があります。
この方法だけに捕らわれずに、異なる方法の実装方法も検討してみてください。

＜TODOの使い方＞

　今回GamanManagerのUpdateではゲーム終了の処理がまだ未実装であるため、Debug.Logを利用して処理の流れのみを確認しています。
その上の行にはTODO機能を使用して、実装のし忘れを防止しています。

　詳しくはこちらの記事をご覧ください。

// TODO コメント

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

　次は 手順１１ です。

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

印刷する

コメント（0）

パズルゲーム　手順１０ - i-school 先頭へ

コメントをかく

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

i-school