Lumberyard
User Guide (Version 1.21)

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

  1. In Lumberyard Editor, in the Samples Project, open the UiFeatures level.

  2. Press Ctrl+G to play the game and then choose fComponents, and then Visual Components, and then Image.

    You can view examples of image types such as sliced, stretched, fixed, tiled, stretched to fit, and stretched to fill.

  3. Press Esc to exit the game.

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

You can open the following canvases:

  • ColorTest.uicanvas

  • ImageTypes.uicanvas

Use the Properties pane of the UI Editor to configure the following settings for the Image component.

Image Settings

Name Description
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

Enter a name of a render target and press Enter.

For more information, see Adding a Render Target to a UI Element.

Index

The sprite sheet image index that the component will render.

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 for the fill, measured in degrees clockwise from vertical.

Corner Fill Origin

The starting corner that the image is filled from.

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.