２Ｄ放置ゲーム　手順９

　行き先確認のポップアップでお使いを決定した場合に、行き先ボタンの画像を変更して、お使い中であることをわかる状態にします。
　

＜実装動画①　お使いを開始＞

動画ファイルへのリンク

＜実装動画②　お使い完了を確認(画像の変更はまだ)＞

動画ファイルへのリンク

手順９　－行き先確認ポップアップでお使いを開始する処理と一定時間後にお使いを完了する処理を実装－

１６．TapPointDetail スクリプトを修正し、お使い中の状態とお使いの経過時間を制御する処理を追加する
１７．JobsConfirmPopUp スクリプトを修正し、お使いを開始するボタンを押したら、実際にお使いが開始されるように処理を追加する

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

　・プロパティ
　・DOTweenの補間機能と実装例③　ーDOPunchPosition メソッド、SetLoops メソッドー
　・Tween.Kill メソッド

１６．TapPointDetail スクリプトを修正し、お使い中の状態とお使いの経過時間を制御する処理を追加する

１．設計

　行き先確認用のポップアップにお使いの情報を伝達することができるようになりました。
この関係を表すと次のようになります。

　・TapPointDetail スクリプトの OnClickTapPoint メソッドにおいて JobConfirmPopUp ゲームオブジェクトを生成し、
　　そのゲームオブジェクトにアタッチされている JobConfirmPopUp スクリプトを取得して、OpenPopUp メソッドを実行する
　　このとき、OpenPopUp メソッドにある引数を通じて、TapPointDetail スクリプトの情報を JobConfirmPopUp スクリプトに対して渡して利用できる状態にしている
　　　　　　　　↓
　・JobConfirmPopUp スクリプトの OpenPopUp メソッドでは、TapPointDetail スクリプトの管理している JobData クラスの情報を利用して
　　ポッポアップ内の各コンポーネントに対して JobData クラスの内容を反映させることにより、行き先に応じた内容をポップアップ内に表示している

　今回実装を行いたい内容としては、行き先確認用ポップアップ側から、TapPointDetail スクリプトの方に「お使いを開始する」という情報を伝達する処理にになります。

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

　Instantiate メソッドにて JobsConfirmPopUp ゲームオブジェクトのクローンを生成している部分を修正します。
そのままインスタンスだけしてしまうと、このスクリプトから JobsConfirmPopUpゲームオブジェクトを操作する手段がなくなってしまいます。
そのため、インスタンスと同時に、Instantiate メソッドの戻り値を代入するための変数を左辺に用意しておくことで、
その変数を通じて、JobsConfirmPopUp ゲームオブジェクトの制御を行える状態を作り出します。

　今回制御を行いたいのは、JobsConfirmPopUp ゲームオブジェクト本体ではなく、このゲームオブジェクトにアタッチされている
JobsConfirmPopUp スクリプトになります。そのため、変数に代入されているゲームオブジェクトの情報を活用して
GetComponent メソッドを実行して JobsConfirmPopUp スクリプトを取得し、その上で OpenPopUp メソッドを実行します。

　注意したいのは、メソッドを実行するためには、そのメソッドがあるスクリプトの情報が必要になるということです。
ゲームオブジェクトの情報だけではメソッドを実行することは出来ないので、GetComponent メソッドを利用してスクリプトの情報を取得しています。

TapPointDetail.cs

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

using System.Collections;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening; 

public class TapPointDetail : MonoBehaviour
{
    [SerializeField]
    private Button btnTapPoint;　　　// Button コンポーネントを制御するための変数

    [SerializeField]
    private Transform canvasTran;                 // ポップアップの生成位置の情報を登録するための変数

    [SerializeField]
    private GameObject jobsComfirmPopUpPrefab;    // クローンするプレファブを登録するための変数

    [SerializeField, Header("この行き先(タップポイント)のお使い番号")]
    private int myJobNo;　　　　　　　

    public JobData jobData;　　　　　// お使いの情報を登録


////*  ここから変数の宣言を追加  *////


    [SerializeField]
    private Image imgTapPoint;　　　// 行き先の画像を変更するためのコンポーネントの代入

    [SerializeField]
    private Sprite jobSprite;       // お使い中の画像の登録用

    [SerializeField]
    private Sprite defaultSprite;　 // 初期の行き先の画像の登録用

