テキスト表示を動かしたい

Question

こんにちは、テキストを表示してすこし動かすためにコードを書きました。
コードです。

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

public class StartCountTime : MonoBehaviour
{
    // レース開始の合図
    [SerializeField] private Text startCountNumber;
    private int orderNumbers = 3;

    void Start()
    {
        StartCoroutine(StartCountThreeTime(startCountNumber, 3));
    }

    /// <summary>
    /// レース開始の時間を三つ数える
    /// </summary>
    /// <returns></returns>
    private IEnumerator StartCountThreeTime(Text numberText,int displayNumbers)
    {
        if (numberText == null) {// null ならばコルーチンを抜ける

            yield break;
        }

        // 表示する文字
        numberText.text = displayNumbers.ToString();

        // 大小サイズを決めておく
        Vector3 initialSize = new Vector3(20, 20, 20);
        Vector3 minimumSize = new Vector3(2, 2, 2);

        var time = 0f;          // 時間を数える
        var countTime = 1;      // 時間を指定
        var size = 0f;          // テキストのサイズ
        var speed = 0.07f;      // テキストの縮小スピード
      

        numberText.enabled = true;

        // 文字を小さくする
        while (time <= countTime) {

            time += Time.deltaTime;
            numberText.transform.localScale = Vector3.Lerp(initialSize, minimumSize, size);
            size += speed;

            yield return null;
        }

        // 一応最小値をいれておく
        numberText.transform.localScale = minimumSize;

        var alpha = 1f;　// α値を設定

        // 文字が小さくなったならば、ゆっくり消える
        if (numberText.transform.localScale == minimumSize) {
            while(alpha >=0) {// α値を減らす

                alpha -= Time.deltaTime;
                numberText.color = new Color(numberText.color.r, numberText.color.g, numberText.color.b, alpha);

                yield return null;
            }
        }

        // 終わったら非表示
        numberText.enabled = false;

        // α値を戻す
        alpha = 1;

        // 次の文字へ
        orderNumbers--;

        // 2,3を表示
        switch (orderNumbers)  {

            case 2:
                StartCoroutine(StartCountThreeTime(numberText, orderNumbers));
                break;

            case 1:
                StartCoroutine(StartCountThreeTime(numberText, orderNumbers));
                break;
        }

        // コルーチンを抜ける
        yield break;



        /*
        表示が終わったら、何かで
        AIとPlayerに知らせて、動くようにする
        */
    }
}

やったこと

やりたいこととしましては、でかい文字から、小さい文字にして（最小値あり)透明度を低くして、消すのを
カウント式にやりたいです。大体はできたのですが、2,1 の表示が可笑しくなっています。なので処理が終わった後にα値に１を代入しているのですが、うまくいきません。どうかよろしくお願いします。

Answer 1

回答依頼ありがとうございます。

カウントダウンのアプローチについて

見た感じですが、スタート前のカウントダウンの処理でしょうか？

3、2、1、スタート！

を行うわけですね。

しかし、それをわざわざプログラムでやる必要はないと思います。
汎用性が必要であるならばまだしも、普通にカウントダウン用のアニメーションを作成し、それを再生した方が早いかと。

アニメーションにはイベント機能が備わっており、アニメーション依存で関数を呼ぶことも可能です。
試してみる価値はあるかと。

アニメーションイベントの使用

追記: カウントダウン処理

どうしてもプログラムで実装したいのであれば、仕方がありませんね…。

まず、繰り返しはforを使うといいと思います。
指定回数ループさせるのにはちょうどいい処理です。
forの中で大きさ変更、フェードアウトなどの処理を実装しましょう。

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

public class CountdownCoroutine : MonoBehaviour
{
    // レース開始の合図
    // [SerializeField] private Text startCountNumber;
    // private int orderNumbers = 3;

