Skip to main content

Text

The Text component allows you to add and customize text within your effect, offering a range of properties to style and personalize text. Key properties include text size, font, color, opacity, and alignment options for flexible layout. Additionally, you can enhance text with background colors, rounded corners, outlines, shadows, and glow effects for a dynamic visual impact. This component also supports automatic resizing and right-to-left language display, making it adaptable to various design needs.

text component properties

Add a Text Component​

To add a Text component:

  1. Go to the Inspector panel
  2. Click + Add Component
  3. Go to 2D
  4. Click Text

Properties​

PropertyDescription
TextDisplays the characters on the screen. Supports right-to-left languages.
Resize to FitAutomatically adjusts the text and background to fit text size. For instance, if the text changes dynamically, the background will resize accordingly.
SizeSets the size of the text on the screen
FontDetermines the font style of the text
ColorSets the HEX color of the text characters
OpacityAdjusts text transparency, ranging from 0.0 (fully transparent) to 1.0 (fully opaque)
Style
  • Bold: Makes the text thicker and darker
  • Italic: Slants the text to the right
  • Underline: Adds an underline beneath the text
Direction
  • Horizontal: Displays the text horizontally
  • Vertical: Displays the text vertically
Horizontal Alignment
  • Horizontal Left: Displays the text horizontally and left-aligned
  • Horizontal Center: Displays the text horizontally and center-aligned
  • Horizontal Right: Displays the text horizontally and right-aligned
  • Horizontal Justified: Aligns text evenly between the left and right margins, creating straight edges on both sides by adjusting spacing between words or characters for a unified, polished look
Vertical Alignment
  • Vertical Left: Displays the text vertically and left-aligned
  • Vertical Center: Displays the text vertically and center-aligned
  • Vertical Right: Displays the text vertically and right-aligned
Letter SpacingHow far apart the characters are from each other. The range is from 0.0 to 1.0.
Line SpacingHow far apart the lines of text are from each other. The range is from 0.0 to 1.0.
BackgroundSets a color block behind the text. If selected, you can adjust the following:
  • Fill Mode: Determine if you want the background to be a Solid Color, Texture, or Gradient
    • For Texture, you can import and assign a texture asset, and control the horizontal and vertical orientation of it.

      Note: Only static textures are supported

    • For Gradient, you can choose two or three colors, as well as the color positions for the gradient effect
  • Background Color: The HEX color of the background
  • Background Opacity: The transparency of the background. The range is from 0.0 to 1.0, with a default value of 1.0.
  • Corner Radius: Adjusts the curvature of the background block's corners, allowing you to create rounded edges for a softer, smoother appearance
  • Height: The height of the background block
  • Width: The width of the background block
OutlineSets an outline around the text. If you click the Add button [+], you can add multiple outlines and adjust the following:
  • Outline Color: The HEX color of the outline
  • Outline Opacity: The transparency of the outline. The range is from 0.0 to 1.0, with a default value of 1.0.
  • Outline Size: The size of the outline. The range is from 0 to 100, with a default value of 30.
Outer ShadowSets an outer shadow around the text. If you click the Add button [+], you can add multiple outer shadows and adjust the following:
  • Shadow Color: The HEX color of the shadow
  • Shadow Opacity: The transparency of the shadow. The range is from 0.0 to 1.0, with a default value of 1.0.
  • Shadow Offset: The offset of the shadow. The range is from 0 to 100, with a default value of 10.
  • Shadow Angle: The angle of the shadow. The range is from -180 to 180, with a default value of -45.
  • Shadow Feather: The intensity of feathering (soft edges) of the shadow. The range is from 0.0 to 1.0, with a default value of 0.00.
Inner ShadowSets a shadow inside the text. If selected, you can adjust the following:
  • Shadow Color: The HEX color of the shadow
  • Shadow Opacity: The transparency of the shadow. The range is from 0.0 to 1.0, with a default value of 1.0.
  • Shadow Offset: The offset of the shadow. The range is from 0 to 100, with a default value of 10.
  • Shadow Angle: The angle of the shadow. The range is from -180 to 180, with a default value of -45.
  • Shadow Feather: The intensity of feathering (soft edges) of the shadow. The range is from 0.0 to 1.0, with a default value of 0.00.
GlowSets a glow to the text. If selected, you can adjust the following:
  • Color: The HEX color of the glow
  • Style: The style of the glow. Can be Outward (emitted away from the text) or Contoured (emitted around the text).
  • Intensity: How bright the appearance of the glow looks. The range is from 0 to 1, with a default value of 0.5.
  • Range: How far the glow light reaches. The range is from 0 to 1, with a default value of 0.5.
  • Horizontal Angle: The horizontal direction of the emitted light. The range is from -0.5 to 0.5, with a default value of 0.00.
  • Vertical Angle: The vertical direction of the emitted light. The range is from -0.5 to 0.5, with a default value of 0.00.