    private Tween tween;            // DOTween の処理を代入するための変数

    private currentJobTime;         // お使いをしている時間の計測用

    private  bool isJobs;           // お使い中かどうかを判定する値。true ならばお使い中として利用する

    /// <summary>
    /// isJobs 変数のプロパティ
    /// </summary>
    public bool IsJobs
    {
        set {
            isJobs = value;
        }
        get {
            return isJobs;
        }
    }


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


    void Start() {

　　　　// ボタンを押した際に実行する処理(メソッド)を引数に指定して登録
        btnTapPoint.onClick.AddListener(OnClickTapPoint);
    }

    /// <summary>
    /// タップポイントをタップした際の処理
    /// </summary>
    private void OnClickTapPoint() {

        Debug.Log("TapPoint タップ");

        // タップアニメ演出  DOTween の機能の１つである DOPunchScale メソッドを利用してアニメ演出
      　transform.DOPunchScale(Vector3.one * 1.25f, 0.15f).SetEase(Ease.OutBounce);

        // 行き先確認用のポップアップ表示
        GameObject jobsComfirmPopUp = Instantiate(jobsComfirmPopUpPrefab, canvasTran, false);

        // 生成された行き先確認用のポップアップのゲームオブジェクトにアタッチされている JobsConfirmPopUp スクリプトを取得して、メソッドを実行
        jobsComfirmPopUp.GetComponent<JobsConfirmPopUp>().OpenPopUp(this);
    }


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


    /// <summary>
    /// お使いの準備
    /// </summary>
    public void PrapareteJobs() {
        ChangeJobSprite();
        IsJobs = true;
        StartCoroutine(WorkingJobs(jobData.jobTime));
    }

    /// <summary>
    /// お使い中の画像に変更
    /// </summary>
    public void ChangeJobSprite() {
        imgTapPoint.sprite = jobSprite;
        transform.localScale = new Vector3(1.75f, 1.0f, 1.0f);

        tween = transform.DOPunchPosition(new Vector3(10.0f, 0, 0), 3.0f, 10, 3)
            .SetEase(Ease.Linear)           
            .SetLoops(-1, LoopType.Restart);
    }

    /// <summary>
    /// お使いの開始。時間経過処理
    /// </summary>
    /// <param name="normaJobTime"></param>
    /// <returns></returns>
    public IEnumerator WorkingJobs(int normaJobTime) {

        // 残っているお使いの時間を設定
        currentJobTime = normaJobTime;

        // お使いが終わるかを監視
        while (IsJobs) {
            // TODO 条件として時間を確認する
            currentJobTime--;

            // 残り時間が 0 以下になったら
            if (currentJobTime <= 0) {
                KillTween();
                IsJobs = false;                
            }
           
            yield return null;
        }

        // お使いに関する情報を初期状態に戻す
        ReturnDefaultState();

        // 仕事終了
        Debug.Log("お使い 終了");

        // TODO キャラ生成

    }

    /// <summary>
    /// Tween を破棄
    /// </summary>
    public void KillTween() {
        tween.Kill();
    }

    /// <summary>
    /// お使いに関する情報を初期状態に戻す
    /// </summary>
    public void ReturnDefaultState() {
        // お使い中の画像を元の画像に戻す
        imgTapPoint.sprite = defaultSprite;

        // お使いの時間をリセット
        currentJobTime = 0;

        // オブジェクトのサイズを初期値に戻す
        transform.localScale = Vector3.one;
    }


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


    }
}

　スクリプトを修正したらセーブします。
　

３．＜プロパティ＞

　プロパティとは、クラス外部から見るとメンバー変数のように振る舞い、 クラス内部から見るとメソッドのように振る舞う機能です。
そのため、実装状態(private修飾子のまま)を変更することなく、外部クラスへの参照・変更を行える機能であるため、扱いを覚えておくと非常に便利です。

　この特性より、プロパティを作成する場合、多くは private 修飾子の変数の情報を扱うために作成します。
今回の場合は、TapPointDetail クラスの isJobs 変数に対してのプロパティを作成します。

＜プロパティの作成＞

    private bool isJobs;


    /// <summary>
    /// isJobs 変数のプロパティ
    /// </summary>
    public bool IsJobs
    {
        set {
            isJobs = value;
        }

        get {
            return isJobs;
        }
    }

