この記事について
この記事ではTextMeshProUGUIでの文字の色・透明度・グラデーションの変更をスクリプトで制御する方法が学べます。
この記事でわかること
- tmp.color と tmp.alpha で一括の色・透明度を操作
- <color=#RRGGBB(AA)>…</color> で部分的に色変更
- enableVertexGradient と colorGradient でグラデーション
- フェードは Coroutine または CanvasGroup が扱いやすい
- 点滅・警告演出は Color/Alphaを時間で補間 すると綺麗
TextMeshProUGUIとは？
TextMeshProUGUIについては以下の記事を参考にしてください。
文字の色・透明度（Alpha）・グラデーション
TextMeshProUGUIの準備
まずはヒエラルキーで右クリックをしてTextMeshProUGUIを1つ用意します。
・「右クリック」→「UI」→「Text – TextMeshPro」
次にスクリプトを作成して先ほどのTextMeshProUGIにアタッチしてください。
色・透明度の扱い方
色をスクリプトで動的に変更する場合は「.color」、透明度(alpha)を変更する場合は「.alpha」を使います。
以下のスクリプトを貼り付けて実行してみると、テキストの全体色が赤くなり薄くなっているかと思います。（alpha値を0にすると透明になります。）
using TMPro;
using UnityEngine;
public class TextMeshProUGUI_font : MonoBehaviour
{
[SerializeField] private TextMeshProUGUI tmpUGUI;
void Start()
{
// 同じGameObjectにアタッチされているTextMeshProUGUIを取得
tmpUGUI = GetComponent<TextMeshProUGUI>();
tmpUGUI.text = "Score:1000";
// 一括で文字色を設定（赤・不透明）
tmpUGUI.color = Color.red;
// 直接アルファ値を指定（0 = 完全透明, 1 = 完全不透明）
tmpUGUI.alpha = 0.5f;
// 現在の色を取得し、アルファ値（透明度）だけ変更（50%）
//Color c = tmpUGUI.color;
//c.a = 0.5f;
//tmpUGUI.color = c;
}
}実行してみるとテキストが変わり、薄めの赤色になったかと思います。
部分的に色を変える（リッチテキスト）
前項とは異なり今回は一部の文字だけ色を変更します。
以下のスクリプトを実行すると「1000」だけ赤になり強調されます。
using TMPro;
using UnityEngine;
using static Unity.Burst.Intrinsics.X86.Avx;
public class TextMeshProUGUI_font : MonoBehaviour
{
[SerializeField] private TextMeshProUGUI tmpUGUI;
void Start()
{
// 同じGameObjectにアタッチされているTextMeshProUGUIを取得
tmpUGUI = GetComponent<TextMeshProUGUI>();
//1000だけ青色に変更
tmpUGUI.text = "Score: <color=#0000FF>1000</color> ";
// 一括で文字色を設定（赤・不透明）
tmpUGUI.color = Color.red;
// 直接アルファ値を指定（0 = 完全透明, 1 = 完全不透明）
tmpUGUI.alpha = 0.5f;
// 現在の色を取得し、アルファ値（透明度）だけ変更（50%）
//Color c = tmpUGUI.color;
//c.a = 0.5f;
//tmpUGUI.color = c;
}
}Color(#RRGGBBAA)について
これに関してはそうなんだぐらいでいいかと思い、ネットのカラーパレット等で調べることが多いです。
Color(#RRGGBBAA)について
色の設定は#RRGGBBAAで設定します。
それぞれの意味は以下のようになるので覚えておきましょう。
RR(RED)：赤、GG(Green)：緑、BB(Blue)：青、AA(Alpha)：透明度
グラデーション（Vertex Gradient）
テキストのグラデーションはタイトル演出等に使用されることが多く覚えておくと便利です。グラデーションはデフォルトではFalseなので「.enableVertexGradient」でTrueに設定し、「.colorGradient」でグラデーションを設定します。
以下のスクリプトを実行してパラメータを変更してみるとイメージがつきやすいです。
using TMPro;
using UnityEngine;
using static Unity.Burst.Intrinsics.X86.Avx;
public class TextMeshProUGUI_font : MonoBehaviour
{
[SerializeField] private TextMeshProUGUI tmpUGUI;
void Start()
{
// 同じGameObjectにアタッチされているTextMeshProUGUIを取得
tmpUGUI = GetComponent<TextMeshProUGUI>();
tmpUGUI.text = "Score:1000";
//グラデーション
tmpUGUI.enableVertexGradient = true;
tmpUGUI.colorGradient = new VertexGradient(
new Color(1f, 0.3f, 0.3f), // 左上
new Color(1f, 0.8f, 0.3f), // 右上
new Color(0.3f, 0.6f, 1f), // 左下
new Color(0.3f, 1f, 0.8f) // 右下
);
// 一括で文字色を設定（赤・不透明）
tmpUGUI.color = Color.red;
// 直接アルファ値を指定（0 = 完全透明, 1 = 完全不透明）
tmpUGUI.alpha = 0.5f;
// 現在の色を取得し、アルファ値（透明度）だけ変更（50%）
//Color c = tmpUGUI.color;
//c.a = 0.5f;
//tmpUGUI.color = c;
}
}簡易タイマーに色、透明度、グラデーション
簡易タイマーの実装は以下のサイトから事前に作成しておいて下さい。
それでは今回は簡易タイマーを3秒から赤くして点滅させます。
タイマーが0になったら「Time OUT!!!」という文字に変更し、グラデーションをつけようと思います。
using TMPro;
using UnityEngine;
public class TextMeshProUGUI_font : MonoBehaviour
{
[SerializeField] private TextMeshProUGUI tmpUGUI;
[SerializeField] private float duration = 5.0f; // 総時間
[SerializeField] private float warnAt = 3.0f; // ここから点滅
[Header("Colors / Blink")]
[SerializeField] private Color normalColor = Color.white; // 通常色
[SerializeField] private Color warningColor = Color.red; // 警告色（点滅のベース色）
[SerializeField] private float blinkSpeed = 2.0f; // 点滅速度（大きいほど速い）
[SerializeField, Range(0f, 1f)] private float minAlpha = 0.3f; // 点滅の最小透明度
[Header("TIME OUT Gradient (TL, TR, BL, BR)")]
[SerializeField] private Color gradTopLeft = new Color(1f, 0.85f, 0.2f); // 黄寄り
[SerializeField] private Color gradTopRight = new Color(1f, 0.45f, 0.2f); // オレンジ
[SerializeField] private Color gradBotLeft = new Color(0.95f, 0.2f, 0.2f); // レッド
[SerializeField] private Color gradBotRight = new Color(1f, 0.65f, 0.2f); // オレンジ寄り
private float timer;
private bool finished;
void Start()
{
// 同じGameObjectにアタッチされているTextMeshProUGUIを取得
tmpUGUI = GetComponent<TextMeshProUGUI>();
timer = duration;
// 表示初期化
tmpUGUI.enableVertexGradient = false; // カウント中は単色
tmpUGUI.color = normalColor;
tmpUGUI.fontSize = 60f;
tmpUGUI.alignment = TextAlignmentOptions.Center;
tmpUGUI.text = "Time\n" + Mathf.CeilToInt(timer);
}
void Update()
{
if (finished) return;
timer -= Time.deltaTime;
if (timer < 0f) timer = 0f;
if (timer > 0f)
{
// 数字更新
tmpUGUI.text = "Time\n" + Mathf.CeilToInt(timer);
// 点滅判定
if (timer <= warnAt)
{
// 0.0~1.0を往復 → minAlpha~1.0へ補間
float t = Mathf.PingPong(Time.time * blinkSpeed, 1f);
float a = Mathf.Lerp(minAlpha, 1f, t);
Color c = warningColor;
c.a = a;
tmpUGUI.enableVertexGradient = false; // 単色点滅
tmpUGUI.color = c;
}
else
{
// 通常表示
tmpUGUI.enableVertexGradient = false;
tmpUGUI.color = normalColor;
tmpUGUI.alpha = 1f;
}
}
else
{
// 0になったら "TIME OUT" ＋ グラデーション
tmpUGUI.text = "TIME OUT";
tmpUGUI.alpha = 1f;
//白に戻しておかないとグラデーションがうまくいかない
tmpUGUI.color = Color.white;
tmpUGUI.enableVertexGradient = true;
tmpUGUI.colorGradient = new VertexGradient(
gradTopLeft, gradTopRight, gradBotLeft, gradBotRight
);
finished = true; // 以降のUpdateを止める
// 見た目を残したまま停止したい場合は Destroy を使わずに enabled=false でもOK
// Destroy(this);
enabled = false;
}
}
#endregion
}
実装できたら実行してみましょう！動画のようにできていたら完成です！
まとめ
- 全体色＆透明度：tmp.color / tmp.alpha
- 部分色：<color=#RRGGBBAA> タグで強調
- グラデーション：enableVertexGradient ＋ colorGradient
- 簡易タイマーの色・透明度・グラデーション実装
