Creating UI Elements : Image
The Image control displays a non-interactive image to the user. You can use this for purposes such as decorations or icons, and you can change the image from a script to reflect changes in other controls.
UI Image Element
Perhaps the most commonly used UI element, the Image has a Rect Transform component and an Image component on it. A sprite has be applied to the Image component under the Target Graphic field, and its colour can be set in the Color field.
When a Source Image is specified, the Image Type field defines how the applied sprite will appear;
- Simple — Scales the whole sprite equally.
- Sliced — Utilises the 3x3 sprite division so that resizing does not distort corners and only the center part is stretched.
- Tiled — Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For sprites with no borders at all, the entire sprite is tiled.
- Filled — Shows the sprite in the same way as Simple does except that it fills in the sprite from an origin in a defined direction, method and amount.
The option to Set Native Size, which is shown when Simple or Filled is selected, resets the image to the original sprite size. Preserve Aspect ensure the image retains its existing dimensions.
Images can be imported as UI sprites by selecting Sprite(2D / UI) from the ‘Texture Type’ settings in the Sprite Editor providing the option of 9-slicing the image, this splits the image into 9 areas so that if the sprite is resized the corners are not stretched or distorted.
Adding an Image UI Element
Similar to how we created a Text Element as a child of the UI Manager, go to the Scene Hierarchy, Create → UI → Image. Make sure it’s a child of the Canvas to which the UI Manager is attached.
Now we have a default 100x100 Image and we can alter its position and dimensions. To make sure the Image is placed in the absolute center of the scene we reset its position and make sure the its anchored in the middle center, which should be the default.
Images are important as they make up for the majority of UI elements. Now that we understand the basics, let’s get started using them for the Space Shooter Project.
In the following Article we’ll have a look at using the Image through scripting by introducing a simple Game Over screen.
Good luck !
