DOTweenでテキストをタイピングみたいに1文字ずつ表示|Unityゲーム制作

今回はUnity2Dゲームで「テキスト文字を1文字づつ表示する」をDOTweenを利用して実装していきます。メッセージダイアログとかにも使える感じです。

はじめに

Unityのバージョンは2021.3.14f1です。

まずはDOTWeenのアセットを追加します。下記記事にてDOTweenの追加方法を書いてます。

実装開始

見た目を簡単に作成した後に、スクリプトで実装していきます。

UI作成

「UI」→「Legacy」→「Text」を追加します。

位置やサイズなどを変更してテキストの中身を空にしておきます。

スクリプト作成

下記スクリプトを作成します。3秒かけて指定した文字を表示しています。

using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class textmanager : MonoBehaviour
{
    [SerializeField] private Text _text;

    private void Start()
    {
        _text.DOText("SAMPLE TEXT", 3);
    }
}

スクリプトを追加して、パラメータをセットします。今回はカメラにスクリプトを追加しています。

試しに実行すると下記のような感じになります。

スクリプトを変更

文字を表示するスピードを一定間隔にするため、「.SetEase(Ease.Linear)」を追記します。

using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class textmanager : MonoBehaviour
{
    [SerializeField] private Text _text;

    private void Start()
    {
        _text.DOText("SAMPLE TEXT", 3).SetEase(Ease.Linear);
    }
}

「DOtext」の各パラメータは下記のような感じです。

Text.DOText(string endValue                                // 表示する文字列
           ,float duration                                 // 表示にかかる時間
           ,[bool richTextEnabled=true]                    // リッチテキストが有効か無効か
           ,[ScrambleMode scrambleMode=ScrambleMode.None]  // 文字表示されていない場所にランダム文字表示
           ,[string scrambleChars=null])                   // ランダム文字表示で指定する文字

ScrambleModeは下記の中から指定します。Custom時はパラメータをセットします。

• None : 文字を表示しない
• All : A-Z,a-z,0-9の中からランダムで表示
• Uppercase : A-Zの中からランダムで表示
• Lowercase : a-zの中からランダムで表示
• Numerals : 0-9の中からランダムで表示
• Custom : 指定した文字からランダム表示

下記のようにセットすると「文字を斜めに表示、まだ文字が表示されていない場所にはランダム文字を表示」します。

using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class textmanager : MonoBehaviour
{
    [SerializeField] private Text _text;

    private void Start()
    {
        _text.DOText("<i>SAMPLE TEXT</i>", 3, true, ScrambleMode.All).SetEase(Ease.Linear);
    }
}

実行してみると、下記のような動きになります。