【Unity】TextMesh Pro の文字単位で DOTween のアニメーションを実装できる「CharTweener」紹介

はじめに

「CharTweener」を Unity プロジェクトに導入することで
TextMesh Pro の文字単位で DOTween のアニメーションを実装できるようになります

使用例

使い方

using CharTween;
using DG.Tweening;
using TMPro;
using UnityEngine;

[RequireComponent( typeof( TMP_Text ) )]
public class Example : MonoBehaviour
{
    private void Start()
    {
        var text = GetComponent<TMP_Text>();

        var tweener = text.GetCharTweener();
        var characterCount = tweener.CharacterCount;

        for ( var i = 0; i < characterCount; ++i )
        {
            var circleTween = tweener
                .DOCircle( i, 0.05f, 0.5f )
                .SetEase( Ease.Linear )
                .SetLoops( -1, LoopType.Restart )
            ;

            var colorTween = tweener
                .DOColor( i, Color.yellow, 0.5f )
                .SetLoops( -1, LoopType.Yoyo )
            ;

            var t = i / ( float )( characterCount - 1 );
            var fullPosition = Mathf.Lerp( 0, 1, t );

            circleTween.fullPosition = fullPosition;
            colorTween.fullPosition = fullPosition;
        }
    }
}

上記のようなコードを記述して使用します

注意

「CharTweener」を uGUI 版の TextMesh Pro で使用する場合、
下記のような文字の位置を変更する関数が正しく動きません

• DOCircle
• DOMove
• DOMoveX
• DOMoveY
• DOMoveZ
• DOLocalMove
• DOLocalMoveX
• DOLocalMoveY
• DOLocalMoveZ

uGUI 版の TextMesh Pro でも移動演出を実装したい場合は
CharTweener.cs の 242 行目の「CreateProxyTransform」関数の

var t = new GameObject().transform;

の部分を

var t = new GameObject().AddComponent<RectTransform>();

に変更し、CharTweener.Tweens.cs の末尾に

public Tweener DOAnchorPos( int charIndex, Vector2 endValue, float duration, bool snapping = false )
{
    var t = GetProxyTransform( charIndex ) as RectTransform;
    return MonitorTransformTween( t.DOAnchorPos( endValue, duration, snapping ) );
}

public Tweener DOAnchorPosX( int charIndex, float endValue, float duration, bool snapping = false )
{
    var t = GetProxyTransform( charIndex ) as RectTransform;
    return MonitorTransformTween( t.DOAnchorPosX( endValue, duration, snapping ) );
}

public Tweener DOAnchorPosY( int charIndex, float endValue, float duration, bool snapping = false )
{
    var t = GetProxyTransform( charIndex ) as RectTransform;
    return MonitorTransformTween( t.DOAnchorPosY( endValue, duration, snapping ) );
}

このような関数を定義します

そして、移動演出を実装するときには、これらの関数を使用します