(この記事の使用環境: Unity5.5.0f3 Personal、Windows10


AnimationCurveプロパティを使って、UIイメージを動かしてみました。

SnapCrab_NoName_2017-3-19_22-22-36_No-001

静止画では分からないですね。動画はこんな感じ。




こんな感じで作りました。
  • UIのCanvasにGameOverの文字イメージと炎のパーティクルをそれぞれ配置しておく。
  • Canvasの「Render Mode」を「ScreenSpace - Camera」にすると、キャンバスにParticle Systemをアタッチして動かすことができる。「ScreenSpace - Overlay」ではParticle Systemをアタッチしてもエフェクトが動かない。(「UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード 」で得た知識です)
    SnapCrab_NoName_2017-3-19_22-56-9_No-00
  • GameOverイメージはスタート時はアルファ値を0にして完全に透明にしておく。
  • 炎のパーティクルはスタート時は非アクティブにしておく。
  • 画面をクリックすると AnimationCurve の値にしたがってGameOverイメージの大きさと透明度が変化し、指定した秒数(2秒)後に固定される。固定されたタイミングで炎のパーティクルをアクティブにする。

    AnimationCurveを使うことで、(複雑な計算抜きで)柔軟に値を動かすことができます。
    SnapCrab_NoName_2017-3-19_22-39-56_No-00

スクリプトはこんな感じ。(GameOverイメージにアタッチしています)

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

// --- GameOverイメージをAnimationCurveで動かす ------------------------------
public class gameOverImage : MonoBehaviour
{
    public GameObject eff_fire;     // 炎のパーティクルオブジェクト

    public AnimationCurve curve;    // アニメーションカーブ

    float startTime;                // クリックしたときの時間
    float duration = 2f;            // アニメーションする時間(秒)

    bool isGameOver = false;        // ゲームオーバーフラグ
    bool animationEnd = false;      // アニメーション終了フラグ

    CanvasRenderer canvasRenderer;  // CanvasRendererコンポーネント


    // ---  初期化 -------------------------------------------
    private void Start ()
    {
        canvasRenderer = GetComponent<CanvasRenderer> ();
        canvasRenderer.SetAlpha (0f);       // 透明にしておく

        eff_fire.SetActive (false);         // 非アクティブにしておく
    }


    // ---  更新処理 -------------------------------------------
    private void Update ()
    {
        // マウスクリックで処理開始
        if (Input.GetMouseButtonDown (0))
        {
            startTime = Time.time;
            isGameOver = true;
        }

        // アニメーション処理
        if (isGameOver && !animationEnd)
        {
            // アニメーションカーブをTime.timeで動かし、値を取得する
            float curveValue = curve.Evaluate (( Time.time - startTime ) / duration);
            float scale = curveValue * 2;

            // アニメーションカーブから取得した値を使って、イメージのスケールと透明度を変更する
            transform.localScale = new Vector3 (scale, scale, scale);   // イメージのスケール変更
            canvasRenderer.SetAlpha (curveValue);                       // イメージの透明度変更

            // アニメーションカーブの値が1(=この例では終了)になったら炎のパーティクルをアクティブにする
            if (curveValue >= 1f)
            {
                animationEnd = true;
                eff_fire.SetActive (true);
            }
        }
    }
}


今回は以上です。
(管理情報: TEXTBOOK > GameEffectNyumon > GameEffectNyumon_01 > Chapter8_5_Demo