【Unity】スライドショー的なエンディングシーンの作り方

現在私は「風のレンズ」というサウンドノベルのゲーム開発を行っているのですが、同じようにノベルゲームのエンディングの作り方で困っている方に参考にしてもらえればと思います。

【Unity】スライドショー的なエンディングシーンの作り方
1. 作り方

【Unity】スライドショー的なエンディングシーンの作り方

まずは、どのようなものか見てもらえればと思います。

こんな感じで、５秒経過するたびに次の画像に自動で切り替わるような仕組みですね。

作り方

作り方は簡単で、Canvasを用意してその中にRawImage１つ、Imageを１つそれぞれ用意します。Imageは名前をSlideImageにしまし。

それぞれ全体を覆うようにして、Stretchにします。またRawImageの方はColorを黒にします。

SlideImageだけでも機能するんですが、フェードイン・アウトする際に後ろの何もないシーンが映りこんでしまうのでその対策として、真っ黒の画面を作っています。

Canvasにはフェードを行いたいのでCanvasGroupコンポーネントをアタッチします。

EndSequenceController.csスクリプトを作成↓

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

public class EndSequenceController : MonoBehaviour
{
    [Header("Slides")]
    public List slides = new List(); // 表示順
    [Header("Durations (sec)")]
    public float showSeconds = 5f;       // 1枚の静止時間
    public float fadeSeconds = 1f;       // フェード時間
    [Header("Routing")]
    public string titleSceneName = "Title"; // タイトルシーン名
    [Header("Options")]
    public bool autoStart = true;
    public bool allowSkip = true;         // クリック/ESCで即タイトルへ
    public AnimationCurve fadeCurve = AnimationCurve.EaseInOut(0,0,1,1);

    Image _image;
    CanvasGroup _cg;
    bool _skipping;

    void Awake()
    {
        _image = GetComponent();
        _cg = GetComponent();
        if (_cg == null) _cg = gameObject.AddComponent();
        _cg.alpha = 0f;
    }

    void Start()
    {
        if (autoStart) StartCoroutine(RunSequence());
    }

    void Update()
    {
        if (!allowSkip) return;
        if (Input.GetKeyDown(KeyCode.Escape) || Input.GetMouseButtonDown(0) || Input.GetKeyDown(KeyCode.Return))
        {
            if (_skipping) return;
            _skipping = true;
            StopAllCoroutines();
            StartCoroutine(FadeToBlackAndGotoTitle());
        }
    }

    IEnumerator RunSequence()
    {
        if (slides == null || slides.Count == 0)
        {
            yield return FadeToBlackAndGotoTitle();
            yield break;
        }

        for (int i = 0; i < slides.Count; i++)
        {
            _image.sprite = slides[i];

            // フェードイン
            yield return Fade(0f, 1f, fadeSeconds);

            // 静止
            yield return new WaitForSeconds(showSeconds);

            // 最終枚でなければフェードアウト
            if (i < slides.Count - 1)
                yield return Fade(1f, 0f, fadeSeconds);
        }

        // 最後は黒に落としてタイトルへ
        yield return Fade(1f, 0f, fadeSeconds);
        yield return FadeToBlackAndGotoTitle();
    }

    IEnumerator Fade(float from, float to, float duration)
    {
        float t = 0f;
        while (t < 1f)
        {
            t += Time.deltaTime / Mathf.Max(0.0001f, duration);
            float v = Mathf.Lerp(from, to, fadeCurve.Evaluate(t));
            _cg.alpha = v;
            yield return null;
        }
        _cg.alpha = to;
    }

    IEnumerator FadeToBlackAndGotoTitle()
    {
        // 念のため真っ黒へ
        _image.color = Color.black;
        _image.sprite = null;         // 画像を消して黒一色
        _cg.alpha = 1f;
        yield return new WaitForSeconds(0.2f);
        SceneManager.LoadScene(titleSceneName);
    }
}

このスクリプトを、SlideImageにアタッチします。