自作テクスチャ ✕ TextMeshPro ✕ DOTweenPro

部屋 ✕ ワイシャツ ✕ 私。どうも、案山子です。この夏はキュウリをゴマ油と醤油と酢と唐辛子と和えたものを毎日齧っています。河童か。

TextMeshProに自作の数字画像を入れてDOTweenProでアニメーションさせてみました。誰しも人生に一度くらいは自分でデコった数字を使いたいこともあるよ。そういう時の為のメモです。

少し早めの夏休み自由研究です。noteに目次をつけることを覚えました。

自作テクスチャをSprite Assetに変換する

たまたま手元にサイコロのテクスチャがあったので足りない数字をむりくり作りました。ついでに記号もいくつか入れてみた。Unityに持って行ってから気がついたけど、記号のとこのスペースを空ける必要はなかったのでこれはあまり良くない例。

Unityに持って行ったらTexture Type→Sprite(2D and UI)、Sprite Mode→Multipleに設定してSprite Editorを開きます。

Sprite Editor>Sliceでスプライトをばらし、しばしば忘れがちなApplyを押す。

テクスチャを右クリック＞Create＞TextMeshPro＞Sprite Assetを押すと…

Sprite Assetの出来上がりです。

Sprite Asset＞Sprite Character TableでIndexの入れ替えが出来ます。今回は数字のテクスチャなのでインデックスと同じ値になっているのが理想。ずれていたらここで修正してください。

Sprite AssetをTextMeshProに設定する

今回はUIとして使いたいのでCanvasの下にText - TextMeshProオブジェクトを作成、インスペクタからTextMeshProコンポーネント＞ExtraSettings＞Sprite Assetにさっき作った自作テクスチャのSprite Assetを設定します。

Sprite Assetを表示させるにはText Inputフィールドにタグを書きます。<sprite=【スプライトのindexID】>です。０から９まで表示させるには<sprite=0><sprite=1><sprite=2><sprite=3><sprite=4><sprite=5><sprite=6><sprite=7><sprite=8><sprite=9>めんどくさいな！！！！

ちなみにSprite Assetに対してFont SizeやSpacing Optionは有効。Font Style、Color Gradientは効いてない。Vertex Colorも無効かと思いきやアルファだけは効くので半透明には出来た。

（若干ややこしいんですが、DOTweenProのアニメーションではVertex Colorが有効です。試してないけどColor Gradientも効くかも？？？）

めんどくさいので文字からタグに変換するメソッドを書く

