この記事でのバージョン
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でタグをつければ、そこの文字がグラデーションになります。
![]() |
![]() |