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

　この手順では姿勢変更用のゲージが満タンになった際に、ゲージがキランと光る演出を追加して、満タンになったことをユーザーに伝えるようにします。

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

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

手順２０　－姿勢変更ゲージの演出を追加－

３２．ShinyEffectForUGUI アセットをインポートする
３３．姿勢変更ゲージが満タンになった際にゲージが光る演出を追加する

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

　・ShinyEffectForUGUI アセットの利用方法

３２．ShinyEffectForUGUI アセットをインポートする

１．設計

　多くのゲームにおいて、UIはユーザーに情報を表示するだけではなく、更新された新しい情報を提示する役割も持っています。

　今回は、姿勢変更用のゲージについて演出を行い、ユーザーに姿勢の変更が可能になったことを視覚的に伝えるようにします。
演出には見栄えをよくするだけではなく現在ゲームがどのような状態になっているのかを伝える役目もありますので、上手く活用してください。

　姿勢変更用のゲージが満タンになった時に、ゲージを１回キランと光らせる演出を実装します。

　UI専用のアセットを無償で提供してくださっている方がいますので、そちらのアセットを利用します。

　こちらのアセットに含まれている、ShinyEffectForUGUI というスクリプトを光らせたいゲームオブジェクトにアタッチすることで
スクリプトを通じてゲームオブジェクトを適宜なタイミングで光らせる制御を行います。

　まずはアセットをインポートします。

２．ShinyEffectForUGUI をインポートする

　以下のサイトから、ShinyEffectForUGUI アセットをダウンロードしてインポートします。

ShinyEffectForUGUI

https://github.com/mob-sakai/ShinyEffectForUGUI/re...

　こちらのページの少し下に、ShinyEffectForUGUI.unitypackage というUnityPackage のダウンロード用のリンクがありますので、クリックします。

　ダウンロードが終了したら、そのファイル Unity の Project 内にドラッグアンドドロップしてインポートを行います。

　上記のようにインポートの確認ウインドウが開きますので、Import を選択してください。

　これでインポート完了です。続いて、光らせたいゲームオブジェクトにスクリプトのアタッチを行います。

３．ShinyEffectForUGUI スクリプトの設定を行う

　このアセットに含まれている ShinyEffectForUGUI スクリプトを、光らせたいUI部品のゲームオブジェクトにアタッチします。
今回は姿勢変更用のゲージ全体を光らせたいので、Canvas 内にある imgFrame ゲームオブジェクトにドラッグアンドドロップしてアタッチします。

　imgGauge ゲームオブジェクトにアタッチしてしまうと、フレームが光りません。
ですが、imgFlame にアタッチするとフレームだけではなく、フレーム内にあるゲージも一緒に光ります。親子関係を上手く活用しましょう。

ShinyEffectForUGUI スクリプトのあるパス

Assets/ShinyEffectForUGUI/ShinyEffectForUGUI.cs

フォルダ画像

ヒエラルキー画像

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

　上記のインスペクター画像や、下記のサイトを参考に ShinyEffectForUGUI の設定を行ってください。
Rotation の値を 45 に設定することで画像の左端から右端に向かって光がアニメーションします。

　そのほかにも自由に設定していただいて構いません。実際に動かしながら、どれがいいか運用を決定してください。

参考サイト

コガネブログ様
【Unity】uGUI で画像や文字がキラッと光る演出を実装できる「ShinyEffectForUGUI」紹介
https://baba-s.hatenablog.com/entry/2018/05/21/090...

　また、Canvas ゲームオブジェクトの Canvas コンポーネントの設定を変更します。

Canvas ゲームオブジェクト　Canvas コンポーネント

　こちらの Additional Shader Channels の設定を Nothing から TexCoord1 に変更してください。

変更後

　

　以上で設定は完了です。続いて、こちらのエフェクトを制御するための処理を PlayerController スクリプトに追加していきます。

参考サイト　Additional Shader Channels

れー＠DKRevel 様
UnityのCanvas【使い方とスクリプト】
https://dkrevel.com/unity-explain/canvas/

３３．姿勢変更ゲージが満タンになった際にゲージが光る演出を追加する

１．設計

　先ほどゲームオブジェクトにアタッチした ShinyEffectForUGUI スクリプトを利用するには、using での宣言が必要です。
Play メソッドを実行することで、キランと光るエフェクトを再生させることが出来ます。

　光らせたいタイミングは姿勢変更用のゲージが満タンになった時ですので、この部分に、エフェクトを再生させる制御処理を追加します。

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

　using に ShinyEffectForUGUI スクリプトを利用するための宣言を追加します。

　また新しい ShinyEffectForUGUI 型の変数を宣言し、このスクリプトから ShinyEffectForUGUI スクリプトを利用できる状態にします。
SerializeField属性で宣言しておくことで、インスペクターから値の代入が行えます。

　メソッドの追加はありませんが、Update メソッド内の姿勢変更用のゲージが満タンになった時の処理に
ShinyEffectForUGUI スクリプトにある Play メソッドを実行する処理を追加します。
このメソッドを実行することで ShinyEffectForUGUI スクリプトがアタッチさせているゲームオブジェクトを光らせることが出来ます。

