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 においても有効ですが、サイズを大きくしすぎるとウィンドウバーとコンソールにおける行間がおかしくなるでしょう。 |
カラー名 | テキストの色はパラメーター値に応じて設定されます。色は従来の HTML 形式で設定することができます。 #rrggbbaa … 文字は色の、赤、緑、青およびアルファ(透明度)の値を表す 16 進数の対に対応します。例えばこれは、完全な不透明のシアンです。 | <color=#00ffffff>… | 別のオプションはカラーの名前を使用することです。理解するにはこちらが簡単ですが、色の範囲が限定されていて、常に完全に不透明となります。 <color=cyan>… 利用できる色の名前を以下に記します。 |
カラー名 | 十六進数 | 色見本 |
---|---|---|
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、幅、および高さの値で始まり、拡大縮小されていないテクスチャの幅および高さに対する比率として指定されます。
リッチテキストはエディター 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);