コガネブログ

平日更新を目標にUnityやC#、Visual Studioなどのゲーム開発アレコレを書いていきます

【Unity】TextMesh Pro で使用できる 30種類のタグを紹介

はじめに

この記事では TextMesh Pro で使用できる 30種類のタグ を紹介していきます

目次

テキストの配置 (align)

<align="right">Right
<align="center">Center
<align="left">Left

f:id:baba_s:20180811214939p:plain

色 (color)

<color="red">Red <color=#005500>Dark Green 
<#0000FF>Blue <color=#FF000088>Semitransparent Red

f:id:baba_s:20180811214953p:plain

<color="red">Red, <color="blue">Blue,</color> and red again.

f:id:baba_s:20180811215001p:plain

透明度 (alpha)

<alpha=#FF>FF <alpha=#CC>CC <alpha=#AA>AA <alpha=#88>88 
<alpha=#66>66 <alpha=#44>44 <alpha=#22>22 <alpha=#00>00

f:id:baba_s:20180811215012p:plain

太字と斜体 (b, i)

The <i>quick brown fox</i> jumps over the 
<b>lazy dog</b>.

f:id:baba_s:20180811215023p:plain

文字間隔 (cspace)

<cspace=1em>Spacing</cspace> is just 
as important as <cspace=-0.5em>timing.

f:id:baba_s:20180811215030p:plain

フォント (font)

Would you like <font="font SDF">a different font?</font> 
or just 
<font="font SDF" material="font SDF">a different material?

f:id:baba_s:20180811215038p:plain

font タグで指定する Font Asset とマテリアルは
「Assets/TextMesh Pro/Resources/Fonts & Materials」フォルダに
格納しておく必要があります

インデント (indent)

1. <indent=15%>It is useful for things 
like bullet points.</indent>
2. <indent=15%>It is handy.

f:id:baba_s:20180811215045p:plain

行の高さ (line-height)

Line height at 100%
<line-height=50%>Line height at 50%
<line-height=100%>Rather cozy.
<line-height=150%>Line height at 150%
Such distance!

f:id:baba_s:20180811215058p:plain

行インデント (line-indent)

<line-indent=15%>This is the first line of this text example.
This is the second line of the same text.

f:id:baba_s:20180811215106p:plain

リンク (link)

<link="https://www.google.co.jp/">Google</link>

f:id:baba_s:20180811221230p:plain

link タグを使用する場合は、下記のようなスクリプトを自作して、
TextMesh Pro のオブジェクトにアタッチする必要があります
下記のスクリプトは、link タグで囲まれたテキストがクリックされたら
その URL をブラウザで開くスクリプトのサンプルです

using TMPro;
using UnityEngine;
using UnityEngine.EventSystems;

[RequireComponent( typeof( TextMeshProUGUI ) )]
public class Example : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick( PointerEventData e )
    {
        var text = GetComponent<TextMeshProUGUI>();
        var pos = Input.mousePosition;
        var camera = text.canvas.worldCamera ;
        int index = TMP_TextUtilities.FindIntersectingLink( text, pos, camera );
        if ( index == -1 ) return;
        var linkInfo = text.textInfo.linkInfo[ index ];
        var url = linkInfo.GetLinkID();
        Application.OpenURL( url );
    }
}

上記のスクリプトを使用する場合は、Canvas の Render Mode を
「Screen Space - Camera」か「World Space」に変更して、
「Event Camera」を設定しておく必要があります

f:id:baba_s:20180811221640p:plain

小文字、大文字、スモールキャピタル
(lowercase, uppercase, smallcaps)

<lowercase>Alice and Bob watched TV.</lowercase>
<uppercase>Alice and Bob watched TV.</uppercase>
<smallcaps>Alice and Bob watched TV.</smallcaps>

f:id:baba_s:20180811215114p:plain

マージン (margin)

Our margins used to be very wide.
<margin=5em>But those days are long gone.

f:id:baba_s:20180811215123p:plain

マーク (mark)

Text <mark=#ffff00aa>can be marked with</mark> an overlay.

f:id:baba_s:20180811215129p:plain

固定幅 (mspace)

Any font can become<mspace=2.75em> monospace, if you really want it.

f:id:baba_s:20180811215139p:plain

タグ無効化 (noparse)

Use <noparse><b></noparse> for <b>bold</b> text.

f:id:baba_s:20180811215145p:plain

ノーブレークスペース (nobr)

自動的な改行を防ぐタグ

You don't want <nobr>I M P O R T A N T</nobr> things 
to be broken up.

f:id:baba_s:20180811215154p:plain

水平位置 (pos)

at <pos=75%>75%
at <pos=25%>25%
at <pos=50%>50%
at 0%

f:id:baba_s:20180811215203p:plain

フォントサイズ (size)

<size=100%>Echo <size=80%>Echo <size=60%>Echo <size=40%>Echo <size=20%>Echo

f:id:baba_s:20180811215318p:plain

水平スペース (space)

Give me some <space=5em> space.

f:id:baba_s:20180811215327p:plain

スプライト (sprite)

Sprites! <sprite=0> More sprites! 
<sprite index=3> And even more!

f:id:baba_s:20180811215332p:plain

取り消し線と下線 (s, u)

The <s>quick brown</s> fox 
jumps over <u>the lazy dog</u>.

f:id:baba_s:20180811215346p:plain

スタイル (style)

スタイルシートに設定してある独自のタグを使用できます

<style="Title">Styles</style>
You can create your own.

f:id:baba_s:20180811215506p:plain

下付き文字と上付き文字 (sub, sup)

We have 1m<sup>3</sup> of H<sub>2</sub>O.

f:id:baba_s:20180811215407p:plain

垂直オフセット (voffset)

Up <voffset=1em>up <voffset=2em>UP</voffset> and <voffset=-0.5em>down</voffset> we go again.

f:id:baba_s:20180811215415p:plain

テキストの幅 (width)

I remember when we had 
lots of space for text.
<width=60%>But those days 
are long gone.

f:id:baba_s:20180811215425p:plain

回転 (rotate)

<rotate=10>N<rotate=-10>e<rotate=10>w

f:id:baba_s:20180813164007p:plain

参考サイト様

https://deltadreamgames.com/unity-tmp-hyperlinks/