　上記のようなプロパティを作成することで、private 修飾子で宣言している isJobs 変数を
プロパティを利用することによって、外部クラスから参照出来るようにしています。

　private 修飾子にて宣言フィールドで宣言した変数については、外部のクラスからは参照・変更を行うことが出来ません。
このとき参照を行いたい場合には、変数の修飾子を public 修飾子に変更して対応するのではなく
プロパティの持つ get キーワードを利用して、戻り値を利用して private 修飾子の変数を外部クラスに参照させることで対応することが出来ます。

　こういった機能を知っているかどうかで設計部分が大きく変わります。
色々な機能を知っていれば、例えば、今回はプロパティを使おうか、どうしようか、という選択肢が増えますが、知らなければ選択肢自体が生まれません。

　設計の引き出しを広げる上でも、新しい技術を覚えること、常に学習する意欲と向上心を持つことがプログラム学習のポイントです。

　プロパティを利用した設計により、public ではない変数を外部クラスで利用できるようにします。
外部からプロパティを呼び出して戻り値を参照する処理のことをゲッター(getter)と呼びます。

  get {
      return isJobs;
  }

　同様に、private 修飾子の値を外部クラスより変更したい場合には、プロパティを仲介する手法を使って書き換える処理を実装出来ます。
こちらの処理は set キーワードを利用して処理を記述します。そのため、この処理をセッター(setter)と呼びます。

　set キーワード内には呼び出し元から value の値で情報が届いていますので、value の値を利用することで private 修飾子の変数に代入処理を行うことが出来ます。

  set {
      isJobs = value;
  }

　この処理を外部のクラスから実行する場合には、参照する場合と同じで「クラスの変数.プロパティ名」と記述することで値の書き換えが可能です。

　get、set キーワードはどちらか片方だけでも記述できます。
またプロパティ内部に条件式を用意して、その結果に合わせて処理を変更する記述も出来ます。

参考サイト
未確認飛行 C 様
プロパティ
https://ufcpp.net/study/csharp/oo_property.html

FEnetインフラ様　テックブログ
C#のプロパティを使いこなそう！さまざまな実装方法を紹介
https://www.fenet.jp/infla/column/technology/c%E3%...

４．＜DOTweenの補間機能と実装例③　ーDOPunchPosition メソッド、SetLoops メソッドー＞

　新しいDOTweenの処理を実装していますので、各メソッドの説明をします。

  // DOTweenの処理を代入できる
　tween = transform.DOPunchPosition(new Vector3(10.0f, 0, 0), 3.0f, 10, 3)
            .SetEase(Ease.Linear)       
            .SetLoops(-1, LoopType.Restart);

　今回の処理は、複数のメソッドをつなげて１行で記述している処理になります。
ピリオドの位置までが１つの処理になっており、合計で３つの DOTween のメソッドが実行されています。

　このようにピリオドを利用して、前のメソッドの処理に続けて次のメソッドの処理を書くと、前のメソッドの処理を受けて次のメソッドの処理が実行されます。
この記述方法をメソッド・チェーンといいます。

　今回の場合、transform に対して DOLocalMoveX メソッドが最初に実行されて、その処理結果を利用して、次の SetLoops メソッドが実行されます。
さらにピリオドで次のメソッドが続いていますので、その２つの処理結果を受けて、最後に SetEase メソッドが実行されるようになっています。

　プログラムは上から下に実行されていきますが、１行に書かれた処理の場合は、手前(左側)より、ピリオド単位で区切って実行されることになります。
これは他の処理と同様です。しっかりと処理の順番を追えるように、読み解いてみましょう。

１．DOPunchPosition (Vector3 punch, float duration, [int vibrato = 10], float elasticity = 1], [bool snapping = false] )

　まずは最初は DOPunchPosition メソッドです。
この処理は直線状に神藤しながら移動する処理を行うことができます。

  transform.DOPunchPosition(new Vector3(10.0f, 0, 0), 3.0f, 10, 3)

　第1引数には振動しながら移動する最大距離を Vector3 型で指定します。第2引数には振動する時間を float 型で指定します。
この２つが必須項目ですが、残る３つの引数には初期値が設定されているため、今回のように指定していなくても初期値を利用して実行してくれます。
是非自分で調べてみてください。
　
　この処理により、画像が左右に振動しながら移動を行う処理を実装しています。

２．SetLoops(int loops, LoopType loopType)

