[Unity] TextMeshProで生成したテキストをDOTween(Pro)を使って動かす #Unity

この記事は Unity アセット真夏のアドベントカレンダー 2017 の8/19の記事となります。

昨日は baba_s さんによる「Hierarchy を拡張する多機能アセット「PRO Hierarchy + Memory Monitoring + Navigator for Selecting」紹介」でした。

実行環境

Unity 2017.2.0b5
DOTween v1.1.600
DOTweenPro v0.9.685
TextMeshPro 1.0.55.xx.0b12

はじめに

自分は普段ゲーム上で動きをつけるとき、 DOTween を愛用しています。
DOTween自体に関しては、過去に以下のような記事を書きました。

さて、DOTweenを普段使用している人は多いと思いますが、DOTweenProはどうでしょうか。

DOTweenPro は $16.20 で販売しているアセットです。
Unityエッセンシャルパックの2Dにも含まれていました。
今回は DOTween と DOTweenPro の違いの話、Unity側への統合を踏まえ、最近無料化された TextMeshPro と組み合わせた演出の話を記載しようと思います。

DOTweenProについて

DOTweenに出来なくて
DOTweenProに出来ることは、例えば以下のようなものがあります。

ビジュアルアニメーションエディタ (DOTweenAnimation)

コードを記載しなくてもTweenを適応することができます。
複数の DOTweenAnimation をアタッチすることで Sequence 相当の役割を持つことも可能です。

ビジュアル進路エディター (DOTweenPath)

パスを指定することで、そのパスを経由するようにオブジェクトを動かすことができます。

TextMeshProについて

TextMeshPro はUnity標準のuGUIに比べ、よりリッチなスタイリングが可能で、かつズームしても滑らかに表示させることのできるテキストを作成することができるアセットです。

例えば、滑らかなアウトラインを適応することが出来たり
カーニング(文字間隔)を設定できたり
Materialを適応させたりすることが出来ます。

以下の資料が詳しいです。
【Unity道場 2017】TextMesh Pro を使いこなす！

TextMeshProで生成したテキストにTweenを適応する

DOTweenProのもう一つの特徴として、TextMeshPro用の拡張メソッドの提供があります。
http://dotween.demigiant.com/documentation.php#textMeshProShortcuts
具体的にいくつか例を見て行きましょう。

文字の大きさを変更する

.DOScale() か .DOFontSize()を使用します。
.DOScale() を使用した場合、文字のレイアウト(改行)は崩れません。

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        this.GetComponent<TextMeshProUGUI>()
            .DOScale(1.2f, 1.0f)
            .SetLoops(-1, LoopType.Yoyo)
            .Play();
    }
}

.DOFontSize() を使用した場合、文字の描画領域はそのままにフォントサイズが変更されるので、 Warpping & Overflow における設定に準拠して挙動が変わります。以下は Truncate を指定して、描画領域に納める例です。描画領域の外に出た文字列が切り取られています。

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>(); 
        text.DOFontSize(text.fontSize * 1.5f, 1.0f)
            .SetLoops(-1, LoopType.Yoyo)
            .Play();
    }
}

文字をフェードイン/アウトさせる

文字全体をフェードイン/アウトさせるのであれば .DOFade() を使用します。

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        this.GetComponent<TextMeshProUGUI>()
            .DOFade(0.0f, 1.0f)
            .SetLoops(-1, LoopType.Yoyo)
            .Play();
    }
}

文字の塗り(Face)箇所だけフェードイン/アウトさせるのであれば .DOFaceFade() を使用します。

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        this.GetComponent<TextMeshProUGUI>()
            .DOFaceFade(0.0f, 1.0f)
            .SetLoops(-1, LoopType.Yoyo)
            .Play();
    }
}

文字の枠(Outline)箇所だけフェードイン/アウトさせるのであれば、 .DOOutlineColor() でα値を変更します。

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
        Color transparentColor = text.outlineColor;
        transparentColor.a = 0.0f;

        text.DOOutlineColor(transparentColor, 1.0f)
            .SetLoops(-1, LoopType.Yoyo)
            .Play();
    }
}

文字を1文字ずつ表示/変更させる

文字を1文字ずつ表示させるのであれば .DOMaxVisibleCharacters を使います。
TextMeshProは maxVisibleCharacters プロパティに設定された値の文字数のみ、文字が描画されます。事前に0を代入し、未表示な状態にした上で、現在入力されている文字数をTweenで受け渡します。

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
        text.maxVisibleCharacters = 0;  
        text.DOMaxVisibleCharacters(text.text.Length, 3.0f).Play();
    }
}

.DOText() を使用することで現状表示されている文字を1文字ずつ、指定した文字列に置き換えることが可能です。上の1文字ずつ出現する処理も、初期文字列を空文字にすることで実現できます。
(この辺りは UI.Text.DOText() と同じ挙動)

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    [Multiline]
    public string FromText;

    [Multiline]
    public string ToText;

    void Start()
    {
        TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
        text.text = this.FromText;
        text.DOText(this.ToText, 3.0f).Play();
    }
}

文字間隔を広げる

文字間隔の調整は DOTweenPro での拡張メソッド群に含まれていないので、独自に拡張メソッドを記載します。
(これは無償版のDOTweenでも対応可能)

TextMeshProExtesion

using DG.Tweening;
using TMPro;

public static class TextMeshProExtesion
{
    public static Tween DOCharacterSpacing(this TextMeshProUGUI textMeshProUgui, float amount, float duration)
    {
        return DOTween.To(() => textMeshProUgui.characterSpacing, x => textMeshProUgui.characterSpacing = x, amount, duration);
    }
}

TweenTextMeshProSample

using UnityEngine;
using DG.Tweening;
using TMPro;

[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
    void Start()
    {
        this.GetComponent<TextMeshProUGUI>()
            .DOCharacterSpacing(30, 2.0f)
            .SetLoops(-1, LoopType.Yoyo)
            .Play();
    }
}

UI.Maskと組み合わせて金属感を出す

TextMeshPrpはuGUIにも対応しています (TextMeshProUGUI)。
こちらは UI.Graphic を継承しているため、 Maskコンポーネントを適応することが可能です。TextMeshProで生成したテキストに光沢のようなImageを重ね、それをDOTweenで動かすことで、金属のような見栄えを作ることが出来ます。
(これは無償版のDOTweenでも対応可能)

最後に

上記の動きを組み合わせて、こんな感じの演出を作ることができました。
(もっといい感じのものを作るセンスが欲しかった)

明日の Unity アセット真夏のアドベントカレンダー 2017 は SASE さんの「【Unity】Pixel Art風な見た目にするアセット Stylizer - Extended」です！

この作品はユニティちゃんライセンス条項の元に提供されています