Detailed explanation of the usage example of RawImage original image component of Unity UGUI

Unity UGUI's RawImage original image component introduction

1. What is the RawImage component?

RawImage is a component in Unity UGUI that displays original images. Unlike the Image component, RawImage can directly display pixel data of the original image without additional processing.

2. How the RawImage component works

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

3. Common properties of RawImage components

Texture: The texture used to specify the original image to be displayed.
Color: Used to specify the color of the picture, you can adjust the transparency to achieve the fading effect of the picture.
Material: Used to specify the material of the picture, you can achieve different rendering effects by changing the material.
UV Rect: Used to specify the position and size of the image in the texture.

4. Common functions of RawImage components

SetNativeSize(): Automatically adjust the size of the RawImage according to the size of the original image to keep it consistent with the image.
SetMaterialDirty(): Mark the material as dirty so that it re-renders in the next frame.
SetVerticesDirty(): Mark the vertex as dirty so that it recalculates the vertex position in the next frame.

5. Sample code

Example 1: Show an image

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    void Start()
    {
         = texture;
    }
}

Operation steps:

Create an empty object and add the RawImage component to the object.
Drag the image to be displayed onto the Texture property of the RawImage component.
Add the above sample code to a script and mount the script to an empty object.
Run the game and you can see that the image is displayed in the RawImage component.

Notes:

Make sure the image you want to display has been imported into the Unity project.

Example 2: Adjust the color of the picture

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    public Color color;
    void Start()
    {
         = texture;
         = color;
    }
}

Operation steps:

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

Notes:

The transparency of the Color attribute can be achieved by adjusting the Alpha value.

Example 3: Resize the image

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    void Start()
    {
         = texture;
        ();
    }
}

Operation steps:

Create an empty object and add the RawImage component to the object.
Drag the image to be displayed onto the Texture property of the RawImage component.
Add the above sample code to a script and mount the script to an empty object.
When running the game, you can see that the size of the RawImage is automatically adjusted to the same as the picture.

Notes:

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

Example 4: Replace the picture

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture1;
    public Texture texture2;
    void Start()
    {
         = texture1;
    }
    public void ChangeTexture()
    {
         = texture2;
    }
}

Operation steps:

Create an empty object and add the RawImage component to the object.
Drag and drop the image 1 and image 2 to be displayed onto the Texture property of the RawImage component.
Create a button and add the above sample code to a script and mount the script to the button.
Associate the OnClick event of the button to the ChangeTexture() function.
Run the game, click the button and you can see that the picture is replaced with Picture 2.

Notes:

Make sure that the OnClick event of the button is correctly associated with the ChangeTexture() function.

Example 5: Replace the material

using UnityEngine;
using ;
public class Example : MonoBehaviour
{
    public RawImage rawImage;
    public Texture texture;
    public Material material;
    void Start()
    {
         = texture;
         = material;
    }
}

Operation steps:

Create an empty object and add the RawImage component to the object.
Drag the image to be displayed onto the Texture property of the RawImage component.
Drag the material you want to use onto the Material property of the RawImage component.
Add the above sample code to a script and mount the script to an empty object.
Run the game and you can see that the rendering effect of the image has been replaced with the effect defined by the material.

Notes:

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

References

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

The above is the detailed explanation of the use examples of the RawImage original image component of Unity UGUI. For more information about the Unity UGUI RawImage component, please follow my other related articles!