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
}

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
}

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
}

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
    }
}

Hint

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

Practice

1. Which Unity UI component is best suited for displaying a sprite with color tinting?

easy

A. RawImage component

B. Image component

C. Text component

D. Button component

Solution

1. Step 1: Understand the purpose of Image component

   The Image component is designed to display sprites and supports color tinting, making it ideal for sprite display with color changes.

2. Step 2: Compare with RawImage component

   RawImage displays textures and allows UV adjustments but does not support sprite-specific features like tinting.

3. Final Answer:

   Image component -> Option B

4. Quick Check:

   Sprite + tinting = Image component [OK]

Hint: Image = sprites + tinting; RawImage = textures + UV [OK]

Common Mistakes:

• Confusing RawImage with Image for sprites
• Thinking Text or Button can display sprites
• Ignoring color tinting feature

2. Which of the following is the correct way to assign a texture to a RawImage component in C# script?

easy

A. rawImage.texture = myTexture;

B. rawImage.sprite = myTexture;

C. rawImage.image = myTexture;

D. rawImage.setTexture(myTexture);

Solution

1. Step 1: Recall RawImage property for texture

   RawImage uses the 'texture' property to assign a Texture object.

2. Step 2: Check syntax correctness

   Assigning with 'rawImage.texture = myTexture;' is correct syntax in Unity C#.

3. Final Answer:

   rawImage.texture = myTexture; -> Option A

4. Quick Check:

   RawImage.texture = Texture [OK]

Hint: RawImage uses .texture, Image uses .sprite [OK]

Common Mistakes:

• Using .sprite with RawImage
• Calling non-existent methods like setTexture()
• Confusing Image and RawImage properties

3. Given this code snippet in Unity C#:

Image img = GetComponent<Image>();
img.color = new Color(1, 0, 0, 0.5f);

What will be the visible effect on the Image component?

medium

A. The image will become fully transparent

B. The image will turn solid red with no transparency

C. The image color will not change

D. The image will have a semi-transparent red tint

Solution

1. Step 1: Analyze the color assignment

   The color is set to red (1,0,0) with alpha 0.5, meaning 50% transparency.

2. Step 2: Understand Image color effect

   Image component applies color tint including alpha, so the image will appear red and semi-transparent.

3. Final Answer:

   The image will have a semi-transparent red tint -> Option D

4. Quick Check:

   Color RGBA(1,0,0,0.5) = semi-transparent red [OK]

Hint: Alpha < 1 means transparency; RGB sets tint color [OK]

Common Mistakes:

• Assuming alpha 0.5 means fully transparent
• Thinking color change won't affect Image
• Confusing solid color with tint

4. What is wrong with this code snippet that tries to assign a sprite to a RawImage component?

RawImage rawImg = GetComponent<RawImage>();
rawImg.sprite = mySprite;

medium

A. The sprite must be converted to a texture first

B. You must use 'rawImg.texture' to assign a sprite

C. RawImage does not have a 'sprite' property

D. The code should use 'rawImg.image' instead of 'rawImg.sprite'

Solution

1. Step 1: Check RawImage properties

   RawImage component uses 'texture' property, not 'sprite'. 'sprite' is for Image component.

2. Step 2: Understand property mismatch

   Assigning 'sprite' to RawImage causes error because it doesn't exist.

3. Final Answer:

   RawImage does not have a 'sprite' property -> Option C

4. Quick Check:

   RawImage lacks sprite property [OK]

Hint: RawImage uses .texture, not .sprite [OK]

Common Mistakes:

• Trying to assign sprite directly to RawImage
• Confusing Image and RawImage components
• Assuming RawImage has 'image' property

5. You want to display a UI element in Unity that shows a texture with custom UV coordinates to create a scrolling effect. Which component should you use and how do you adjust the UVs?

hard

A. Use RawImage component and modify its uvRect property

B. Use Image component and change its sprite's UVs directly

C. Use RawImage component and change the color property

D. Use Image component and animate its color alpha

Solution

1. Step 1: Identify component for texture with UV control

   RawImage supports textures and allows UV adjustments via uvRect property.

2. Step 2: Understand how to create scrolling effect

   Changing uvRect offsets scrolls the texture on RawImage, enabling the effect.

3. Final Answer:

   Use RawImage component and modify its uvRect property -> Option A

4. Quick Check:

   Scrolling texture = RawImage + uvRect [OK]

Hint: Scroll textures by changing RawImage.uvRect [OK]

Common Mistakes:

• Trying to modify sprite UVs in Image component
• Using color changes to scroll texture
• Confusing Image and RawImage for UV control