UI Text

uiText #

Ad text to your UI by giving entities a uiText component.

The following fields can be configured:

• value: The string to display
• fontSize: The size of the text, as a number.
• color: The color of the text, as a Color4.
• font:
• textAlign:

💡 Tip: A single entity can have both uiText and uiBackground components.

📔 Note: The fontSize is not affected by the size of its entity or parent entities.

ReactEcsRenderer.setUiRenderer(() => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400
    }}
    uiText={{ value: 'SDK 7', fontSize: 80, color: Color4.Red()  }}
  >
))

For multi-line text, you can add line breaks into the string, using \n.

ReactEcsRenderer.setUiRenderer(() => (
  <UiEntity
    uiText={{ 
		value:  "Hello World,\nthis message is quite long and won't fit in a single line.\nI hope that's not a problem." 
	}}
  >
))