　SetLoopsメソッドは、他のDO～メソッドの後に実行できるメソッドです。この命令単体で実行することはできません。

　tween = transform.DOPunchPosition(new Vector3(10.0f, 0, 0), 3.0f, 10, 3)
            .SetEase(Ease.Linear)       
            .SetLoops(-1, LoopType.Restart);

　一緒に命令をしているメソッドに対してループ処理を付与することが出来ます。
今回の処理では、transform.DOPunchPosition メソッドに対して、ループ処理を行っています。(SetEaseメソッドもSetLoopsメソッドと同じで単体では動かないメソッドです)

　第1引数はループ処理を行う回数です。int型で設定します。今回のように -1 を指定すると、それは無限ループになります。(ループが終了しません)
このような場合は明示的に処理を停止させないと無限にループを繰り返します。

　第2引数ではループさせるタイプをLoopTypeというenum型から選択します。LoopType.Yoyo の場合は、A => B , B => Aという形式で、目標値から再度、スタート地点に対して戻る形でループを繰り返します。
他にもLoopTypeがありますので調べてみてください。この処理によって、左右方向に行ったり来たりして、それを無限にループします。

５．＜Tween.Kill メソッド＞

　DOTween に関連する処理になります。
Tween 型の変数を宣言することで、DOTweenの処理内容を変数に代入することが出来ます。

　DOTweenの処理は変数に代入せずとも実行できます。本来はそれだけで問題はないのですが、
Tweener 型の変数にDOTweenの処理を代入していることで、DOTweenの処理を一時停止させたり、終了させることが出来るようになります。

　どのような場面で使用するかというと、今回のようにSetLoops メソッドによって無制限のループ処理を行っている場合がその１つになります。
変数にDOTweenの処理を代入していない場合、ループ処理として動いているDOTweenの処理を一時停止したり、終了させる処理ができません。

　DOTweenの処理を中断するには、Killメソッドを実行します。この処理を実行することで、SetLoops メソッドによる無制限のループ処理を終了させることが出来ます。

　private Tween tween;  // Tween 型の変数

  // DOTweenの処理を代入できる
　tween = transform.DOPunchPosition(new Vector3(10.0f, 0, 0), 3.0f, 10, 3)
            .SetEase(Ease.Linear)        
            .SetLoops(-1, LoopType.Restart);

　// ループアニメを破棄する
  tween.Kill();

６．btnTapPoint ゲームオブジェクトの設定を行う

　新しく SerializeField 属性で宣言している変数が３つインスペクターに追加されていますので、
そちらに情報をアサインして登録を行います。

　Image コンポーネントの変数については TapPointDetail ゲームオブジェクトの Image コンポーネントをアサインします。

　２種類の Sprite コンポーネントについては、お使い中の画像と、最初から表示されている行き先の画像の２つをそれぞれドラッグアンドドロップしてアサインして登録しておきます。
お使い中の画像については任意の画像を設定してください。今回は「お使い中」というメッセージを表示するようにしています。
これはお使い完了時にキャラが生成されるので、最初からキャラがいる状態ではなくて、お使いが終わって初めてキャラが出る、という新鮮さ、驚きの部分を表現するためです。

インスペクター画像

　以上で設定は完了です。

１７．JobsConfirmPopUp スクリプトを修正し、お使いを開始するボタンを押したら、実際にお使いが開始されるように処理を追加する

１．設計

　行き先確認ポップアップにはお使いを始めるためのボタンを用意してあり、そのボタンを押すと該当するメソッドの処理が実行される部分までは確認が済んでいます。
そのメソッド内において、行き先確認ポップアップから行き先側に命令を出し直して、行き先の情報をお使いが開始された状態へと制御を行うようにします。

＜行き先→行き先確認ポップアップ＞

　・行き先のゲームオブジェクトをタップすると、TapPointDetail スクリプトにあるメソッドが実行されて、行き先確認ポップアップが生成される

＜行き先確認ポップアップ→行き先＞

　・行き先確認ポップアップのお使いを始めるボタンを押すと、JobsConfirmPopUp スクリプトにあるメソッドが実行されて、
　　その処理の中でさらに TapPointDetail スクリプトにあるメソッドが実行されて、行き先のゲームオブジェクトがお使い中の状態になるように制御を行う

　
　スクリプト同士がどういう関係性で結びついているのか、そのイメージと流れをしっかりと把握することが大切です。
スクリプト同士のつながりをイメージする際には、クラス図を書いて、どのスクリプトからどのスクリプトのメソッドを実行している、ということをまとめて置くようにしましょう。

