Image and raw image components in Unity - Mini Project: Build & Apply

Image and Raw Image Components in Unity

📖 Scenario: You are creating a simple Unity scene to display pictures using UI components. You will use the Image and RawImage components to show different types of images on the screen.

🎯 Goal: Build a Unity script that sets up two UI elements: one with an Image component showing a sprite, and another with a RawImage component showing a texture. You will learn how to assign images to these components through code.

📋 What You'll Learn

Create a GameObject with an Image component and assign a sprite to it.

Create a GameObject with a RawImage component and assign a texture to it.

Use public variables to assign the sprite and texture in the Unity Editor.

Write a script that sets the Image and RawImage components to display the assigned images.

💡 Why This Matters

🌍 Real World

Displaying images and textures is common in game menus, HUDs, and interactive UI in games and apps.

💼 Career

Understanding how to use Image and RawImage components is essential for UI design roles in game development and interactive media.

1

Create public variables for Image and RawImage components

Write a Unity C# script called ImageSetup. Inside the class, create two public variables: one called imageComponent of type UnityEngine.UI.Image and another called rawImageComponent of type UnityEngine.UI.RawImage.

Unity

using UnityEngine;
using UnityEngine.UI;

public class ImageSetup : MonoBehaviour
{
    // Your code here
}

Need a hint?

Use public Image imageComponent; and public RawImage rawImageComponent; inside the class.

2

Add public variables for Sprite and Texture2D

Add two more public variables to the ImageSetup class: one called spriteToShow of type Sprite and another called textureToShow of type Texture2D.

Unity

using UnityEngine;
using UnityEngine.UI;

public class ImageSetup : MonoBehaviour
{
    public Image imageComponent;
    public RawImage rawImageComponent;
    // Add public variables for sprite and texture below
    // Your code here
}

Need a hint?

Declare public Sprite spriteToShow; and public Texture2D textureToShow; inside the class.

3

Assign the sprite and texture in the Start method

Inside the ImageSetup class, write a Start() method. In it, assign spriteToShow to the sprite property of imageComponent. Also assign textureToShow to the texture property of rawImageComponent.

Unity

using UnityEngine;
using UnityEngine.UI;

public class ImageSetup : MonoBehaviour
{
    public Image imageComponent;
    public RawImage rawImageComponent;
    public Sprite spriteToShow;
    public Texture2D textureToShow;

    // Write Start method to assign images
    // Your code here
}

Need a hint?

Use void Start() { imageComponent.sprite = spriteToShow; rawImageComponent.texture = textureToShow; }

4

Print confirmation messages in Start

Inside the Start() method, after assigning the images, add two Debug.Log statements. One should print "Image component set with sprite." and the other should print "RawImage component set with texture.".

Unity

using UnityEngine;
using UnityEngine.UI;

public class ImageSetup : MonoBehaviour
{
    public Image imageComponent;
    public RawImage rawImageComponent;
    public Sprite spriteToShow;
    public Texture2D textureToShow;

    void Start()
    {
        imageComponent.sprite = spriteToShow;
        rawImageComponent.texture = textureToShow;
        // Add Debug.Log messages below
        // Your code here
    }
}

Need a hint?

Use Debug.Log("Image component set with sprite."); and Debug.Log("RawImage component set with texture."); inside Start().