Version: 2019.1
自動レイアウト
UI リファレンス

Rich Text

UI 要素のテキストおよびテキストメッシュは複数のフォントスタイルやサイズを含めることができます。リッチテキストは UI システムと旧 GUI システムの両方をサポートしています。GUIStyle、GUIText、TextMesh クラスは Rich Text 設定があり、Unity にテキスト中のマークアップタグを探すように指示します。Debug.Log 関数でもこのマークアップタグを使用してコードからのエラーレポートを更新することができます。これらのタグは表示されませんが、スタイル変更を意味して、テキストに反映されます。

Markup format

マークアップシステムは 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

テキストのマークアップセクション(囲うタグを含めて)、要素 と呼びます。

Nested elements

ひとつの要素を他の要素の中に “ネスト” することで、ひとつより多くの要素をテキストに適用することが可能です。

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

Tag parameters

いくつかのタグはテキストに対して、シンプルなある/なしの効果ですが、他ではバリエーションがあるかもしれません。例えば、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.

Supported tags

次のリストは 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 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 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.

Supported colors

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

Editor 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);
自動レイアウト
UI リファレンス