　自分のイメージをしっかりと書き起こすことが出来れば、処理の流れを把握できていることになります。

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

　TODO 機能でコメントしてある部分に処理を実装し、お使いを開始させるようにします。
どのような処理を実装すればよいか、先ほど修正してある TapPointDetail スクリプトを見ながら考えてみてください。

　自分の考えた処理を実装してから教材を見るようにすることで、理解が各段に深まります。
教材通りにかけば動くから、では覚えていくことができません。

　常に「自分で考える」ことを止めないようにしてください。

JobsComfirmPopUp.cs

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

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

public class JobsConfirmPopUp : MonoBehaviour
{
    [SerializeField]
    private Button btnSubmit;

    [SerializeField]
    private Button btnCancel;

    [SerializeField]
    private CanvasGroup canvasGroup;

    [SerializeField]
    private Text txtJobTime;

    [SerializeField]
    private Text txtJobType;

    [SerializeField]
    private Text txtJobTitle;

    private TapPointDetail tapPointDetail;


    public void OpenPopUp(TapPointDetail tapPointDetail) {

        SwitchButtons(false);
        btnSubmit.onClick.AddListener(OnClickSubmit);
        btnCancel.onClick.AddListener(OnClickCancel);

        canvasGroup.alpha = 0.0f;

        this.tapPointDetail = tapPointDetail;

        txtJobTime.text = (tapPointDetail.jobData.jobTime / 100).ToString("F0");
        txtJobType.text = tapPointDetail.jobData.jobType.ToString();
        txtJobTitle.text = tapPointDetail.jobData.jobTitle;

        canvasGroup.DOFade(1.0f, 0.3f)
            .SetEase(Ease.Linear)
            .OnComplete(() => {
                SwitchButtons(true);
            });
    }

    /// <summary>
    /// 決定
    /// </summary>
    private void OnClickSubmit() {
        ClosePopUp(true);

        Debug.Log("お使いに行く");
    }

    /// <summary>
    /// キャンセル
    /// </summary>
    private void OnClickCancel() {
        ClosePopUp(false);

        Debug.Log("お使いには行かない");
    }

    /// <summary>
    /// ポップアップを閉じる
    /// </summary>
    /// <param name="isSubmit"></param>
    private void ClosePopUp(bool isSubmit) {
        SwitchButtons(false);

        canvasGroup.DOFade(0f, 0.3f)
            .SetEase(Ease.Linear)
            .OnComplete(() => {


////*  ここから修正  *////


                // ボタン操作の結果を反映する(お使いに行くを選択している場合、true)
                if (isSubmit) {

                    // お使いの準備開始
                    tapPointDetail.PrapareteJobs();
                }


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


                Destroy(gameObject);
            });
    }

    /// <summary>
    /// すべてのボタンの活性化/非活性化の制御
    /// </summary>
    /// <param name="isSwitch"></param>
    private void SwitchButtons(bool isSwitch) {
        btnSubmit.interactable = isSwitch;
        btnCancel.interactable = isSwitch;
    }
}

　スクリプトを修正したらセーブを行います。

　コメントを自分で書いて補記しておきましょう。
もしもコメントが書けない場合には、処理の内容をしっかりと把握できるように復習を行ってください。

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

　処理の流れを把握してから、ゲームを実行して、想定している処理によってゲームが制御されるようになるか確認を行います。

　行き先確認用ポップアップのお使い開始ボタンを押すと、行き先の画像がお使いをしている状態の画像に切り替われば制御成功です。

＜実装動画①　お使いを開始＞

動画ファイルへのリンク

　また、一定時間経過後に、Debug.Log メソッドの内容が Console ビューに表示されれば、こちらも制御成功です。

＜実装動画②　お使い完了を確認(画像の変更はまだ)＞

動画ファイルへのリンク

　以上でこの手順は終了です。
　
　次は　手順１０　－お使い完了時の処理を実装し、ゲームの基本サイクルを作成する－　です。

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

印刷する

コメント（0）

２Ｄ放置ゲーム　手順９ - i-school 先頭へ

コメントをかく

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

i-school