UI 要素のテキストおよびテキストメッシュは複数のフォントスタイルやサイズを含めることができます。リッチテキストは UI システムと旧 GUI システムの両方をサポートしています。GUIStyle、GUIText、TextMesh クラスは Rich Text 設定があり、Unity にテキスト中のマークアップタグを探すように指示します。Debug.Log 関数でもこのマークアップタグを使用してコードからのエラーレポートを更新することができます。これらのタグは表示されませんが、スタイル変更を意味して、テキストに反映されます。
マークアップシステムは HTML にヒントを得ていますが、標準 HTML とは完全に別のものです。基本的な考え方はテキストの一部はマッチングするタグのペアにより閉じられるということです。
We are <b>not</b> amused
例が示すように、タグは 括弧記号 (< および >) に含まれるテキストです。タグの中のテキストは名前を示します(この場合は単に b です)。セクションの終わりのタグは最初と同じ名前を持っていますが、スラッシュ記号 ( / ) を加えて使用されることに注意してください。タグはユーザーに直接表示されませんが、囲われるテキストのスタイル指示として解釈されます。上記の例で示される b タグは “not” という言葉に太文字を適用するため、テキストはスクリーン上では次のように表示されます。
We are not amused
テキストのマークアップセクション(囲うタグを含めて)、要素 と呼びます。
ひとつの要素を他の要素の中に “ネスト” することで、ひとつより多くの要素をテキストに適用することが可能です。
We are <b><i>definitely not</i></b> amused
イタリックスタイルは i タグにより適用されるため、スクリーン上では次のように表示されます
We are definitely not amused
終了タグの順番は開始タグの順番と逆になっていることに注意してください。この理由は、内部タグの範囲が外の要素をすべて含めないことを考えると明らかになります。
We are <b>absolutely <i>definitely</i> not</b> amused
により次のようになります
We are absolutely definitely not amused
いくつかのタグはテキストに対して、シンプルなある/なしの効果ですが、他ではバリエーションがあるかもしれません。例えば、color タグはどのカラーを適用するか知る必要があります。このような情報は パラメーター の使用によりタグに情報が追加されます。
We are <color=green>green</color> with envy
終了タグはパラメーター値を含まないことに注意してください。オプションとして、値は ? 記号により囲うこともできますが、必須ではありません。
次のリストは Unity がサポートするすべてのタグのリストです。
タグ | 説明 | 例 | ノート |
---|---|---|---|
b | ボールド体 (太字) でテキストをレンダリングします。 | We are <b>not</b> amused. | |
i | イタリック体でテキストをレンダリングします。 | We are <i>usually</i> not amused. | |
size | このパラメーターの値によってテキストのサイズを設定します。 | We are <size=50>largely</size> unaffected. | このタグは Debug.Log で使用できますが、size をあまり大きな値に設定すると画面バーとコンソールの行間の表示が奇妙になります。 |
color | このパラメーターの値に応じてテキストの色を設定します。色は従来の HTML 形式で設定します。 #rrggbbaa … このアルファベット文字は色の、赤、緑、青、アルファ (透明度) を表す 16 進数の値に対応しています。例は、完全に不透明なシアンです。 | <color=#00ffffff>… | 別のオプションは、色の名前を使用することです。この方がわかりやすいですが、当然、色の範囲は限られており、完全に不透明であることが常に仮定されています。 <color=cyan>… 利用可能な色の名前は下の表に示されています。 |
色の名前 | 16 進数の値 | スウォッチ |
---|---|---|
aqua (cyan と同じ) | #00ffffff |
|
black | #000000ff |
|
blue | #0000ffff |
|
brown | #a52a2aff |
|
cyan (aqua と同じ) | #00ffffff |
|
darkblue | #0000a0ff |
|
fuchsia (magenta と同じ) | #ff00ffff |
|
green | #008000ff |
|
grey | #808080ff |
|
lightblue | #add8e6ff |
|
lime | #00ff00ff |
|
magenta (fuchsia と同じ) | #ff00ffff |
|
maroon | #800000ff |
|
navy | #000080ff |
|
olive | #808000ff |
|
orange | #ffa500ff |
|
purple | #800080ff |
|
red | #ff0000ff |
|
silver | #c0c0c0ff |
|
teal | #008080ff |
|
white | #ffffffff |
|
yellow | #ffff00ff |
material
これはパラメーターにより指定されたマテリアルによって、テキストメッシュおよびテキストの一部のみレンダリングします。インスペクターで表示されるとおり、値はテキストメッシュのマテリアルの配列のインデックスです。
We are <material=2>texturally</material> amused
quad
これはテキストメッシュのみに利用でき、画像をテキストとともにインラインでレンダリングします。画像のために使用するマテリアル、ピクセル単位での画像の高さ、そして 4 つほど画像を表示する四角形領域をあらわす数値を、引数としてとります。他のタグと異なり、quad はテキストを囲わず、終了タグがありません。スラッシュ記号は最初のタグの終わりに置かれ、「自己完結」を表現します。
<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5 />
これにより、レンダラーのマテリアル配列の位置のマテリアルを選択し、画像の高さを 20 ピクセルに設定します。画像の四角形領域は x、y、width、heightの値で始まり、拡大縮小されていないテクスチャの幅や高さに対する比率として指定されます。
リッチテキストはエディター GUI システムではデフォルトで無効化されてますが、カスタムの GUIStyle を使用して明示的に有効化できます。richText プロパティーを true にして関連する GUI 関数に style を渡します。
GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);