    // 変数名変更しました。
    [SerializeField] private Text counterText;
    [SerializeField] private int startCount = 3;
    [Space(5), Header("[ ! ] reduceTime + fadeTime + intervalTime = 1f になるように")]
    [SerializeField, Range(0, 1)] private float reduceTime = 0.5f;      // テキストの縮小に使う時間
    [SerializeField, Range(0, 1)] private float fadeTime = 0.4f;   // テキストのフェードアウトに使う時間
    [SerializeField, Range(0, 1)] private float intervalTime = 0.1f;   // 次のカウントに行くまでの待ち時間

    /// <summary>
    /// reduceTime、fadeTime、intervalTimeについて
    /// 
    /// 処理の基本としては、
    /// 1. テキストの大きさを縮小
    /// 2. テキストをフェードアウト
    /// 3. 少し待つ
    /// の繰り返しです。
    /// 
    /// なので、reduceTime、fadeTime、intervalTimeをすべて足して1になるようにしないと
    /// カウントダウンが1秒ごとにならないので気を付けてください。
    /// </summary>

    void Start() {
        // ↑せっかく変数を用意しているので、わざわざ引数を使う必要はない
        StartCoroutine("StartCountThreeTime");
    }

    /// <summary>
    /// レース開始の時間を三つ数える
    /// </summary>
    /* private IEnumerator StartCountThreeTime(Text numberText, int displayNumbers) {
        if (numberText == null) {// null ならばコルーチンを抜ける

            yield break;
        }

        // 表示する文字
        numberText.text = displayNumbers.ToString();

        // 大小サイズを決めておく
        Vector3 initialSize = new Vector3(20, 20, 20);
        Vector3 minimumSize = new Vector3(2, 2, 2);

        var time = 0f;          // 時間を数える
        var countTime = 1;      // 時間を指定
        var size = 0f;          // テキストのサイズ
        var speed = 0.07f;      // テキストの縮小スピード


        numberText.enabled = true;

        // 文字を小さくする
        while (time <= countTime) {

            time += Time.deltaTime;
            numberText.transform.localScale = Vector3.Lerp(initialSize, minimumSize, size);
            size += speed;

            yield return null;
        }

        // 一応最小値をいれておく
        numberText.transform.localScale = minimumSize;

        var alpha = 1f;　// α値を設定

        // 文字が小さくなったならば、ゆっくり消える
        if (numberText.transform.localScale == minimumSize) {
            while (alpha >= 0) {// α値を減らす

                alpha -= Time.deltaTime;
                numberText.color = new Color(numberText.color.r, numberText.color.g, numberText.color.b, alpha);

                yield return null;
            }
        }

        // 終わったら非表示
        numberText.enabled = false;

        // α値を戻す
        alpha = 1;

        // 次の文字へ
        orderNumbers--;

        // 2,3を表示
        switch (orderNumbers) {

            case 2:
                StartCoroutine(StartCountThreeTime(numberText, orderNumbers));
                break;

            case 1:
                StartCoroutine(StartCountThreeTime(numberText, orderNumbers));
                break;
        }

        // コルーチンを抜ける
        yield break;



        // 表示が終わったら、何かでAIとPlayerに知らせて、動くようにする
        
    }*/

    private IEnumerator StartCountThreeTime() {
        if (counterText == null) {// null ならばコルーチンを抜ける
            yield break;
            // エラーを想定できていていいと思います。
        }

        Debug.Log("カウントダウン開始");

        counterText.enabled = true;

        // startCount分繰り返す
        // startCountの大きさから1ずつ引いていくforで繰り返し
        for (var currentCount = startCount; currentCount > 0; currentCount--) {

            // テキスト表示を更新
            counterText.text = currentCount.ToString();

            // 2回目のカウント以降、アルファ値が変更後そのままなので大きさを変更する前にアルファ値もリセットしておく
            counterText.color = new Color(counterText.color.r, counterText.color.g, counterText.color.b, 1.0f);

            // 大きさ変更のコルーチン
            // yield return StartCoroutine()を使うことで、コルーチン処理が終わるまで待機できる
            yield return StartCoroutine("ReduceInSize");

            // フェードアウトのコルーチン
            yield return StartCoroutine("FadeOut");

            // 少しの間待待たないとすぐに次のカウントにいってしまい違和感がある
            yield return new WaitForSecondsRealtime(intervalTime);
        }

        Debug.Log("カウントダウン終了");

        // ここでレースのスタート処理
        Debug.Log("Go!");

        // 終わったら非表示
        numberText.enabled = false;

        // コルーチンを抜ける
        yield break;
    }

    private IEnumerator ReduceInSize() {
        Debug.Log("大きさ変更開始");

        // 大小サイズを決めておく
        // x, y, z がすべて一緒なのでfloat管理でいいと思います
        // Vector3 initialSize = new Vector3(20, 20, 20);
        // Vector3 minimumSize = new Vector3(2, 2, 2);
        float initialSize = 20;
        float minimumSize = 2;

        // 初期の大きさに設定
        // Vector3.one に floatをかけて大きさを調整
        counterText.transform.localScale = Vector3.one * initialSize;

        // テキストのサイズ調整用
        // このcurrentSizeを変動させて大きさを調整
        float currentSize = initialSize;

        // reduceTimeを直接いじると変数の値自体が変わってしまうので一時的に変数に格納
        float tmpReduceTime = reduceTime;
        // 文字を小さくする
        while (currentSize > minimumSize) {
            tmpReduceTime -= Time.deltaTime;   // 時間更新（徐々に減らす）
            currentSize = tmpReduceTime / reduceTime;   // 徐々に0に近づける
            currentSize *= initialSize;   // 上の二行の処理では、currentSizeが1→0になってしまうのでinitialSize(最大値)を掛ける
            currentSize = Mathf.Clamp(currentSize, minimumSize, initialSize);   //clamp
                                                                         
            // 大きさ変更
            counterText.transform.localScale = Vector3.one * currentSize;   // 減算したfloatをVector3.oneに掛ける

            yield return null;
        }

        // 一応最小値をいれておく
        counterText.transform.localScale = Vector3.one * minimumSize;

        yield break;
    }

    private IEnumerator FadeOut() {
        Debug.Log("フェードアウト開始");

        var alpha = 1f; // α値を設定

        // fadeTimeを直接いじる訳にはいかないので一時的に変数に格納
        float tmpFadeTime = fadeTime;

        // フェードアウト
        // α値を減らす
        while (alpha >= 0) {
            tmpFadeTime -= Time.deltaTime;
            alpha = tmpFadeTime / fadeTime;

            // アルファ値変更
            Color col = counterText.color;
            col.a = alpha;
            counterText.color = col;

            yield return null;
        }

        yield break;
    }
}

余談: Time.deltaTimeの使いどころ

パッとコードを見た感じ、Time.deltaTimeを使っていないように見えます。
unityのTime.deltaTimeはハードのスペック差を埋める大切なものです。

例えば、1秒間に120回ゲームを更新できるハイスペックPCと、1秒間に10回しかゲームを更新できないロースペックPCがあるとします。
その2台のPCで以下の処理を行うとします。

void Update () {
    transform.position += Vector3.up;
}

ハイスペックPCだとUpdate()が1秒間に120回呼ばれますが、ロースペックPCだとUpdate()は1秒間に10回しか呼ばれません…。
そうなると、実行結果にスペック差によるズレが生じてしまいます。
これを埋めるために、

void Update () {
    transform.position += Vector3.up * Time.deltaTime;
}

というようにしてスペック差によるズレを抑えています。
なので、簡潔に言うと、スペック差でズレて欲しくないものにはTime.deltaTimeを掛けると良いかもしれません。

まぁ、詳細は調べていただいて…。

Comments

[Um_kok]

