みんなでUnity Timelineを使っていこう！

自粛生活に慣れ、家から出なくなってしまった東京スタジオでクライアントエンジニアを担当している本多です。
今回は以下を紹介します。

UnityのTimeline機能
コルーチンで実装するケースと比較をしたサンプルコード

Timelineとは？

Timelineはシーケンス(一連の流れ)を管理する機能となります。

以下画面サンプルです。

個人的には見た目やTimelineで調整している時は動画編集と似ているなと思います！

Timelineの特徴

「この演出の○秒後にこの演出を出す」といった実装をコード(コルーチンなど)を書かずに実装できる
演出の一連の流れをエンジニアでなく、デザイナーでも調整ができる
Timelineはカメラやアニメーターを持つ複数のキャラ、パーティクルシステム、オーディオなど、シーン中のいろいろなものを総合的に管理できる

一連の流れの実装をコードからTimelineに

実装内容

0.5秒後にフェードアウトアニメを再生
フェードアウトアニメ再生終了後、0.5秒後にフェードインアニメを再生

最終的に実装すると以下のような見た目になります！(最初ちらついてしまうので、Imageオブジェクトのalphaを0にしておくと良いです)

実装

コードでの実装

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

public class SampleAnimationScript : MonoBehaviour
{
    [SerializeField] Animator animator;
    [SerializeField] Image image;

    void Start()
    {
        StartCoroutine(SampleSequence());
    }

    IEnumerator SampleSequence()
    {
        // ちらつき防止のため最初alphaを0にしておく
        var color = image.color;
        image.color = new Color(color.r, color.g, color.b, 0f);

        // 1. 0.5秒後にフェードインアウトを再生
        yield return new WaitForSeconds(0.5f);
        yield return StartCoroutine(WaitAnimationEnd("FadeOut"));

        // 2. フェードアウトアニメ再生終了後、0.5秒後にフェードインアニメを再生
        yield return new WaitForSeconds(0.5f);
        yield return StartCoroutine(WaitAnimationEnd("FadeIn"));
    }

    IEnumerator WaitAnimationEnd(string animationTriggerName)
    {
        animator.SetTrigger(animationTriggerName);
        yield return null; // AnimationのState反映はLateUpdateなので1フレ必要です

        while (true)
        {
            var stateInfo = animator.GetCurrentAnimatorStateInfo(0);
            if (stateInfo.normalizedTime >= 1f) break;
            yield return null;
        }
    }
}

Timelineでの実装

UnityのProjectタブで右クリック→Create→Timelineを実行
ImageオブジェクトにTimelineを使用するためのPlayableDirectorをAddComponentし、Playable Directorの「Playable」に作成したTimelineをアタッチ
TimelineのウィンドウでAnimator Trackを作成し、ProjectタブからフェードアウトアニメとフェードインアニメをAnimator Track内にドラッグ&ドロップ

やり方は他にもたくさんありますが、今回はこのような実装にしました！
コードだと実装が少し大変ですが、Timelineだとコンパクトに実装できるので良いですね！

おわりに

今回はUnityのTimelineについて説明、簡単な実装を行いました。
シーケンスを管理する処理をコードで実装するとなると複雑になったり、「こことここの間を少し調整したい」といった挑戦に都度エンジニアのコストがかかり大変です。
しかし、Timelineを使うことでエンジニア以外でも調整できるようになるのでハッピーになりますね！
皆さんもシーケンス実装などを行う際は是非Timelineの導入をしてみてください！