パズルゲーム　発展１０

スキル機能を設計・実装する②

設計と実装の手順②

　この手順ではUIManagerスクリプトを修正し、先ほど作成したスキルボタンやスキルのゲージ用画像の制御処理を追加していきます。

　実装の手順です。

　１．UIManagerスクリプトを修正する

　新しく学習する内容です。

・UnityEventの使用方法
・DoTweenのDOFillAmountメソッドとSetLoopsメソッド
・ラップ処理の実装例　～Tweener型変数を活用してDoTweenのループ処理を停止する～

１．UIManagerスクリプトを修正する

　UIManagerスクリプトを修正します。スキルボタン用の変数を用意し、ボタンにメソッドを登録します。また、スキルボタンを押した際の処理も追加します。

　干支を消すごとにスキルポイントが加算されると同時に、スキルボタンのゲージも徐々に溜まっていくように、ImageのFillAmoutを制御する機能をDOTweenを利用して追加します。

　スキルボタンは押せるようになったら、こちらもDOTweenの機能でアニメーションさせて、ボタンが押せる、スキルが発動できることをユーザーに認知してもらうための補助動作とします。
ただし、スキルボタンを押すタイミングはユーザーの任意のタイミングになります。よって、いつスキルボタンが押されるのかはわかりませんので、
スキルボタンのアニメーションについては、ゲージが満タンになった時に一度だけアニメーションさせるのではなく、
スキルボタンが実際に押されるまで一定の間隔でアニメーションが発生するようにループ処理を施しておきます。
こうすることで、いつでも押せる、ということをユーザーに知らせることにも役立ちます。

UIManager.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
using UnityEngine.Events;                       // ☆　追加します

public class UIManager : MonoBehaviour {

    // 今までの宣言フィールドから変更なし


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


    [SerializeField]
    private Button btnSkill;

    [SerializeField]
    private Image imgSkillPoint;

    private Tweener tweener = null;     // DoTweenの処理を代入する変数

    private UnityEvent unityEvent;      // UnityEventとしてメソッドを代入する変数


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


    public IEnumerator Initialize() {
        // 変更なしのため省略 
    }

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

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

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

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


////* ここからメソッドを４つ追加します *////


    /// <summary>
    /// 選択した干支の持つスキルを登録
    /// </summary>
    /// <param name="unityAction">メソッドが代入されている</param>
    /// <returns></returns>
    public IEnumerator SetUpSkillButton(UnityAction unityAction) {

        // スキルポイントが0からスタートするので、スキルボタンを押せなくしておく
        btnSkill.interactable = false;

        // スキルの登録がない場合、スキルボタンには何も登録しない
        if (unityAction == null) {
            yield break;
        }

        // UnityEvent初期化
        unityEvent = new UnityEvent();

        // UnityEventにunityActionを登録(UnityActionにはメソッドが代入されている)
        unityEvent.AddListener(unityAction);

        // スキルボタンにメソッドを登録
        btnSkill.onClick.AddListener(TriggerSkill);
    }

    /// <summary>
    /// スキルポイント加算
    /// </summary>
    /// <param name="count">消した干支の数</param>
    public void AddSkillPoint(int count) {

        // FillAmountの現在値を代入
        float a = imgSkillPoint.fillAmount;

        // 消した干支の数をFillAmount用に計算し代入
        float value = a += count * 0.05f;

        // DoTweenのDOFillAmountメソッドを使用してアニメさせながらFillAmountを操作
        imgSkillPoint.DOFillAmount(value, 0.5f);

        // FillAmoutが 1 になり、スキルボタンがアニメしていなければ
        if (imgSkillPoint.fillAmount >= 1.0f && tweener == null) {
            Debug.Log(imgSkillPoint.fillAmount);

            // スキルボタンを押せるようにする
            btnSkill.interactable = true;

            // ループ処理を行い、スキルボタンが押されるまでスケールを変化させるアニメを実行する。それをtweener変数に代入しておく
            tweener = imgSkillPoint.transform.DOScale(new Vector3(1.2f, 1.2f, 1.2f), 0.25f).SetEase(Ease.InCirc).SetLoops(-1, LoopType.Yoyo);
        }
    }

    /// <summary>
    /// スキル使用
    /// </summary>
    public void TriggerSkill() {

        // ボタンの重複タップ防止
        btnSkill.interactable = false;

        // 登録されているスキル(UnityActionに代入されているメソッド)を使用
        unityEvent.Invoke();

        // スキルポイント関連を初期化
        imgSkillPoint.DOFillAmount(0, 1.0f);

        // スキルボタンのループアニメを破棄し、tweener変数をnullにする
        tweener.Kill();
        tweener = null;
  
        // スキルボタンのスケールを元の大きさに戻す
        imgSkillPoint.transform.localScale = Vector3.one;
    }

    /// <summary>
    /// 複数のボタンを押せないようにまとめて制御する
    /// </summary>
    public void InActiveButtons() {
        btnSkill.interactable = false;
        btnShuffle.interactable = false;
    }


////* ここまで追加します *////


}

＜UnityEventの使用方法＞

UnityEventとはUnityが用意しているコールバック処理の1つです。宣言することで使用することが可能になります。

Unity公式スクリプトリファレンス
UnityEngine.Events
https://docs.unity3d.com/ja/current/ScriptReferenc...

