TMP_Textの色をシェーダーから変更した話

Zaki_san

TMP_Textの色が変わらなかった件について

TMP_Textのインスペクターで一番最初に目に付くカラーパレットがVertex Colorです。
ここを変更すればおそらくテキストの文字が変更されると思われるのですが、私の環境では変更されませんでした。
TMP_Textの色に最も寄与していたシェーダー(TextMeshPro/Distance Field)内のGlow Colorを変更することで対処したので、その方法をまとめる。

不具合詳細

PC環境：Apple M1 Pro
Unity環境：2022.3.17f1

【Vertex Colorでテキストの文字が変更しなかった件】
Vertex Colorを下記の様に白→赤に変更をしても、文字の色が変化なかった。

Vertex Colorが白の場合（インスペクター側）
Vertex Colorが白の場合（テキスト側）
Vertex Colorが赤の場合（インスペクター側）
Vertex Colorが赤の場合（テキスト側）

【シェーダーのGlowが文字の色に寄与していた件】
シェーダー側のGlow Colorの色を変更することで文字の色が変わることがわかった。

Glow Colorが白の場合（インスペクター側）
Glow Colorが白の場合（テキスト側）
Glow Colorが赤の場合（インスペクター側）
Glow Colorが赤の場合（テキスト側）

【結論】スクリプトからシェーダーのプロパティをいじって文字の色を変更しました。

スクリプトは下記参照。
マウスがボタンの上に乗るとテキストの色が白くなり、マウスがボタンの上から放れるとテキストの色がグレーになります。


    private TMP_Text tmpText;
    private Material mat;

    // Start is called before the first frame update
    void Start()
    {
        tmpText = GetComponentInChildren<TMP_Text>();
        if (tmpText == null)
        {
            Debug.LogError("子オブジェクトにTMP_Textコンポーネントが見つかりません。");
        }
        mat = tmpText.fontMaterial;
        mat.SetColor("_GlowColor", Color.gray); // シェーダーのプロパティ名を使用
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
         // マウスポインターがボタンの上に乗ったときにアンダーバーを追加
        if (tmpText != null)
        {
            tmpText.fontStyle |= FontStyles.Underline;
            mat.SetColor("_GlowColor", Color.white*8.0f); // シェーダーのプロパティ名を使用
        }
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        // マウスポインターがボタンから外れたときにアンダーバーを削除
        if (tmpText != null)
        {
            tmpText.fontStyle &= ~FontStyles.Underline;
            mat.SetColor("_GlowColor", Color.gray); // シェーダーのプロパティ名を使用
        }
    }


完成品


この記事が気に入ったらサポートをしてみませんか？