Menu
Lumberyard
User Guide (Version 1.13)

Visual Components

You can add one visual component to an element: Image or Text.

Image

You can use an image component to add a color tint or texture to an element.

To see in-game examples of completed canvases with image components, open the level UiFeatures in the project SamplesProject. Press Ctrl+G to play the game, and then choose Components, Visual Components, Image. You can view examples of image types such as sliced, stretched, fixed, tiled, stretched to fit, and stretched to fill. Press Esc to exit the game.

To view these same canvases in the UI Editor, navigate to the \Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Image directory.

You can open the following canvases:

  • ColorTest.uicanvas

  • ImageTypes.uicanvas

To edit an image component

In the Properties pane of the UI Editor, expand Image and do the following, as appropriate:

SpriteType

Select one of the following:

  • Sprite/Texture asset – Image displays the asset specified for Sprite path.

  • Render target – Image displays the render target specified in Render target name.

Sprite path

Click the browse () icon and select a suitable file.

Click the open-in (arrow) icon next to Sprite path to open the Sprite Editor.

Render target name

Type a name of a render target and press Enter.

Index

The sprite-sheet image index that will be rendered by the component.

Color

Click the color swatch to select a different color.

Displays only if the SpriteType is Sprite/Texture asset, and the image has been configured as a sprite sheet using the Sprite Editor.

Alpha

Use the slider to choose an alpha value between 0 and 1.

Image type

Select one of the following:

  • Stretched – Stretches the texture with the element without maintaining aspect ratio.

  • Sliced – Treats the texture as a 9-sliced sprite.

  • Fixed – Makes the texture pixel perfect.

  • Tiled – Tiles the texture to fill the element.

  • Stretched to Fit – Scales to fit while maintaining aspect ratio.

  • Stretched to Fill – Scales to fill while maintaining aspect ratio.

     

Blend Mode

Select one of the following:

  • Normal – Uses alpha to interpolate colors between elements.

  • Add – Blends colors between elements by adding (lightening) color values together.

  • Screen – Blends colors using inverse source color resulting in a lighter color.

  • Darken – Chooses the darker color channel when blending between elements.

  • Lighten – Chooses the lighter color channel value when blending between elements.

Fill Type

Select one of the following:

  • None – Displays the entire image.

  • Linear – Uses Fill Amount value to fill the image linearly from one edge to the opposite edge.

  • Radial – Uses Fill Amount value to fill the image radially 360 degrees around the center of the image.

  • Radial Corner – Uses Fill Amount value to fill the image radially 90 degrees around a corner of the image.

  • Radial Edge – Uses Fill Amount value to fill the image radially 180 degrees around the midpoint of an edge of the image.

Fill Amount

The amount of the image to be filled from 0.00 to 1.00.

Fill Start Angle

The start angle, in degrees, for the fill, measured clockwise from straight up.

Corner Fill Origin

The starting corner from which the image is filled

Select one of the following:

  • Top Left

  • Top Right

  • Bottom Left

  • Bottom Right

Edge Fill Origin

The edge from which the image is filled about (radial corner) or from (linear)

Select one of the following:

  • Left

  • Top

  • Right

  • Bottom

Fill Clockwise

If selected, the image is radially filled clockwise about the fill center.

Fill Center

If selected, the center segment of a slice-resized sprite is visible.

Text

You can use a text component to add a text string to an element.

To see in-game examples of completed canvases with text components, open the level UiFeatures in the project SamplesProject. Press Ctrl+G to play the game, and then choose Components, Visual Components, Text. You can view examples of text alignment, color and alpha, styling markup, overflow and wrapping, and character and line spacing. Press Esc to exit the game.

To view these same canvases in the UI Editor, navigate to the \Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Text directory.

You can open the following canvases:

  • Alignment.uicanvas – Examples of aligning the text within its element rectangle.

  • ColorAlpha.uicanvas – Examples of setting different colors and transparency levels.

  • Markup.uicanvas – Examples of customizing the appearance of text using different stylings, colors, and font within a single string.

  • OverflowWrap.uicanvas – Examples of different wrap and overflow options.

  • Text.uicanvas – Examples of different wrap and overflow options.

To edit a text component

In the UI Editor Properties pane, expand Text and do the following, as appropriate:

Text

Type the preferred text string and press Enter. Here, you can apply text styling markup.

Color

Click the color swatch to select a different color.

Alpha

Use the slider to choose an alpha value between 0 and 1.

Font path

Click the button and select a font .font file. For more information, see Adding New Fonts.

Font size

Type a font size and press Enter.

Font effect

Select an effect from the list. The available font effects are dictated by the font .font file.

Horizontal text alignment

Select Left, Center, or Right to align the text with respect to the element's left and right borders.

Vertical text alignment

Select Top, Center, or Bottom to align the text with respect to the element's top and bottom borders.

Overflow mode

Select 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 text

Select No wrap to prevent text from wrapping to subsequent lines.

Select Wrap text to allow text to be broken into separate lines.

Text Styling Markup

You can customize the appearance of the text in your game UI by using bold and italic styling, multiple text colors, and multiple fonts in a single text string. You type specific tags directly into the Font box, along with your string. The simple markup language used 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. Type a string with markup styling in the Text box. See the next section for examples.

Tags and Attributes

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

Bold tag: <b>
Italic tag: <i>
Font color tag: <font color>
Font face tag: <font face>

On this page: