【Unity】DOTweenを使ってTextMeshをフェードアウトさせる - 原カバンは鞄のお店ではありません。

長雨

ここ最近ずっと雨の天気で、コロナウイルスもこの雨と一緒に流れ去ってほしいと願っている皆さん、こんにちは。
コロナ禍でどこにも行けないと嘆いていたら、今度は長雨でどこにも行けない。休みの日はほぼずっとBeatSaber三昧ですよ。

TextMeshProとDOTween

さて、TextMeshProがUnityに標準搭載されてから随分と立ちます。TextMeshProの利点といえば、拡大しても文字がボヤけることがない事や、装飾のオプションが豊富な事が挙げられますが、DOTweenにTextMeshPro用の拡張メソッドの提供されていることもその一つと言えます。(DOTweenPro版のみ)

DOScale:文字の大きさを変更する
DOFontSize:文字のフォントサイズを変更する
DOFade:文字をフェードイン/アウトさせる
DOFaceFade:文字のFace(塗り)箇所をフェードイン/アウトさせる
DOColor:文字色を変化させる
DOFaceColor:文字のFace(塗り)の色を変化させる
DOGlowColor:文字のGlow(光沢)の色を変化させる
DOOutlineColor:文字のアウトラインの色を変化させる
DOText：文字を1文字ずつ表示する
DOMaxVisibleCharacters：表示文字数を変化させる

ざっと上げてもこれだけ機能があります。

というわけで使ってみる

実際に作成中の脱出ゲームで上記のメソッドを利用したUIを作ってみました。

イベント等が起こった時に表示するメッセージをFaceのフェードアウトとOutLineの色変更を実行しています。

f:id:Karvan:20200714222349g:plain

ソースはこんな感じ。

public Color EndColor;

TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
MsgSeq = DOTween.Sequence();

MsgSeq.Join(
    text.DOFaceFade(0.0f, 3.0f)
    );
MsgSeq.Join(
    text.DOOutlineColor(EndColor, 3.0f).SetDelay(0.5f)
    );

非常に短いコードで実装できました。

これにDOMaxVisibleCharactersで表示文字数を徐々に減らしていくようにすると

MsgSeq.Append(
    text.DOMaxVisibleCharacters(0, 3.0f)
    );
MsgSeq.Join(
    text.DOFaceFade(0.0f, 3.0f)
    );
MsgSeq.Join(
    text.DOOutlineColor(EndColor, 3.0f).SetDelay(0.5f)
    );

こんな感じ

f:id:Karvan:20200714222745g:plain

センスがあればもっとおしゃれな演出も作ることができると思います。