わかゲームスタジオ

ゲーム制作初心者専門学生の備忘録

Unity UIアニメーションを使いまわしたい

今回はUnityでUI演出を作成するときに、よく使う演出(テキストの点滅とか)を使いまわす方法です。

とりあえずCanvasを作成し、AnimatorControllerをアタッチしたImageを4個作成しておきます。

f:id:WakaiGames:20201210070454p:plain

AnimatorControllerの中身はこんな感じです。
f:id:WakaiGames:20201210070806p:plain
 

①それぞれのAnimationを設定する

f:id:WakaiGames:20201210071653p:plain
ColorパラメータはRGBAをそれぞれ選択、Deleteで削除することができます。
こうすることで色の違うUIのAlpha値のみアニメーションさせたりできます。
f:id:WakaiGames:20201210071905p:plain
f:id:WakaiGames:20201210072238p:plain
f:id:WakaiGames:20201210072432p:plain

②実験用にAnimationを再生するスクリプトを書く

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

public class CallAnimation : MonoBehaviour
{
    private void Start()
    {
        //赤色を点滅させる
        transform.Find("ImageRed").GetComponent<Animator>().Play("ColorAnim");
        //青色を回転させる
        transform.Find("ImageBlue").GetComponent<Animator>().Play("RotationAnim");
        //緑色を拡大、縮小させる
        transform.Find("ImageGreen").GetComponent<Animator>().Play("ScaleAnim");
        //黄色を中央で上下させる
        transform.Find("ImageYellow").GetComponent<Animator>().Play("PositionAnim");
    }
}
このコードをCanvasにアタッチすると動くようになります。

こんな感じ↓

【わかゲームスタジオ】Unity UIAnimationSample

クリックで切り替わるようにしてみると、

【わかゲームスタジオ】Unity UIAnimationSampleChange

別のImageが同じAnimationを再生しても問題なく動作しているのがわかりますね。

こんな感じで、Animationから変更している値を持ったComponentを意識することでAnimationを使いまわし、同じようなAimationを作成する必要がなくなりますね。