リッチテキスト
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. |
Although this tag is available for Debug.Log, you will find that the line spacing in the window bar and Console looks strange if you set the size too large. |
| color | Sets the color of the text according to the parameter value. You can specify the color in HTML format, as in #rrggbbaa, where the letters correspond to pairs of hexadecimal digits denoting the red, green, blue and alpha (transparency) values for the color. For example, cyan at full opacity is specified by color=#00ffffff…You can specify hexadecimal values in uppercase or lowercase; #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 | Renders an image inline with the text. This is only useful for text meshes. It takes parameters that specify the material to use for the image, the image height in pixels, and a further four that denote a rectangular area of the image to display. Unlike the other tags, quad does not surround a piece of text and so there is no ending tag - the slash character is placed at the end of the initial tag to indicate that it is “self-closing”. | <quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5> |
This selects the material at the position in the renderer’s material array and sets the height of the image to 20 pixels. The rectangular area of the image starts at the position given by the x, y, width and height values, which are all given as a fraction of the unscaled width and height of the Texture. |
サポートする色
次の表は、<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
Rich text is disabled by default in the Editor GUI system but it can be enabled explicitly using a custom GUIStyle. The richText property should be set to true and the style passed to the GUI function in question:-
GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);