using UnityEngine.Events;

　　
　UnityEventを使用するには初期化処理を行います。その後、AddListnerメソッドを使用して、登録したいメソッドを指定します。
メソッドの指定は変数（ここではUnityActionによるデリゲート）でも登録することが出来ます。

    // UnityEvent初期化
    unityEvent = new UnityEvent();

    // UnityEventにunityActionを登録(UnityActionにはメソッドが代入されている)
    unityEvent.AddListener(unityAction);

　メソッドを登録後、Invokeメソッドを実行することで、UnityEventに登録したメソッドを実行することが出来ます。
今回は登録されているメソッドは１つだけですが、AddListnerメソッドを複数回使用すれば、複数のメソッドを登録しておくことが出来ます。
その場合、1回のInvokeメソッドですべての登録されているメソッドが実行されます。

    // 登録されているスキルを使用
    unityEvent.Invoke();

　今回のケースでは、スキル用の処理メソッドをUnityAcitonへ代入し、それをAddListnerメソッドを使ってUnityEventに登録しています。
このような設計にしておくことで今後スキルの数が増えた場合であっても、スキルボタンに対して、使用するスキルの処理をスクリプトから動的に登録することが出来ます。

　たくさんの参考記事がありますので調べてみましょう。

うら干物書き様
【Unity】UnityEventの用法と用量
https://www.urablog.xyz/entry/2016/09/11/080000

＜DoTweenのDOFillAmountメソッドとSetLoopsメソッド＞

　DoTweenには様々なメソッドがありますが、ここでは２つの新しいメソッドを利用しています。

DOFillAmountメソッド

　DOFillAmountメソッドは、画像のImageTypeをFilledに設定しているImageコンポーネントに対して実行できるメソッドです。
Image コンポーネントの持つ FillAmout の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

　FillAmountの値を第1引数で指定した値まで、第2引数で指定した時間をかけて変更します。

imgSkillPoint.DOFillAmount(0, 1.0f);

SetLoopsメソッド

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

　一緒に命令をしているメソッドに対してループ処理を付与することが出来ます。

    // ループ処理を行い、スキルボタンが押されるまでスケールを変化させるアニメを実行する。それをtweener変数に代入しておく
    tweener = imgSkillPoint.transform.DOScale(new Vector3(1.2f, 1.2f, 1.2f), 0.25f).SetEase(Ease.InCirc).SetLoops(-1, LoopType.Yoyo);

　
　上記の処理では、imgSkillPoint.transform.DOScaleメソッドに対して、ループ処理を行っています。(SetEaseメソッドもSetLoopsメソッドと同じで単体では動かないメソッドです)

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

　第2引数ではループさせるタイプをLoopTypeというenum型から選択します。LoopType.Yoyo の場合は、A => B , B => A という形式でループを繰り返します。(ヨーヨーと同じ動きです)
他にもLoopTypeがありますので調べてみてください。

＜ラップ処理の実装例　～Tweener型変数を活用してDoTweenのループ処理を停止する～＞

　DoTweenによって、処理をアニメのように再生できる補間処理は非常に便利ですが、一度実行すると、その処理が終了するまでは途中で止めることが出来ません。
またループ処理を伴う場合にはずっと処理が動き続けて止まりません。

　そのようなケースに備えて途中で処理を停止したり破棄したい場合には Tweener型の変数を用意し、そこにDoTweenの処理を代入して実行することが出来ます。
そして代入したTweener型の変数に対しては、実行している処理を停止する命令を出すことが出来ます。
　このように、ある処理を別の変数に代入することによって、元々の処理の内容・機能を変えずにより使いやすい形で処理してもらえるようにすることを
ラップ(Wrap)処理と言います。

    // 宣言
    Tweener tweener = null; 

    // ループ処理を行い、スキルボタンが押されるまでスケールを変化させるアニメを実行する。それをtweener変数に代入しておく
    tweener = imgSkillPoint.transform.DOScale(new Vector3(1.2f, 1.2f, 1.2f), 0.25f).SetEase(Ease.InCirc).SetLoops(-1, LoopType.Yoyo);

　今回利用しているケースは、スキルボタンのスケールを大きくしたり、小さくしたりするループ処理の部分です。
　
　本来であればtweener変数に代入しなくても、上記のDoScaleの処理は実行することが可能ですが、SetLoopsメソッドによるループ処理は一度実行すると
ループ回数を繰り返すまで処理を止めることが出来ません。まして今回のケースではループ回数は無限に指定しているため、止まることがありません。

　そのため、tweener変数にループ処理を代入し、スキルボタンを押した際に、下記の処理をTweener型の変数に対して行うことでループ処理を停止しています。

    // スキルボタンのループアニメを破棄し、tweener変数をnullにする
    tweener.Kill();
    tweener = null;

　Tweener型の持つKillメソッドを実行することで、tweener変数に代入されているループ処理が停止します。
また次の行の処理で tweener変数をnullにすることによって、代入されていたループ処理が完全にクリアされます。

　このように、変数を利用し、処理をラップすることで処理の応用幅が広がります。

UIManagerゲームオブジェクトにアサイン情報を登録する

　UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認します。
新しく追加したアサイン情報が２つ表示されていますので、同じ名称のゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインします。

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

アサイン動画
https://gyazo.com/5282af6915f708b685e7f3cb771988e0

アサイン後のインスペクター画像

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

　次は 発展１１ です。

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

印刷する

コメント（0）

パズルゲーム　発展１０ - i-school 先頭へ

コメントをかく

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

i-school