Text Tags


In addition to Unity’s default rich text tags, Utage also provides a variety of tags such as for ruby and emoji characters. These allow you to change the color and size of characters, as well as add ruby characters and emoji.

Sample

Unity’s Standard Rich Text

Color

You can change the color of the enclosed text by using the color tag. Colors can be specified using both a color key or color code.
Sample
<color=red>Color tag sample</color>. It is similar to Unity's basic <color=#99ff00ff>rich text</color>.

Size

You can change the font size of the enclosed text by using the size tag. You can specify the size with size=??.
Sample
<size=40>Size tag</size> <size=20>sample</size>

Italics

You can display the enclosed text in italics by using the i tag. Cannot be used with fonts that do not include the italics font.
We would not recommend using italics and bold if you do not have specialized fonts that include them, as this could be dangerous.
Sample
<i>Italics</i> display

Bold

You can display the enclosed text in bold by using the b tag. Cannot be used with fonts that do not include the bold font.
We would not recommend using italics and bold if you do not have specialized fonts that include them, as this could be dangerous.
Sample
<b>Bold</b> display

Text Tags Expanded with Utage

Ruby

You can add ruby characters to the enclosed text by using the ruby tag. You can specify ruby characters with ruby=??. The position for displaying them will vary slightly depending on the length of the text and the ruby characters (please refer to the image). Also, automatic line feeds are not added half way though ruby characters.
Sample
This is a <ruby=Utage>Utage</ruby> ruby <ruby=experiment>sample</ruby>. Half way through the ruby you cannot have <ruby=automatic line feeds>automatic line feeds</ruby>.

Character Spacing with Ruby Characters

When ruby characters are added, the spacing between characters is adjusted automatically.
 

Characters that can be Used a Ruby Characters

For ruby characters, you can use not only hiragana and katakana, but also kanji as long as they are included in the font. However, you should take care to use small character sizes.

Line Spacing with Ruby Characters

When using ruby characters, line spacing of the text needs to be slightly wider. Adjust this setting by changing the value of LineSpacing.

Emphasis Marks

You can add emphasis marks to the enclosed text by using the em tag. You can specify the emphasis marks to be used with em=?.
Sample
This is an <em=、>emphasis marks sample. By using any character of your choice, you can use <em=●>black dots or <em=◎>double circles. You can also use characters that are not normally used as emphasis marks <em=↓>like this.

Superscript and Subscript Characters

The sup tag is used for writing superscript characters, and the sub tag for subscript characters.
Sample
<sup>Superscript</sup> and <sub>subscript</sub> sample
<color=red><sup>★</sup>★<sup>★</sup>★<sub>★</sub><sup>★</sup><sub>★</sub>★<sub>★</sub></color>
<color=red><sup>★</sup><sup>★</sup><sub>★</sub><sup>★</sup><sub>★</sub><sub>★</sub></color>

Dash

To display a long dash line, use the dash tag. You can specify the number of dashes to write with dash=?.
Sample
<dash=2>Use the dash tag when you want to display connected dash lines that are two or more characters long<dash=2>

Space of a Specified Size

Specifies the size of the space. You can specify the size with size=?.
Sample
This is a <space=100> space sample with a specified size (100). If you set a negative value like -20 <space=-20> it squeezes into the space of the character before.

Group Characters

Utage inserts line feeds by performing Japanese line breaking. However, if you want to stop inserting line feeds automatically, you can do so by using the group tag.
Sample
This is a <group>group character</group> test that cannot add automatic line feeds half way through

Underline

You can underline the enclosed text by using the u tag. Automatic line feeds are also added half way through.
Sample
<u>Underline</u>. <u>Underlined text does have automatic line feeds inserted half way through.</u>

Strikethrough

You can strikethrough the enclosed text by using the strike tag. Automatic line feeds are also added half way through.
Sample
<strike>Strikethrough</strike>. <strike>Strikethrough text does have automatic line feeds inserted half way through.</strike>

 

Display Utage Parameters as Text

The current values of the parameters set in the Param sheet can be displayed as text.

Parameter Display

Display parameters as text.
Sample
Sample for displaying a character string parameter. <param=game_title>。

Sample for displaying a numeric parameter. <param=num_boot>.

Display Formatted Parameters

You can display parameters as text using the C# format. You can specify the number of characters to be printed, the thousand separator for numbers, etc.

A parameter display sample using the C# format.<format={0,3}:num_boot>

Emoji

Utage allows you to use its predefined emoji.

Emoji Tags

You can display emoji graphics by using the emoji tag.
Sample
`<emoji=1f60a>emoji<emoji=1f359><emoji=1f3b2>sample<emoji=2665>Can be used even without tags.????This requires special image data to be set on Unity beforehand.

Emoji Creation

To create emoji data, you need to create a special texture and a ScriptableObject called EmojiData on Unity.

EmojiData (ScriptableObject)

Emoji data is managed by a ScriptableObject called EmojiData.

Projects created using Utage 2.11 or earlier require the creation of EmojiData (ScriptableObject)

The EmojiData object is created automatically when the project is created using version 2.12 or later; however, this needs to be done manually for projects created using version 2.11 or earlier.

The created emoji data needs to be configured in the NovelTextGenerator component.

Import Textures for Emoji

You can import emoji texture files into Unity. You can save them wherever you like.

Also, if you use Unicode for the filename, those Unicode characters can be referenced without tags to display the emoji automatically.


In the import settings, set the TextureType to Sprite.
Let’s set the PackingTag as well (you can choose whatever name you like).
Set GenerateMipMaps to OFF, and set the Format to TrueColor so there is no color reduction.

Set Emoji Textures in the EmojiData

In the EmojiData, you need to set the emoji size and the texture for each emoji.

Message speed

Using the speed tag, you can set the time it takes to display one letter of a message.
Please note that the section using the speed tag will ignore the message speed on the config screen.
Sample
<speed=0.5>Using the speed tag, <speed=0> you can set the time it takes to display one letter of a message.