Introduction and use of RawImage (original picture) component of Unity UGUI

Introduction and use of RawImage (original picture) component of Unity UGUI

1. What is the RawImage component?

RawImage is a component in Unity UGUI, used to display raw pictures. Unlike the Image component, RawImage can directly display the pixel data of the original image without additional processing.

2. How the RawImage component works

The RawImage component realizes the function of displaying the original image by directly passing the pixel data of the original image to the graphics card for rendering. It can display pictures in various formats, including common PNG, JPG and other formats.

3. Common properties of RawImage components

• Texture : Used to specify the texture of the original picture to be displayed.
• Color : It is used to specify the color of the picture, and the fade-in and fade-out effect of the picture can be realized by adjusting the transparency.
• Material : It is used to specify the material of the picture, and different rendering effects can be achieved by changing the material.
• UV Rect : Used to specify the position and size of the image in the texture.

4. Common functions of RawImage component

• SetNativeSize() : Automatically adjust the size of the RawImage according to the size of the original image to keep it consistent with the image.
• SetMaterialDirty() : Marks the material as dirty, causing it to re-render on the next frame.
• SetVerticesDirty() : Marks a vertex as dirty, causing it to recalculate the vertex position in the next frame.

5. Sample code

Example 1: Display a picture

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;

    void Start()
    {
        rawImage.texture = texture;
    }
}

Steps:

1. Create an empty object and add the RawImage component to it.
2. Drag the image to be displayed onto the Texture property of the RawImage component.
3. Add the above example code to a script and mount the script on the empty object.
4. Run the game, you can see that the picture is displayed in the RawImage component.

Precautions:

• Make sure the image to be displayed has been imported into the Unity project.

Example 2: Adjusting the color of an image

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    public Color color;

    void Start()
    {
        rawImage.texture = texture;
        rawImage.color = color;
    }
}

Steps:

1. Create an empty object and add the RawImage component to it.
2. Drag the image to be displayed onto the Texture property of the RawImage component.
3. Add the above example code to a script and mount the script on the empty object.
4. In the Inspector panel, adjust the Color property of the RawImage component to change the color of the image.
5. Run the game and you can see that the color of the picture is changed.

Precautions:

• The transparency of the Color property can be faded in and faded out by adjusting the Alpha value.

Example 3: Resizing an image

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;

    void Start()
    {
        rawImage.texture = texture;
        rawImage.SetNativeSize();
    }
}

Steps:

1. Create an empty object and add the RawImage component to it.
2. Drag the image to be displayed onto the Texture property of the RawImage component.
3. Add the above example code to a script and mount the script on the empty object.
4. Run the game, you can see that the size of the RawImage is automatically adjusted to match the picture.

Precautions:

• Before calling the SetNativeSize() function, make sure that the Texture property of the RawImage has been assigned a value.

Example 4: Change picture

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture1;
    public Texture texture2;

    void Start()
    {
        rawImage.texture = texture1;
    }

    public void ChangeTexture()
    {
        rawImage.texture = texture2;
    }
}

Steps:

1. Create an empty object and add the RawImage component to it.
2. Drag picture 1 and picture 2 to be displayed onto the Texture property of the RawImage component.
3. Create a button and add the above sample code to a script and attach the script to the button.
4. Link the button's OnClick event to the ChangeTexture() function.
5. Run the game, click the button, and you can see that the picture is replaced with picture 2.

Precautions:

• Make sure that the button's OnClick event has been correctly linked to the ChangeTexture() function.

Example 5: Changing the material

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    public Material material;

    void Start()
    {
        rawImage.texture = texture;
        rawImage.material = material;
    }
}

Steps:

1. Create an empty object and add the RawImage component to it.
2. Drag the image to be displayed onto the Texture property of the RawImage component.
3. Drag the material to be used onto the Material property of the RawImage component.
4. Add the above example code to a script and mount the script on the empty object.
5. Run the game, you can see that the rendering effect of the picture is replaced with the effect defined by the material.

Precautions:

• Make sure the material you want to use has been imported into your Unity project.

References

• Unity official documentation: RawImage
• Unity official tutorial: Working with Raw Images