タグを書くのがめんどくさいので先達の知恵に習い、文字をタグに変換するメソッドを書きました。つねづね画面レイアウトや実装時に楽をしたいと思っているのが功を奏した。
コンテキストメニューにしたのでアタッチしたスクリプトを右クリック一発で変換メソッドが呼べるのはえらいと思います(ﾄﾞﾔ

誰かが楽できるかも知れないのでメソッドの中身も貼っておきます。なおスクリプトは絶賛勉強中なのでコメントを書きまくっている。switch文の中身は適宜書き換えて下さい。たいしたことはやってないけど何かあっても責任は持てない。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;//TextMeshPro使う

public class StringConvSprite : MonoBehaviour
{
   [SerializeField]
   private string _string;

   TextMeshProUGUI _TMP;

   //取得された文字列を1文字ずつ格納する文字配列
   private char[] _char_array;

   //変換された文字列を格納する文字列配列
   private string[] _conv_array;


   [ContextMenu("数字をスプライトタグに変換")]//コンテキストメニュー化
   private void StrConvSpr()
   {
       //TMPコンポーネントを取得する
       this._TMP= GetComponent<TextMeshProUGUI>();

       //書き換え用文字列配列の個数をインプットフィールドの文字列の文字数にする
       this._conv_array = new string[this._string.Length];

       //文字列を文字配列_char_arrayに格納する
       this._char_array = this._string.ToCharArray();

       //文字配列_char_arrayをスプライトにある文字か判別する
       for(int i=0; i < this._string.Length; i++)
       {
           //該当する文字の場合は<sprite=ID>に書き換える
           switch(this._char_array[i])
           {
               case '0':
                   this._conv_array[i] = "<sprite=0>";
                   break;

               case '1':
                   this._conv_array[i] = "<sprite=1>";
                   break;

               case '2':
                   this._conv_array[i] = "<sprite=2>";
                   break;

               case '3':
                   this._conv_array[i] = "<sprite=3>";
                   break;

               case '4':
                   this._conv_array[i] = "<sprite=4>";
                   break;

               case '5':
                   this._conv_array[i] = "<sprite=5>";
                   break;

               case '6':
                   this._conv_array[i] = "<sprite=6>";
                   break;

               case '7':
                   this._conv_array[i] = "<sprite=7>";
                   break;

               case '8':
                   this._conv_array[i] = "<sprite=8>";
                   break;

               case '9':
                   this._conv_array[i] = "<sprite=9>";
                   break;

               /*スプライトに追加する場合
               case 'ここに追加した文字を入れる':
                   this._conv_array[i] = "<sprite=スプライトのIDを入れる>";
                   break;
               */

               default:
                   this._conv_array[i] = this._char_array[i].ToString();
                   break;
           }
              
       }

       //インプットフィールドの内容をクリア
       this._TMP.text = "";

       //変換した文字列配列をインプットフィールドに代入する
       this._TMP.text = string.Join("", this._conv_array);


   }


}

毎度お世話になっております今日の先達の知恵(-人-)
スクリプトでタグに変換すれば楽というアイディアお借りしました。

【Unity】TextMeshProで自作のフォントを設定する | 都会のエレキベア【Unity】TextMeshProで自作のフォントを設定する

DOTweenProでアニメーションする

さて自作テクスチャの表示が出来るようになったので、次はやはりアニメーションをさせたい。という訳でDOTweenProの出番。果たしてタグで呼ばれているスプライトを文字としてアニメーション出来るだろうか？？？

結論から言うとDOTweenProの１文字ごとのアニメーション(PerCharAnimation)は出来た！！！出来たよ！！！やったね！！！
試してみたのは
DOFadeChar
DOPunchCharOffset
DOPunchCharScale
DOColorChar
SkewCharX/Y(スクショ撮り忘れた

数字のアニメーションとしてよく使いそうなものを盛ったので見た目がえらいことにはなっているが、TextMeshProコンポーネントでは設定出来なかったVertex Colorもなぜかアニメーション出来ているのが面白い。
PerChar以外ではDOFade/DOColorも有効。他は試してないのでわからん。

PerCharAnimationはスクリプトの書き方がめんどくさくて毎回先達の知恵のお世話になっています(-人-)

DOTweenでTextMeshProを文字ごとにアニメーションさせる

さて、ここからは残念なお知らせ。
試してみたけどうまく行かなかったアニメーションです。

DOText
タグと文字を混ぜてみたり、DOTweenPro側でrichtextをtrue/falseで切り分けたりしてみたが、どうにもうまく動かない。アニメーションの挙動とText Inputフィールドを見比べていると、どうやらタグはあくまでタグ、文字としては扱っていない？？？
PerCharAnimationだとTextMeshProAnimatorがなんちゃらするのでそこにポイントがあるような気はするが気がするだけでわかってはいない。
１文字ずつ表示するのはDOFadeCharでも出来るが、DOTextのスクランブルが使えないのは惜しいのでSprite Assetが扱えるようになって欲しい。

DOCounter
最初と最後の数字を値(value)で指定する形なので、そもそもSprite Assetを噛ませる方法がわかりませんでした！！！

最後に

あるいは今後の希望。

Sprite Assetは各グリフにUnicodeを設定出来る訳ですが(おそらくグリフの検索に使う)せっかくなのでFont AssetのFallback(設定したFont Assetに文字が入っていない場合の代替)にSprite Assetを設定できるようにならないもんじゃろか。
Unicodeをちまちま設定する手間はかかるけどSprite Assetを文字(フォント)として認識してくれたらタグで指定しなくても表示できるだろし、DOTextもDOCounterも使えるんじゃないかなあ。という夢を見ています。