Unity Image

Unity Image UI

Within the world of Unity UI, the Image component stands as a essential tool for displaying sprites.
Let’s explore its use and various functions, then look at its advantages and disadvantages compared with the RawImage component.

To unlock the full potential of Image, I recommend installing the “com.unity.2d.sprite” package.
This package grants access to the Sprite Editor, allowing you to apply borders and pivot points to your sprites, providing better control during image stretching.

com.unity.2d.sprite package

Table of contents

Add Image Component

To add or create an Image component, as it is a UI component, it must be added as a child of a canvas.

You can add it by:

  • Right-clicking on the scene hierarchy and selecting UI” -> “Image
  • Using the top menu GameObject” -> “UI” -> “Image.”
  • Alternatively, you can add it after creating a GameObject by using the AddComponent button.

Unity add Image

To add an Image component by code, simply use the “AddComponent” method:

using UnityEngine;
using UnityEngine.UI;

public class AppMonoBehaviour : MonoBehaviour
{
    private void AddImage()
    {
        gameObject.AddComponent<Image>();
    }
}

Create a Sprite

To display images, the Image component uses 2D sprites.
To create a sprite, you need to import an image to your project (png, jpg, etc.).
Upon importing to Unity, remember to set the texture type to “Sprite (2D and UI)” and then press the “Apply” button.

Unity texture importer

Modify Sprite Using Code

To modify the sprite programmatically, assign the new sprite to the “sprite” property using code.

using UnityEngine;
using UnityEngine.UI;

public class AppMonoBehaviour : MonoBehaviour
{
    public Image image;
    public Sprite sprite;

    private void Start()
    {
        image.sprite = sprite;
    }
}

The Image Component

The Image component, being a UI component, possesses a “RectTransform” component, allowing it to have a pivot point and anchors.
The width and height fields enable you to control the size of your Image.

Unity image component

Note that, as Image inherits from the “Graphic” class, only one of these components can be present per gameObject.

Additionally, when adding an Image component, even if the material property is empty by default, it utilizes a material using the “UI/Default” shader.

Pro tip: If you want to access the RectTransform of an image in your code, you can directly use the “rectTransform” property of the Image (Graphic) class.

Image Color

As with all graphic components, you can change the color of an image directly in the Inspector, or as already indicated in my article on “how to change color of object“, you can use the “color” property:

using UnityEngine;
using UnityEngine.UI;

public class AppMonoBehaviour : MonoBehaviour
{
    public Image image;

    private void Start()
    {
        image.color = Color.white;
    }
}

Raycast Target

The “raycastTarget” property determines whether Unity considers this image during UI raycasts.
This feature is useful when overlaying graphical components, allowing you to choose which graphic will be used for the raycast.

For example, if a button has a background, an icon, and text, you might choose to enable raycast only on the background, facilitating easy clicking for the user.

New Feature: Raycast Padding

Since Unity 2020, graphical components have the “raycastPadding” property, allowing you to adjust the raycast zone of your components.
The value can be negative to increase the raycast zone.

Unity raycastPadding

This functionality is a significant improvement, as previously, adding invisible images was necessary to extend the raycast area.

using UnityEngine;
using UnityEngine.UI;

public class AppMonoBehaviour : MonoBehaviour
{
    public Image image;

    private void Start()
    {
        image.raycastPadding = new Vector4(10, 10, 10, 10);
    }
}

Prevent Raycast If Transparent

To adjust the alpha sensitivity of the raycast, you need to use code.
The “alphaHitTestMinimumThreshold” property of Image allows you to modify this sensitivity.

This property requires a value between 0 and 1.
When set to 0 (default value), the raycast detects the surface regardless of its transparency.
When set to 1, only fully opaque textures are detected.

Note that the “color” property does not affect this parameter; only the pixels of the texture are used.
Also, if you use a value higher than 0, your sprite must have “Read/Write” enabled in its configuration, or you will encounter an error.

unity alphaHitTestMinimumThreshold
Image cut in two with 0.5 opacity on the left and 0 opacity on the right.

Example using the code:

using UnityEngine;
using UnityEngine.UI;

public class AppMonoBehaviour : MonoBehaviour
{
    public Image image;

    private void Start()
    {
        image.alphaHitTestMinimumThreshold = 0.5f;
    }
}

Image Maskable

The “maskable” property allows an Image to be sensitive or not to the defined UI mask.
In the UI world, “RectMask2D” or “Mask” is used to define masks, and only child objects are subject to the mask.

For example, if you have a complex UI with overlapping elements and you want some images to be masked while others are not, the “maskable” property becomes handy.

Unity Image Type

To activate the option to modify the image type, you must first add a sprite.
Afterward, you will have the choice between these four types:

Simple

The default display of the image using the values of rectTransform to extend the image.

Sliced

For the sliced display, you must specify a border for your sprite in the texture importer.

Unity spriteEditor

According to the Unity documentation, it is preferable with this type to define your sprites with a “fullRect” meshType in the TextureImporter.

Unity meshType

It uses the 9-slicing method, scaling only certain parts for a better rendering.
It is perfect for creating buttons, panels, etc., with dynamic sizes.

Coupled with its “pixels per unit multiplier” option, you can use the same texture with different sizes.

Unity simple vs slicedSquare sprite enlarged horizontally

Note: It is not possible to directly modify the border of a sprite in real-time; the only solution is to recreate a sprite based on the same texture.

Tiled

For the tiled display, similar to sliced, you need to specify a border for your sprite in the texture importer.
It uses the 9-slicing technique for scaling, but instead of extending the image, it repeats it, according to the specified border.

Based on the Unity documentation, it is also preferable with this type to define your sprites with a “fullRect” meshType in the TextureImporter.

Unity sliced vs tiledSquare sprite enlarged horizontally

Filled

The last type is filled, allowing the display of a portion of the image according to the value of the “fillAmount” property.
The “fillMethod” property lets you define the shape used for cutting, with five values: Horizontal, Vertical, Radial 90, Radial 180, and Radial 360.
The “fillOrigin” property determines the starting position of your shape.

This type is perfect for creating life bars, experience bars, animated timers, and more.

Unity sample filledExperience bar using filled in one of my games

Unity Image vs Raw Image

Now, let’s explore the difference between Image and RawImage and when to use each.

The key distinction lies in Image using a Sprite, while RawImage utilizes a texture to display the image.
Image is the default choice, suitable when your images are stored locally and pre-generated as sprites.
On the other hand, RawImage, accepting textures directly, is more suitable when loading images via the web or images requiring raw display.

Additionally, RawImage is faster when dealing with real-time pixel manipulations, such as drawing tools or scratch-off games.

Unity rawImage drawSignature mini-games using RawImage

It’s worth noting that it’s possible to transform a texture into a sprite in real-time using the “Sprite.Create” method.
However, this operation can be slow and memory-intensive, so it should be considered carefully.

 

Key Points

  • Install the “com.unity.2d.sprite” package to unlock the full potential of images.
  • Your Image component must be a child of a canvas.
  • When using Tiled or Filled, use “full rect” as meshType and remember to specify your border.
  • Use RawImage only for specific features or dynamically loaded images via the internet.

Conclusion

Thank you for reading, I hope this article has given you some new insights into the Image component.

Main illustration by press 👍 and ⭐

Leave a Reply

Your email address will not be published. Required fields are marked *