のにっき

【Unity】Textの文字を動く虹色にする

UnityのTextオブジェクトは、タグによってある程度自由な表現ができます。
今回はタグのテストみたいなもので文字を動く虹色に出来るスクリプトを作りました。

実際の挙動

f:id:apuridasuo:20200131134323g:plain
図:スクリプトの実挙動
こんな感じです。
Textに記入した文字に自動でタグ付けをして一文字づつ色を変えます。
追加機能で、Inspectorの設定で
方向転換・変色スピードの設定変更もできる様にしています。

ソースコード

スクリプトファイルをGitHubにアップしてますのでご自由にどうぞ
github.com

落とすのがメンドイ方は以下にソースを記入しますのでコピペして下さい

public class TextRainbow : MonoBehaviour
{
    // Inspectorで設定する変数
    public bool IsTokeiMawari = true;
    public int ChangeSpeed = 5;
    // 変換管理変数
    public static int _ChangeCnt = 0;
    public static int _NijiStartId = 0;
    // 変換管理定数
    public const string Df_Tag_Hedder = "<color=#Value>";
    public const string Df_Tag_Footer = "</color>";
    // 虹色の中身 ※ 2桁づつで区切って[00 00 00]=[ R, G, B ]の値になっている
    //       ※ この配列の要素を追加・編集したらオリジナルの動く色が作れる
    public static string[] Df_ColorTag = new string[] 
    {
        "ff0000",
        "ffff00",
        "00ff00",
        "00ffff",
        "0000ff",
        "ff00ff",
    };

    /// <summary>
    /// 毎割り込みイベント
    /// </summary>
    void Update()
    {
        // 設定したスピードに合わせて色変更処理を呼ぶ
        _ChangeCnt--;
        if (_ChangeCnt <= 0)
        {
            _ChangeCnt = ChangeSpeed;
            SetTextColorChange(IsTokeiMawari, this.GetComponent<Text>());
        }
    }

    /// <summary>
    /// テキスト色を変える処理(毎割り込み)
    /// </summary>
    /// <param name="TxtSet">変更するテキストオブジェクト</param>
    public static void SetTextColorChange(bool IsVecLR,Text TxtSet)
    {
        // テキストの文字を取得※Tag文字を取り除く
        string textNoTag = TxtSet.text;
        textNoTag = textNoTag.Replace(Df_Tag_Footer, "");
        for (int i_ColorId = 0; i_ColorId < Df_ColorTag.Length; i_ColorId++)
        {
            textNoTag = textNoTag.Replace(Df_Tag_Hedder.Replace("Value", Df_ColorTag[i_ColorId]), "");
        }
        // 一文字ずつ色を設定
        int setColorId = _NijiStartId;
        StringBuilder textSet = new StringBuilder();
        for (int i_Word = 0; i_Word < textNoTag.Length; i_Word++)
        {
            textSet.Append(Df_Tag_Hedder.Replace("Value", Df_ColorTag[setColorId]));
            textSet.Append(textNoTag.Substring(i_Word, 1));
            textSet.Append(Df_Tag_Footer);
            if(IsVecLR)
            {
                setColorId--;
                if (setColorId <0)
                {
                    setColorId = Df_ColorTag.Length-1;
                }
            }
            else
            {
                setColorId++;
                if (setColorId >= Df_ColorTag.Length)
                {
                    setColorId = 0;
                }
            }
        }
        // 次回の開始色を更新
        _NijiStartId++;
        if (_NijiStartId >= Df_ColorTag.Length)
        {
            _NijiStartId = 0;
        }
        // テキスト文字を変更
        TxtSet.text = textSet.ToString();
    }
}

ソースの中で、「虹色の中身」の部分に注目してください。
この配列が設定する文字の色です。
現在は虹に見える様に6色に設定しているのですが、
自由に要素を増やしたり、色データの値を変更すれば
オリジナルの配色にできる様になってます。

使い方

1)虹にしたいTextオブジェクトにスクリプトファイルを追加
2)オブジェクトのTextコンポーネント
 「Rich Text」項目にチェックが入ってなければチェックを入れる
3)ビルドしたら虹になるので、スピード・方向を設定すればOK!

Textのタグのついて

Textに記入している文字を「<○○>表示文字<○○>」のように囲むと
囲んだ文字(表示文字)が変化して表示されるという機能です。
【例】文字「AAA」を赤色でサイズを50にして表示する

<size=50><color=#ff0000>AAA</color></size>

※上記をTextにコピペ!
こんな感じで、AAAをタグでくくることで表示が変更されます
タグの詳細は以下のリファレンスを参照
docs.unity3d.com

以上です。
正直、文字を綺麗に動かすなら「TextMeshPro」一択です!
しかし、単調な動きならスクリプトで汎用化させておくと
疲れた時に楽できるのでとても重宝します。。。


P.S.初めてGIF貼り付けしてみたけど面倒くさすぎて泣けた・・・