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においても有効ですが,サイズを大きくしすぎるとウィンドウバーとコンソールにおける行間がおかしくなるでしょう。 |
color | テキストの色はパラメータ値に応じて設定されます。色は従来の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);