RichText Component Reference

The currently supported tags are: , size, outline, b, i, u, br, img and on, these tags could also be nested within each other.

For more information about BBCode, please refer to the BBCode format section below.

Click the Add Component button at the bottom of the Inspector panel and select RichText from UI -> Render to add the RichText component to the node.

To use RichText, please refer to the RichText API documentation and the scene of the test-cases-3d project.

Currently the supported tag list is: size, color, b, i, u, img and on. There are used for customizing the font size, font color, bold, italic, underline, image and click event. Every tag should has a start tag and an end tag. The name and attribute format of the start tag must meet the requirements and be all lowercase.

Here is an example of the size and color tag:

Optional attribute of img tag

For better typography, additional optional attributes to the img tag have been provided. Developers can use width, height to specify the size of the SpriteFrame. This will allow the image to be larger or smaller than the line height (but it will not change the line height).

When the height or width of the SpriteFrame changes, The align attribute may need to be used to adjust the alignment of the image in the line.

To support custom image layout, the offset attribute can be used to fine-tune the position of the specified SpriteFrame in the RichText component. When setting the offset attribute, keep in mind that the value must be an integer, and it will cause the image to overlap the text if it is not set properly.

is equal to:

<color=green><size=30>I'm green</size></color>

Since the RichText component is assembled from multiple Label nodes, the number of drawcalls for complex rich text will also be high. Therefore, the engine provides the CacheMode setting of the Label component for the RichText component to avoid the increase of drawcall. For a detailed description of each cache type, please refer to the documentation.

Note: the RenderTexture module in the Project -> Project Settings -> Module Config panel cannot be removed when using the cache mode.

The RichText component is implemented in the JavaScript layer and uses the Label node as the rendering part. All the layout logic goes also in JavaScript layer. This means if you create a very complex RichText, it will end up with many label node created under the hook. And all these label node are using system font for rendering.