何か数値を出すときに、単位と一緒に表示することがよくあると思います。
この時、数値と単位でフォントサイズを変えたい！
けど数値のTextと別Objectで持つと桁の変動を考慮した配置とか
いろいろ面倒臭いことになる！！という方にお勧め。
TextMeshPro のリッチテキストタグを用いて簡単に表示を作る関数をご紹介します
リッチテキストタグとは？
タグ文字を使用して、表示するテキストの「文字サイズ、色」など
いろいろな表現を行うことができます。
利点としては、１つのTextオブジェクト内でも文字ごとに表現を変えれることが利点です。
今回は、「文字サイズの拡縮」タグを使用します
■実装サンプル（単位だけ全体の60％に縮小させる）
123456<size=60%>連</size>
どんなことができるのかは、以下のサイトが見やすかったので紹介させていただきます
■リッチテキストタグ一覧
www.midnightunity.net
事前準備
TextMeshProでRitchTextを使用する際の設定を、以下の画像を用いて説明します
①：
作成したTextMeshProです。リッチテキストタグを使うことで、単位だけ縮小されてます
②：
実際に記入しているテキストです。上記の
｜■実装サンプル（単位だけ全体の60％に縮小させる）
を記入しています。
③：
リッチテキストタグを有効にするために赤枠の設定を有効にする必要があります。
※デフォで有効なので基本問題ないですが、リッチテキストタグが使えなかったときはここを確認してみてください。
単位付きの数値を表示する拡張関数
拡張関数
using TMPro; public static class TextMeshProUguiExtensions { /// <summary> /// 単位付きテキスト設定 /// ※単位を拡縮する /// </summary> /// <param name="setText"></param> /// <param name="setNum">設定する数値</param> /// <param name="setUnit">単位</param> /// <param name="setUnitPer">単位の拡縮％ ※デフォで60％</param> public static void SetTextWithUnit(this TextMeshProUGUI setTmp, string setNum, string setUnit, float setUnitPer = 60) { if (setTmp.richText) { setTmp.text = $"{setNum}<size={setUnitPer}%>{setUnit}</size>"; } else { UnityEngine.Debug.Log("設定するTextMeshProUGUIの「RichText」が有効になってないので単位が拡縮されません。"); setTmp.text = $"{setNum}{setUnit}"; } } }
呼び出しサンプル
//設定するTextMeshPro [SerializeField] TextMeshProUGUI textSample; //デフォで、単位を60％に縮小させる textSample.SetTextWithUnit("123", "連"); //拡縮率を直接指定も可能 textSample.SetTextWithUnit("123", "連", 25);
いちいちタグをつけるのは面倒なので関数でまとめました。
今回は単位に絞った変換なので、拡張性の低い実装ですが使いやすくはなってるかなと思います。
拡張性を上げてみた
拡張関数
タグ文字でいろいろしたい！というときに使いやすくなるように改修してみました
public static class StringExtensions2 { public class TagIf { public float? Size = null; public int? Alpha = null; public Color? Color = null; public bool IsBold = false; public bool IsItalic = false; } /// <summary> /// テキストにRitchTextTag設定 /// </summary> /// <param name="setText"></param> /// <param name="tagIf">設定するタグ情報</param> public static string GetTextTag(this string setText, TagIf tagIf) { string tagFront = ""; string tagBack = ""; if (tagIf?.Size != null) { tagFront += $"<size={tagIf.Size}%>"; tagBack += $"</size>"; } if (tagIf?.Color != null) { Color setColorInt = (Color)tagIf.Color; string setColor = String.Format("#{0:X2}{1:X2}{2:X2}", (int)setColorInt.r, (int)setColorInt.g, (int)setColorInt.b); tagFront += $"<color={setColor}>"; tagBack += $"</color>"; } if (tagIf?.Alpha != null) { int setAlpha = (int)tagIf.Alpha; tagFront += $"<alpha={String.Format("#{0:X2}", setAlpha)}>"; tagBack += $"<alpha=#FF>"; } if (tagIf?.IsBold == true) { tagFront += $"<b>"; tagBack += $"</b>"; } if (tagIf?.IsItalic == true) { tagFront += $"<i>"; tagBack += $"</i>"; } return $"{tagFront}{setText}{tagBack}"; } }
呼び出しサンプル
public class TestTmp : MonoBehaviour { [SerializeField] TextMeshProUGUI setTmp; void Start() { string setTextPart1 = "てすと123"; string setTextPart2 = "テスト123"; string setTextPart3 = "Test123"; setTextPart1 = setTextPart1.GetTextTag(new StringExtensions2.TagIf { Size = 160, Alpha = 100, Color = new Color(255, 0, 0), IsBold = true, }); setTextPart2 = setTextPart2.GetTextTag(new StringExtensions2.TagIf { Size = 100, Alpha = 255, Color = new Color(0, 255, 0), IsItalic = true, }); setTextPart3 = setTextPart3.GetTextTag(new StringExtensions2.TagIf { Size = 40, Alpha = 255, Color = new Color(0, 0, 255), }); setTmp.text = $"Part1:{setTextPart1}\nPart2:{setTextPart2}\nPart3:{setTextPart3}"; } }
■実際の表示
TagIfを追加することで、好きにタグを追加できます。
変数をNullAbleにすることで、好きなタグだけ設定すればOKという形にしています。
TextMeshProではなくString に対して拡張関数を作ることで、文字列ごとにタグをつけれるようにしました。
