(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]


本ブログの運営者kan.kikuchiが個人で開発したゲームです!


Text Animatorで好きな色をいくつでも指定できるオリジナルのグラデーションタグ(カスタムアクション)【Unity】【アセット】【Text Animator】


このエントリーをはてなブックマークに追加


この記事でのバージョン
Unity 6000.1.11f1


はじめに

以前テキストにアニメーションを追加したり、


文字送り(文字を最初から順番に表示する)を実装出来たりする、


Text Animatorというアセットを紹介しました。

Text Animator for Unity - Unity Asset Store


このText Animatorには待ち時間や文字送り速度を変えるタグも用意されていますが、

2.5秒待ちますよ。<waitfor=2.5>
2.5秒待ちました!


オリジナルのタグとその処理を実装する事も可能です。

オリジナルタグの前、このあと1.5秒待ちます。
<original=1.5,2.0>ここから2倍速になります。


今回はそのオリジナルのタグで、

好きな色をいくつでも指定できるグラデーションを作ったので、その紹介です!


好きな色をいくつでも指定できるオリジナルのグラデーションタグ

さっそくですが、オリジナルのグラデーションタグのコードは以下の通りです。

using System.Collections.Generic;
using Febucci.UI.Core;
using UnityEngine;

namespace Febucci.UI.Effects {
  [UnityEngine.Scripting.Preserve]
  [CreateAssetMenu(
    menuName = "Text Animator/Animations/Behaviors/Palette Gradient",
    fileName = "Palette Gradient Behavior")]
  [EffectInfo("grad", EffectCategory.Behaviors)]
  public sealed class PaletteGradientBehavior : BehaviorScriptableBase {
    
    //基本設定値
    public float baseFrequency = 0.5f;
    public float baseWaveSize = 0.08f;
    public List<Color> colors = new List<Color> {
      Color.red, Color.yellow, Color.green, Color.cyan, Color.blue, Color.magenta
    };

    //動的な値
    float frequency;
    float waveSize;

    //=================================================================================
    //コンテキスト・修飾子設定
    //=================================================================================

    /// <summary>
    /// アニメーションコンテキストをリセット
    /// </summary>
    public override void ResetContext(TAnimCore animator) {
      frequency = baseFrequency;
      waveSize = baseWaveSize;
    }

    /// <summary>
    /// 修飾子を設定
    /// </summary>
    public override void SetModifier(ModifierInfo modifier) {
      switch (modifier.name) {
        case "f": 
          frequency = baseFrequency * modifier.value; 
          break;
        case "w": 
          waveSize = baseWaveSize * modifier.value; 
          break;
        case "s": 
          waveSize = baseWaveSize * modifier.value; 
          break;
      }
    }

    //=================================================================================
    //エフェクト適用
    //=================================================================================

    /// <summary>
    /// 文字にパレットグラデーションエフェクトを適用
    /// </summary>
    public override void ApplyEffectTo(ref CharacterData character, TAnimCore animator) {
      if (colors == null || colors.Count == 0) {
        return;
      }

      //0–1 にラップした時間×位置オフセット
      float t = Mathf.Repeat(
        animator.time.timeSinceStart * frequency + character.index * waveSize, 1f);

      Color paletteColor = EvaluatePalette(t);

      //頂点ごとに適用(アルファは保持)
      for (byte i = 0; i < TextUtilities.verticesPerChar; i++) {
        Color32 c = paletteColor;
        c.a = character.current.colors[i].a;
        character.current.colors[i] = c;
      }
    }

    //[0,1] → パレットをループ補間
    private Color EvaluatePalette(float t01) {
      if (colors.Count == 1) {
        return colors[0];
      }

      var scaled = t01 * colors.Count;
      var i0 = Mathf.FloorToInt(scaled) % colors.Count;
      var i1 = (i0 + 1) % colors.Count;
      var frac = scaled - Mathf.Floor(scaled);

      return Color.LerpUnclamped(colors[i0], colors[i1], frac);
    }
  }
}


オリジナルタグの作り方は以前の記事に書きましたが、



ざっくり使い方を説明すると、上記のスクリプトファイルを作ったら、

ProjectのText Animator/Animations/Behaviors/Palette Gradientでアセットを生成し、


Text AnimatorのBehaviorsのEmpty Slotにそのアセットを設定、


idをつけて好きな色指定したら準備完了。

(FrequencyやWave Sizeで動く速度や色の幅の調整も可能、2色とかのグラデーションも可能)


あとは設定したidでタグをつければ、そこの文字がグラデーションになります。