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.

A material can also be applied to the Image component.

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 !

← Previous | Next →




Software Engineer — Unity Game and Application Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CKA v1.19— Tips and Tricks!

Publish Over SSH — Jenkins

Building python from source on Ubuntu 20.04

Combating Software System Complexity: Appropriate Abstraction Layer

How we use Apache Avro at Smartcar

The Hidden Divergence Trading Method in Python.

Coroutines | Pilove Notes

Visual Studio Debugging with Edge Profile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gert Coppens

Gert Coppens

Software Engineer — Unity Game and Application Developer

More from Medium

2D Mobile: Setting Up The Player

Modular Powerup System in Unity

Reload IK Animation

Adding a player ammo indicator to the UI