UI Image Component

You can use an Image component to add a color tint or texture to an element. Use the Properties pane of the UI Editor to configure the following settings for the Image component.

Image Settings

NameDescription
SpriteTypeSelect one of the following:
Sprite pathClick 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 nameEnter a name of a render target and press Enter.
IndexThe sprite sheet image index that the component will render.
ColorClick 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 .
AlphaUse the slider to choose an alpha value between 0 and 1.
Image typeSelect one of the following:
Blend ModeSelect one of the following:
Fill TypeSelect one of the following:
Fill AmountThe amount of the image to be filled, from 0.00 to 1.00.
Fill Start AngleThe start angle for the fill, measured in degrees clockwise from vertical.
Corner Fill OriginThe starting corner that the image is filled from. Select one of the following:
Edge Fill OriginThe edge from which the image is filled about (radial corner) or from (linear). Select one of the following:
Fill ClockwiseIf selected, the image is radially filled clockwise about the fill center.
Fill CenterIf selected, the center segment of a slice-resized sprite is visible.

Copyright © 2022 Open 3D Engine Contributors

Documentation Distributed under CC BY 4.0.
For our trademark, privacy and antitrust policies, code of conduct, and terms of use, please click the applicable link below or see https://www.lfprojects.org.


The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Policy page.