Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【DOTween】DOText 開発メモ まとめ【Unity】

TextMeshProとDOTweenを使って開発する時の自分用メモです。
最近DOTextをさわる機会が多いので、やったことなどをまとめておきます

DOTextの表示速度を一定にする方法と、タップされたら即座に表示する方法~などなど。

 

 

8月1日
他にもいくつかメモを追加しました

 

 

 

DOTextについてはこちら。

kan-kikuchi.hatenablog.com

www.hanachiru-blog.com

 

 

 

開発環境

Unity 2020.1.0f

Text Mesh Pro v3.0.1

DOTween Pro v1.0.244

 

 

前提

DOTweenをTextMeshProで使うにはDOTween PRO(有料版)が必要です。
また、最初のセットアップ時にTextMeshProのモジュールを追加する必要があります。

f:id:Raspberly:20200731001945p:plain

知らないうちにDeAudioとDeUnityExtendedというのが新しく追加されていますね。

 

 

 

 

---------ここから本題---------

1. デフォルトのEaseタイプを変える

DOTextに関わらず、DOTweenはSetEaseでEaseタイプを設定できますが、
何も設定されていない場合はOutQuadになります

 

解決方法

ユーティリティパネルから変更できます。

UnityEditorのTools/Demigiant/DOTween Utility Panelから開くことができます。

f:id:Raspberly:20200801010528p:plain

パネルが表示されたら、右上のPreferencesを押します。

f:id:Raspberly:20200801010644p:plain

すると様々な設定を変更できるようになるので、Easeからデフォルトに設定したいEaseを設定しましょう。

f:id:Raspberly:20200801010756p:plain



 

 

 

 

 

 

2. テキスト表示速度を一定にする

DOTextは第二引数の値でduration(持続時間)を設定できます。
持続時間とは表示を完了するまでの時間です。つまり、このdurationは表示速度ではありません

        TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();
        string mes = "これは1つ目のメッセージです。\n約25文字あります。";
        tmpro.DOText(mes, 10);
        TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();
        string mes = "これは2つ目のメッセージです。\n1つ目から10文字も増え約35文字になります。";
        tmpro.DOText(mes, 10);
        TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();
        string mes = "これは3つ目のメッセージです。\n2つ目から更に文字数が増えてしまい、\nなんとだいたい50文字まであります。";
        tmpro.DOText(mes, 10);

durationが同じ値であっても、文字数が25と50の場合では表示速度に差が出てしまいます
同じタイミングで表示を終了させたい場合はこれでもいいかもしれませんが。

f:id:Raspberly:20200730030230g:plain

解決方法

文字数を考慮した第二引数を与えると解決します。
文字数 * 1文字の表示時間 を代入しましょう。1文字あたり0.1秒で表示します。

        tmpro.DOText(mes, mes.Length * 0.1f);

 

f:id:Raspberly:20200730030152g:plain

 

 

 

 

 

3. 表示中にタップされたら即座に表示させる

やりたいこと

DOTextで表示中に画面がタップなりクリックされたらTweenを終了し即座に文字を表示したい。

解決方法

タップされたらKillを呼んでtextに即座に書き込む
KillはTweenを即座に終了させるコマンドです。あとはそのままtextに書き込んで終わり!

    TextMeshProUGUI tmpro;
    string[] mes = new string[3];
    int mesNum = 0;
    string mesText;

    void Start()
    {
        tmpro = GetComponent<TextMeshProUGUI>();
        mesNum = 0;
        mes[0] = "これは1つ目のメッセージです。\n約25文字あります。";
        mes[1] = "これは2つ目のメッセージです。\n1つ目から10文字も増え約35文字になります。";
        mes[2] = "これは3つ目のメッセージです。\n2つ目から更に文字数が増えてしまい、\nなんとだいたい50文字まであります。";
    }


    //画面とかタップされたらよばれる関数
    public void OnDown()
    {
        //tmproがTweenしているかどうか
        if(DOTween.IsTweening(tmpro))
        {
            //Tween中なら即終了
            tmpro.text = mes[mesNum - 1];
            tmpro.DOKill();
        }
        else
        {
            if(mesNum > mes.Length - 1) return;
            mesText = mes[mesNum];
            //一度textを無にしてから書き込もうね
            tmpro.text = "";
            tmpro.DOText(mes[mesNum], mes[mesNum].Length * 0.1f);
            mesNum++;
        }
    }

 

