This documentation is for a prerelease version of O3DE. Click here to switch to the latest release, or select a version from the dropdown.

Version:

UI Text Component

You can use a Text component to add a text string to an element. Use the Properties pane of the UI Editor to configure the following settings for the Text component.

Text Settings

NameDescription
TextEnter the preferred text string and press Enter. You can also apply text styling markup.
Enable markupIf selected, the text string is parsed for markup tags. For more information, see Text Markup.
ColorClick the color swatch to select a different color.
AlphaUse the slider to choose an alpha value between 0 and 1.
Font pathClick the button and select a font .font file. For more information, see Adding New Fonts.
Font sizeEnter a font size and press Enter.
Font effectSelect an effect from the list. The available font effects are dictated by the font .font file.
Horizontal text alignmentSelect Left, Center, or Right to align the text with the element’s left and right borders.
Vertical text alignmentSelect Top, Center, or Bottom to align the text with the element’s top and bottom borders.
Overflow modeSelect Overflow to allow the text to display beyond the edges of the element. Select Clip text to hide, or clip, any text that flows beyond the element’s edges.
Wrap textSelect No wrap to prevent text from wrapping to subsequent lines. Select Wrap text to allow text to be broken into separate lines.

Text Markup

You can customize the appearance of the text in your game UI with bold and italic styling, multiple text colors, and multiple fonts in a single text string. You can also embed images in the text.

To do this, enter specific tags directly into the Text box, along with your string. The simple markup language is loosely based on HTML.

To use the text styling markup feature, you must use a font family *.fontfamily asset file in the Font path setting (rather than an individual .font asset file). For more information about adding font families to your projects, see Implementing New Fonts.

To use text styling markup

  1. In the UI Editor, add a Text component to an element on your canvas (or modify an existing component).

  2. With the element selected, in the Properties pane, set the Font path property to a *.fontfamily file.

  3. Enter a string with markup styling in the Text box. See the next section for examples.

Styling Tags and Attributes

Example You can use the following tags and attributes when styling text with markup:

Bold tag:

Example that uses a Text component to add bold in the UI Editor.

Italic tag:

Example that uses a Text component to add italics in the UI Editor.

Font color tag:

Example that uses a Text component to add font color in the UI Editor.

Font face tag:

Example that uses a Text component to add different fonts in the UI Editor.

Image Tag and Attributes

Use the <img> tag to embed an image in text.

Example

<img src="images/icons/button" vAlign="center" height="fontHeight" scale="1.5" yOffset="5" xPadding="6"/>

<img src="images/icons/button" vAlign="bottom" height="100" scale="0.8" yOffset="-3" lPadding="2" rPadding="6"/>

Use the following attributes to customize your image. Only the src attribute is required. All other attributes are optional.


AttributeExampleDescription
srcsrc=“images/icons/button”Asset path of the texture to display.
vAlignvAlign=“center”Alignment of image in the text area. The text area refers to the total height of the largest glyph in the font. If you don’t specify this attribute, the default alignment is baseline.
heightheight=“100”Sets the image height and adjusts its width to preserve the aspect ratio. If you don’t specify this attribute, the default alignment is fontAscent.
scalescale=“0.8”Scales the image by the specified scale factor. If not specified, this attribute defaults to 1.0.
yOffsetyOffset="-3"Offsets the image vertically by the specified float value in pixels. If not specified, this attribute defaults to 0.
xPaddingxPadding=“6”Adds equal spacing before and after the image by the specified float value in pixels. If not specified, this attribute defaults to 0.0.
lPaddinglPadding=“10”Adds spacing to the left of the image by the specified float value in pixels. If not specified, this attribute defaults to 0.0.
rPaddingrPadding=“2”Adds spacing to the right of the image by the specified float value in pixels. If not specified, this attribute defaults to 0.0.