回答ありがとうございます。
確かにUIのアニメーションのアニメーションを作ったほうが好ましいし、楽なのかもしれませんね。
ですが、せっかく教えてもらったのに申し訳ないのですが、貴方様がよろしければ、私はコードで書きたいです。何故ならば、私はコードの理解が曖昧です。なので、コードをきっちり理解したいです。最近コルーチンを使い始めたのですが、すごく便利で使っていて面白いので、もっと理解を深めたいと思っております。あと、今その解決方法がわかれば、今後のプログラムにも活かせるし、原因が分からなくて、もやもやしてしまいます。どうか宜しければ、コードで教えてもらえないでしょうか？どうかお願いします。

[PinoMatcha]

回答に追記しました。

[Um_kok]

お返事遅れました。オンライン授業があったため、遅れました、、、
コードありがとうございます。大変見やすかったです。
Spaceアトリビュートは使ったことなかったので、今後は使ってみようと思います。
yield return StartCoroutine　なんてのもあるんですね。勉強になりました。
すこし難しかったところを理解を深めるため質問させていただきます。

ReduceInSize() のwhileの中身の
currentSize = tmpReduceTime / reduceTime;
currentSize *= initialSize; が何をやっているのかが余り良く分かりませんでした。なぜreduceTime で割ったり、initialSize で掛けたりしているのかを教えてもらいたいです。
あと、StartCountThreeTime() の
yield return new WaitForSecondsRealtime(intervalTime);　は何故、WaitForSecondsRealtime 何でしょうか？　　調べさせてもらったのですが、スケール化されてない時間、コルーチンを一時停止する、と書いてありましたが、良くわかりませんでしたWaitForSeconds は使ったことがあるのですが、何が違うのでしょうか？

[PinoMatcha]

【currentSizeの処理について】
float tmpReduceTime = reduceTime;
で、時間を所持する一時的な変数を用意しています。
そしてそれを徐々に減らしていくのが
tmpReduceTime -= Time.deltaTime;
の処理です。
tmpReduceTime / reduceTimeは、最大値から徐々に減るtmpReduceTimeを最大値(reduceTime)で割ることで、1から0で『割合』を求めています。
それをcurrentSizeに格納しています。
しかしcurrentSizeをそのまま使うと、次のClamp処理で0でも1でも引っ掛かり、強制的に最小値の2になってしまいます。
すなわち、大きさ変更の処理が終わってしまうため0~1の割合であるcurrentSizeに文字の最大値を掛けることで0~20に変換しています。
それをテキストの大きさとして使っているのです。

【WaitForSecondsRealtimeについて】
unityでは、Time.timeScaleをいじることでゲーム時間を変更することができます。
Time.timeScale = 0.1f;
と記述するとスローモーションを表現できたりするわけです。
そのTime.timeScaleの時間の流れの変更に影響されないのが、
WaitForSecondsRealtimeです。
なのでまぁ正直、Time.timeScaleをいじらないのであればどっちでも大丈夫です。

[Um_kok]

分かりやすい説明ありがとうございます。
私の解釈だと、、
つまり、（最大値　ー　値）　/ 最大値　= 割合 ということで
割合は　0～１の間、　0～1の間だと、clamp で２が返ってくるため
それじゃまずいので、文字のスケール初期値(最大値)をかけてやって　
0～20にして、そのままテキストの大きさに代入できる形にしている。

WaitForSecondsRealtime は Time.timeScale をいじることで、ゲーム内の時間の流れを調整できる（Time.timeScale=0)ならば時間が止まる。
ということですね！
こんな私に、すごく丁寧なご説明ありがとうございます。
PinoMatchaさんのおかげで理解することができました！ありがとうございます。
Time.deltaTime なども調べてみます。
本当にありがとうございました。また、調べて,そのあと試行錯誤して分からなかったこと、困った事があったときに
頼らせてもらいます。ありがとうございました。

[PinoMatcha]

解決できたようで何よりです。

ただ、『解決済み』へ変更をお願いします……。

[Um_kok]

ベストアンサーにしました。すみません。忘れていました。
何故か、ネット環境が悪かったのか、できておりませんでした。
解決してくださってありがとうございました。