The text for UI elements and text meshes can incorporate multiple font styles and sizes. The Text, GUIStyle, and TextMesh classes have a Rich Text setting which instructs Unity to look for markup tags within the text. The Debug.Log function can also use these markup tags to enhance error reports from code. The tags are not displayed but indicate style changes to be applied to the text.
マークアップシステムは HTML にヒントを得ていますが、標準 HTML とは完全に別のものです。基本的な考え方はテキストの一部はマッチングするタグのペアにより閉じられるということです。
We are <b>not</b> amused.
As the example shows, the tags are just pieces of text inside the “angle bracket” characters, <
and >
.
You place the opening tag at the beginning of the section. The text inside the tag denotes its name (which in this case is just b).
You place another tag at the end of the section. This is the closing tag. It has the same name as the opening tag, but the name is prefixed with a slash /
character. Every opening tag must have a corresponding closing tag. If you don’t close an opening tag, it is rendered as regular text.
The tags are not displayed to the user directly but are interpreted as instructions for styling the text they enclose. The b
tag used in the example above applies boldface to the word “not”, so the text appears ons creen as:-
We are not amused
テキストのマークアップセクション(囲うタグを含めて)、要素 と呼びます。
ひとつの要素を他の要素の中に “ネスト” することで、ひとつより多くの要素をテキストに適用することが可能です。
We are <b><i>definitely not</i></b> amused
The <i>
tag applies italic style, so this would be presented onscreen as
We are definitely not amused
Note the ordering of the closing tags, which is in reverse to that of the opening tags. The reason for this is perhaps clearer when you consider that the inner tags need not span the whole text of the outermost element
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
Which produces this result:
終了タグはパラメーター値を含まないことに注意してください。オプションとして、値は ? 記号により囲うこともできますが、必須ではありません。
Tag parameters cannot include blank spaces. For example:
We are <color = green>green</color> with envy
does not work because of the spaces to either side of the =
character.
次のリストは 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 | Sets the color of the text according to the parameter value. The color can be specified in the traditional HTML format. #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 would be 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 |
Another option is to use the name of the color. This is easier to understand but naturally, the range of colors is limited and full opacity is always assumed. <color=cyan>some text</color> The available color names are given in the table below. |
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の値で始まり、拡大縮小されていないテクスチャの幅や高さに対する比率として指定されます。 |
The following table lists colors for which you can use a name instead of a hexadecimal tag in the <color>
rich text tag.
色の名前 | 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 |
![]() |
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);