PlayerController.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;
using Coffee.UIExtensions;     //  <=  ☆　ShinyEffectForUGUI を利用するために必要な宣言です。

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

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

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

    // キャラの状態の種類
    public enum AttitudeType {
        Straight,        // 直滑降(通常時)
        Prone,           // 伏せ
    }

    [Header("現在のキャラの姿勢")]
    public AttitudeType attitudeType;


    private Rigidbody rb;

    private float x;
    private float z;

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

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

    private Vector3 proneRotation = new Vector3(-90, 0, 0);        // 伏せの姿勢の回転角度の値

    private float attitudeTimer;                                   // 姿勢変更が可能になるまでの計測用タイマー
    private float chargeTime = 2.0f;                               // 姿勢変更が可能になるまでのチャージ(待機)時間

    private bool isCharge;                                         // チャージ完了判定用。false は未完了(チャージ中)、true はチャージ完了

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

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

    [SerializeField]
    private Text txtScore;

    [SerializeField]
    private Button btnChangeAttitude;

    [SerializeField]
    private Image imgGauge;


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


    [SerializeField]
    private ShinyEffectForUGUI shinyEffect;


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


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

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

　　　　// 現在の姿勢を「直滑降」に変更(いままでの姿勢)
        attitudeType = AttitudeType.Straight;

　　　　// ボタンのOnClickイベントに ChangeAttitude メソッドを追加する
　　　　btnChangeAttitude.onClick.AddListener(ChangeAttitude);

　　　　// ボタンを非活性化(半透明で押せない状態)
        btnChangeAttitude.interactable = false;
    }

    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") {

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

            // 画面に表示されている得点表示を更新
　　　　　　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);
    }

    void Update() {

        // スペースキーを押したら
        if (Input.GetKeyDown(KeyCode.Space)) {

            // 姿勢の変更
            ChangeAttitude();
        }

　　　　// チャージ完了状態ではなく、姿勢が普通の状態
        if (isCharge == false && attitudeType == AttitudeType.Straight) {

            // タイマーを加算する = チャージを行う
            attitudeTimer += Time.deltaTime;

            // ゲージ表示を更新
            imgGauge.DOFillAmount(attitudeTimer / chargeTime, 0.1f);

            // ボタンを非活性化(半透明で押せない状態)
            btnChangeAttitude.interactable = false;

            // タイマーがチャージ時間(満タン)になったら
            if (attitudeTimer >= chargeTime) {

                // タイマーの値をチャージの時間で止めるようにする
                attitudeTimer = chargeTime;

                // チャージ状態にする
                isCharge = true;

                // ボタンを活性化(押せる状態)
                btnChangeAttitude.interactable = true;


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


                // 満タン時のエフェクト
                shinyEffect.Play(0.5f);


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

            }
        }

        // 姿勢が伏せの状態
        if (attitudeType == AttitudeType.Prone) {

            // タイマーを減算する = チャージを減らす
            attitudeTimer -= Time.deltaTime;

            // ゲージ表示を更新
            imgGauge.DOFillAmount(attitudeTimer / chargeTime, 0.1f);

            // タイマー(チャージ)が 0 以下になったら
            if (attitudeTimer <= 0) {

                // タイマーをリセットして、再度計測できる状態にする
                attitudeTimer = 0;

                // ボタンを非活性化(半透明で押せない状態)
                btnChangeAttitude.interactable = false;

                // 強制的に姿勢を直滑降に戻す
                ChangeAttitude();
            }
        }
    }

    /// <summary>
    /// 姿勢の変更
    /// </summary>
    private void ChangeAttitude() {

        // 現在の姿勢に応じて姿勢を変更する
        switch (attitudeType) {

　　　　　　// 現在の姿勢が「直滑降」だったら
            case AttitudeType.Straight:

                // 未チャージ状態(チャージ中)なら
                if(isCharge == false) {
   
                    // 以降の処理を行わない = 未チャージ状態なので、チャージ時の処理を行えないようにする
                    return;
                }

                // チャージ状態を未チャージ状態にする
                isCharge = false;

                // 現在の姿勢を「伏せ」に変更
                attitudeType = AttitudeType.Prone;

                // キャラを回転させて「伏せ」にする
                transform.DORotate(proneRotation, 0.25f, RotateMode.WorldAxisAdd);

                // 空気抵抗の値を上げて落下速度を遅くする
                rb.drag = 25.0f;

　　　　　　　　// ボタンの子オブジェクトの画像を回転させる
                btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 180), 0.25f);

                // 処理を抜ける(次の case には処理が入らない)
                break;

            // 現在の姿勢が「伏せ」だったら
            case AttitudeType.Prone:

　　　　　　　　// 現在の姿勢を「直滑降」に変更
                attitudeType = AttitudeType.Straight;

                // キャラを回転させて「直滑降」にする
                transform.DORotate(straightRotation, 0.25f);

                // 空気抵抗の値を元に戻して落下速度を戻す
                rb.drag = 0f;

　　　　　　　　// ボタンの子オブジェクトの画像を回転させる
                btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 90), 0.25f);

                // 処理を抜ける
                break;
        }
    }
}

　スクリプトの修正が終了したら、ヒエラルキーにある Penguin ゲームオブジェクトのインスペクターを確認します。
新しく追加した shinyEffect 変数が追加されているか確認してください。

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

３．Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に、ShinyEffectForUGUI がアタッチされているゲームオブジェクトをドラッグアンドドロップして登録する

　shinyEffect 変数に、ShinyEffectForUGUI スクリプトのアタッチされているゲームオブジェクトをドラッグアンドドロップしてアサインします。
どのゲームオブジェクトをスクリプトから操作したいのかをイメージしていてください。

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

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

　設定が完了しましたので、ゲームを実行してゲージを満タンにしてください。満タンになったときに１回だけ、キランと光るエフェクトが再生されれば制御成功です。
姿勢を変更してゲージを減らし、再度満タンにした場合にも同じように光ります。

　光ることが確認できたら、どういった光らせ方があるのかを、ShinyEffectForUGUI スクリプトの設定を操作して、色々と試してみてください。

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

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

　=>　次は　手順２１　－キャラのアニメ制御の同期を追加－　です。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school