リッチテキスト
UI 要素のテキストおよびテキストメッシュは複数のフォントスタイルやサイズを含めることができます。リッチテキストは UI システムと旧 GUI システムの両方をサポートしています。GUIStyle、GUIText、TextMesh クラスは Rich Text 設定があり、Unity にテキスト中のマークアップタグを探すように指示します。Debug.Log 関数でもこのマークアップタグを使用してコードからのエラーレポートを更新することができます。これらのタグは表示されませんが、スタイル変更を意味して、テキストに反映されます。
マークアップの書式
マークアップシステムは HTML にヒントを得ていますが、標準 HTML とは完全に別のものです。基本的な考え方はテキストの該当部分を一組のタグによって囲うことです。
We are <b>not</b> amused.
例のように、タグは山括弧 < と > 内にある数文字のテキストです。
該当する部分の先頭に開始タグを配置します。タグ内のテキストはその名前を暗示します (この例では単に b)。
セクションの最後にもう 1 つのタグを配置します。これは終了タグです。開始タグと同じテキストですが、テキストの前にスラッシュ / を付けます。すべての開始タグには、対応する終了タグが必要です。開始タグを閉じないと、通常のテキストとして表示されます。
タグはユーザーに見えるように表示されませんが、タグで囲まれたテキストをスタイリングするための指示として解釈されます。上の例で使用されている 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
これは以下のようになります。
終了タグはパラメーター値を含まないことに注意してください。オプションとして、値を ? 記号で囲うこともできますが、必須ではありません。
タグパラメーターに空白を含むことはできません。以下はその例です。
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 と指定します…16 進数の値は、 #FF0000 is equivalent to #ff0000 のように、大文字小文字、どちらも使えます。 |
We are <color=#ff0000ff>colorfully</color> amused |
もう 1 つのオプションは、色の名前を使用することです。これは分かりやすいですが、当然、色の範囲が制限され、常に完全に不透明な色という前提になります。<color=cyan>some text</color> 使用可能な色の名前は、ページ下の表 の通りです。 |
| 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 の値で始まり、拡大縮小されていないテクスチャの幅や高さに対する比率として指定されます。 |
サポートする色
次の表は、<color> リッチテキストタグで 16 進数タグの代わりに名前を使用できる色の一覧です。
| 色の名前 | 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 |
 |
エディター GUI
リッチテキストはエディター GUI システムではデフォルトで無効になっていますが、カスタムの GUIStyle を使用して明示的に有効にすることができます。richText プロパティーを true に設定し、該当する GUI 関数にスタイルを渡す必要があります。
GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);