How to Create Image in Unity UI: Simple Steps

To create an image in Unity UI, add a Canvas to your scene, then right-click it and select UI > Image. Assign a sprite to the Image component to display your picture in the UI.

Syntax

In Unity UI, an image is created using the Image component attached to a GameObject under a Canvas. The key parts are:

• Canvas: The root UI container.
• Image: The UI component that displays a sprite.
• Sprite: The graphic asset shown by the Image.

The basic usage is to create a GameObject with an Image component and assign a sprite to it.

csharp

using UnityEngine;
using UnityEngine.UI;

public class CreateUIImage : MonoBehaviour
{
    public Sprite mySprite;

    void Start()
    {
        // Create Canvas if not present
        Canvas canvas = FindObjectOfType<Canvas>();
        if (canvas == null)
        {
            GameObject canvasGO = new GameObject("Canvas");
            canvas = canvasGO.AddComponent<Canvas>();
            canvas.renderMode = RenderMode.ScreenSpaceOverlay;
            canvasGO.AddComponent<CanvasScaler>();
            canvasGO.AddComponent<GraphicRaycaster>();
        }

        // Create Image GameObject
        GameObject imageGO = new GameObject("MyImage");
        imageGO.transform.SetParent(canvas.transform, false);

        // Add Image component and assign sprite
        Image image = imageGO.AddComponent<Image>();
        image.sprite = mySprite;

        // Set size and position
        RectTransform rect = image.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(200, 200);
        rect.anchoredPosition = Vector2.zero;
    }
}

Output

An image of the assigned sprite appears centered on the screen inside the UI Canvas.

Example

This example script creates a Canvas if none exists, then adds an Image UI element with a sprite you assign in the inspector. The image is sized 200x200 pixels and centered.

csharp

using UnityEngine;
using UnityEngine.UI;

public class UIImageExample : MonoBehaviour
{
    public Sprite exampleSprite;

    void Start()
    {
        Canvas canvas = FindObjectOfType<Canvas>();
        if (canvas == null)
        {
            GameObject canvasGO = new GameObject("Canvas");
            canvas = canvasGO.AddComponent<Canvas>();
            canvas.renderMode = RenderMode.ScreenSpaceOverlay;
            canvasGO.AddComponent<CanvasScaler>();
            canvasGO.AddComponent<GraphicRaycaster>();
        }

        GameObject imageGO = new GameObject("ExampleImage");
        imageGO.transform.SetParent(canvas.transform, false);

        Image image = imageGO.AddComponent<Image>();
        image.sprite = exampleSprite;

        RectTransform rect = image.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(200, 200);
        rect.anchoredPosition = Vector2.zero;
    }
}

Output

The UI shows the exampleSprite image centered on the screen inside the Canvas.

Common Pitfalls

• Not having a Canvas in the scene will prevent UI images from showing.
• Forgetting to assign a Sprite to the Image component results in a blank image.
• Incorrect RectTransform size or position can make the image invisible or off-screen.
• Using a sprite with no import settings set to UI can cause display issues.

csharp

/* Wrong: No sprite assigned, image will be invisible */
Image image = gameObject.AddComponent<Image>();
// image.sprite is not set

/* Right: Assign a sprite to display the image */
image.sprite = mySprite;

Quick Reference

Remember these steps to create a UI image in Unity:

• Add or find a Canvas in your scene.
• Create a new GameObject as a child of the Canvas.
• Add an Image component to the GameObject.
• Assign a Sprite to the Image component.
• Adjust the RectTransform for size and position.

Key Takeaways

Always create or use an existing Canvas to hold UI images.

Assign a sprite to the Image component to make it visible.

Use RectTransform to control the image size and position.

Check sprite import settings to ensure proper UI display.

Without a sprite or Canvas, the UI image will not appear.