Unity入門

【Unity】TextMeshProUGUIでアウトライン・影をスクリプトでつける方法

  /
目次
  1. この記事について
  2. この記事でわかること
  3. TextMeshProUGUIとは？
  4. 縁取り（Outline）、影（Underlay）
    1. TextMeshProUGUIの準備
  5. 文字表現のフォントマテリアルとは
    1. 縁取り（Outline）の設定方法
    2. 影（Underlay）の設定方法
  6. まとめ

この記事について

この記事ではTextMeshProUGUIでのアウトラインや影をスクリプトで制御する方法が学べます。

この記事でわかること

  • 縁取り（Outline）の有効化 / 無効化 → mat.EnableKeyword(“OUTLINE_ON”) / mat.DisableKeyword(“OUTLINE_ON”)
  • 縁取りの色や太さ →
    mat.SetColor(“_OutlineColor”, …) / mat.SetFloat(“_OutlineWidth”, …)
  • 影（Underlay）の有効化 / 無効化 → mat.EnableKeyword(“UNDERLAY_ON”) / mat.DisableKeyword(“UNDERLAY_ON”)
  • 影の色・位置・ぼかし → _UnderlayColor / _UnderlayOffsetX / _UnderlayOffsetY / _UnderlaySoftness

TextMeshProUGUIとは？

TextMeshProUGUIについては以下の記事を参考にしてください。

【Unity】TextMeshProUGUIの使い方を徹底解説UnityのTextMeshProUGUIをマスターしよう！スクリプトでの操作方法、フォント追加の手順、日本語対応の設定まで詳しく解説。初心者でもすぐに使えるサンプルコード付き！...

縁取り（Outline）、影（Underlay）

TextMeshProUGUIの準備

まずはヒエラルキーで右クリックをしてTextMeshProUGUIを1つ用意します。
・「右クリック」→「UI」→「Text – TextMeshPro」

次にスクリプトを作成して先ほどのTextMeshProUGIにアタッチしてください。

文字表現のフォントマテリアルとは

TextMeshProUGUI の文字表現は フォントマテリアル によって制御されています。

  • フォントそのものの形（字形）はフォントアセットが持つ
  • 色・縁取り・影などの「見た目の装飾」はマテリアルが持つ

そのため 装飾をスクリプトで変えたい場合は tmpUGUI.fontMaterial を取得して操作する必要がある、というわけです。

Material mat = tmpUGUI.fontMaterial;

こうすることで、Inspector で設定できる Outline や Underlay をスクリプトから直接制御できます。

縁取り（Outline）の設定方法

TextMeshProUGUI は標準でアウトライン機能を持っています。
スクリプトから Material を取得し、EnableKeyword と SetColor / SetFloat で調整します。

using TMPro;
using UnityEngine;

public class TextMEshProUGUI_Outline : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpUGUI;
    
    void Start()
    {
        // 同じGameObjectにアタッチされているTextMeshProを取得
        tmpUGUI = GetComponent<TextMeshProUGUI>();
        // 共通で使うマテリアル取得
        Material mat = tmpUGUI.fontMaterial;

        #region "Outline"

        // アウトライン有効化
        mat.EnableKeyword("OUTLINE_ON");
        // アウトライン無効化する場合はこちら
        // mat.DisableKeyword("OUTLINE_ON");

        // アウトラインの色
        mat.SetColor("_OutlineColor", Color.red);

        // アウトラインの太さ（0～1）
        mat.SetFloat("_OutlineWidth", 0.2f);

        #endregion
    }
}


動画をみると気づいたかもしれませんが、インスペクターにOutlineという項目が変わり、テキストに赤色のOutlineができました。デフォルトはOutlineにチェックがついていないので有効化することを忘れないようにしましょう。

影（Underlay）の設定方法

TextMeshProUGUI には影（Underlay）機能もあり、オフセットやぼかしを調整可能です。

using TMPro;
using UnityEngine;

public class TextMEshProUGUI_Outline : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpUGUI;
    
    void Start()
    {
        // 同じGameObjectにアタッチされているTextMeshProを取得
        tmpUGUI = GetComponent<TextMeshProUGUI>();
        // 共通で使うマテリアル取得
        Material mat = tmpUGUI.fontMaterial;

        #region "Underlay"
        // 影の有効化
        mat.EnableKeyword("UNDERLAY_ON");
　　  // 影の無効化
        // mat.DisableKeyword("UNDERLAY_ON");

        // 影の色
        mat.SetColor("_UnderlayColor", new Color(0, 0, 0, 0.5f));

        // 影の位置オフセット
        mat.SetFloat("_UnderlayOffsetX", 2f);
        mat.SetFloat("_UnderlayOffsetY", -2f);

        // 影のぼかし具合
        mat.SetFloat("_UnderlaySoftness", 0.5f);
        #endregion
    }
}


実行してみるとテキストの後ろ側に半透明の影ができていることがわかると思います。

まとめ

  • 縁取り（Outline）
    • 有効化 / 無効化 → EnableKeyword(“OUTLINE_ON”) / DisableKeyword(“OUTLINE_ON”)
    • 色と太さ → _OutlineColor, _OutlineWidth
  • 影（Underlay）
    • 有効化 / 無効化 → EnableKeyword(“UNDERLAY_ON”) / DisableKeyword(“UNDERLAY_ON”)
    • 色・位置・ぼかし → _UnderlayColor, _UnderlayOffsetX, _UnderlayOffsetY, _UnderlaySoftness
TextMeshProUGUI Unity
関連記事