(この記事の使用環境: Unity5.5.0f3 Personal、Windows10)
AnimationCurveプロパティを使って、UIイメージを動かしてみました。
静止画では分からないですね。動画はこんな感じ。
こんな感じで作りました。
スクリプトはこんな感じ。(GameOverイメージにアタッチしています)
今回は以上です。
AnimationCurveプロパティを使って、UIイメージを動かしてみました。
静止画では分からないですね。動画はこんな感じ。
- 炎のエフェクトは「Unity ゲームエフェクト入門 Shurikenで作る! ユーザーを引き込む演出手法」に沿って作成したものです。
- 「Game Over」の文字イメージはGIMPで自作しました!
こんな感じで作りました。
- UIのCanvasにGameOverの文字イメージと炎のパーティクルをそれぞれ配置しておく。
- Canvasの「Render Mode」を「ScreenSpace - Camera」にすると、キャンバスにParticle Systemをアタッチして動かすことができる。「ScreenSpace - Overlay」ではParticle Systemをアタッチしてもエフェクトが動かない。(「UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード
」で得た知識です)
- GameOverイメージはスタート時はアルファ値を0にして完全に透明にしておく。
- 炎のパーティクルはスタート時は非アクティブにしておく。
- 画面をクリックすると AnimationCurve の値にしたがってGameOverイメージの大きさと透明度が変化し、指定した秒数(2秒)後に固定される。固定されたタイミングで炎のパーティクルをアクティブにする。
AnimationCurveを使うことで、(複雑な計算抜きで)柔軟に値を動かすことができます。
スクリプトはこんな感じ。(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)
コメント