f:id:Raspberly:20200801002620g:plain

 

 

 

 

4. 文字列を不規則に揺らす

参考元

game-ui.net

 

Undertaleで見た・・・ような気がする演出。
似たような機能をピンポイントで実装する機会があったので、Undertale風にして書き残します。

f:id:Raspberly:20200730005608g:plain

以下コード

    void Start ()
    {
        TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();
        DOTweenTMPAnimator tmproAnimator = new DOTweenTMPAnimator(tmpro);
        Sequence seq;

        for(int i = 0; i < tmproAnimator.textInfo.characterCount; ++i)
        {
            // '*'は揺らさないよ
            if(tmpro.textInfo.characterInfo[i].character == '*') continue;

            //文字ごとにSequenceを作る
            seq = DOTween.Sequence();
            seq.SetDelay(Random.Range(3f, 6f));
            seq.Append(
                tmproAnimator.DOShakeCharOffset(i, 0.1f, 5f, 0)
            );
            seq.SetLoops(-1);
        }
    }

 

ちなみにこれはまだ改善点があります。
SetDelayに乱数を与え揺らすタイミングを文字ごとにずらしているわけですが、
これはSequenceを実行した時点で固定されます
同じく揺れる向きも固定されるので、実は不規則に揺れてはいないんですよね。

いろいろ試してもうまく改善できなかった。。。

 

 

 

 

5. 文字に表示される枠を消す

TextMeshProで表示する文字に枠が表示される問題がたまに置きます。

f:id:Raspberly:20200730025700p:plain

ちなみにFontSizeを大きくすると枠が消えます

f:id:Raspberly:20200730032450g:plain

ちゃんとした原因はわかりませんが解決方法はあったので書き残します。

 

解決方法

Font Assetの作成時、Sampling Point SizeをAuto Sizingにせず、CustomSizeにして値を設定しましょう

f:id:Raspberly:20200730030916p:plain

↓Auto Sizeの場合、Sizeが255になっていました

f:id:Raspberly:20200730031144p:plain

これを60にしてジェネレートしなおすと解決します。 

f:id:Raspberly:20200730032429p:plain

 

これは作成するフォントの文字数が少なく、文字数に対してAtlas Resolutionが大きい場合に発生するようです。
(とても大きな文字が作られるため)
 

Sizeはいくつがいいのかはプロジェクトによると思いますが、テラシュールブログさんによると60前後がいいそうです。

tsubakit1.hateblo.jp

 

Unityギルドで似たような話題を見た気がしますが忘れちゃった。。。


 

 

6. 縦書きで表示したい

Undertaleのパピルスのように縦書きで表示したい場合
すでに先駆者がいらっしゃったのでそちらで。

www.cg-method.com

 

 

 

 

7. ボタンが反応しない時

Text Mesh ProのRaycastが有効になっていると起こります。

例えば↓の図の場合、TextMeshProの範囲(黄色い枠内)は下にButtonがあっても反応しません。

f:id:Raspberly:20200731025215p:plain

これはTextMeshPro-TextのExtra Setting/Raycast Targetのチェックを外すことで解決します。

f:id:Raspberly:20200731025639p:plain

これ以外にも、TextMeshProをButtonの子オブジェクトにすることでも解決します。

 

 

 

 

参考資料

(:3[kanのメモ帳]

DOTweenに関してはKanさんの記事でまとめられています。

kan-kikuchi.hatenablog.com

kan-kikuchi.hatenablog.com

kan-kikuchi.hatenablog.com

 

ゲームUIネット

実はDOTweenは最近アップデートされました。
そちらについてはゆーじさんゲームUIネットがとても学びになります。

game-ui.net

game-ui.net

game-ui.net

本日開催のyokohama.unityでも登壇されていました。

 

Unity使いこなし術

天神いなさんの投稿しているUnity使いこなし術シリーズでDOTweenが解説されています。

youtu.be

youtu.be

 

 

 

 

 

他、わかりにくい所、間違っている所がありましたらコメントまでお願いします!