【Unity】カウントダウンの作り方

概要

このようなよくあるカウントダウンをDOTweenを使って実装した方法を書きました。

環境

Unity 2019.1.3f1

DOTween 1.2.235

コード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using TMPro;

public class CountDownPlayer : MonoBehaviour
{
    private TextMeshProUGUI textMeshPro;

    private CanvasGroup canvasGroup; 

    private void Start()
    {
        textMeshPro = this.GetComponent<TextMeshProUGUI>();

        canvasGroup = this.GetComponentInParent<CanvasGroup>();

        PlayCountDown();
    }

    private void PlayCountDown()
    {
        var sequence = DOTween.Sequence();

        sequence
            .OnStart(() => UpdateText("3"))
            .Append(FadeOutText())
            .AppendCallback(() => UpdateText("2"))
            .Append(FadeOutText())
            .AppendCallback(() => UpdateText("1"))
            .Append(FadeOutText())
            .AppendCallback(() => UpdateText("START"))
            .Append(FadeOutText())
            .OnComplete(() => Debug.Log("Do something"));
    }

    //テキストの更新
    private void UpdateText(string text)
    {
        InitializeAlpha();

        textMeshPro.text = text;
    }

    //フェードアウトさせる
    private Tween FadeOutText()
    {
        return canvasGroup.DOFade(0, 1.0f);
    }

    //アルファ値の初期化
    private void InitializeAlpha()
    {
        canvasGroup.alpha = 1.0f;
    }
}

補足

ここでは、とある別々のGameObjectが2つあることを想定しています。

1つは空のオブジェクトにCanvasGroupコンポーネントがアタッチされているだけのGameObjectです。(ここではStartUIという名前を付けます)

もう１つはTextMeshProUGIコンポーネントがアタッチされており、カウントダウンの数字を表示するためのGameObjectです。(ここではCountDownTextと名前を付けます)

この2つのGameObjectの関係は親子です。StartUIが親でCountDownTextが子です。

参考

• DOTweenをふわっとまとめてみた

• CanvasGroupとDoTweenでお手軽フェードイン・フェードアウト