Detailed explanation of the use of the Image image component of Unity UGUI

1. What is the Image component of UGUI?

The Image component of UGUI is a UI component in the Unity engine that is used to display 2D images.

It provides a simple and flexible way to load and display pictures in the game.

2. Why use the Image component of UGUI?

Using UGUI's Image component can easily display various image resources in the game, such as character avatars, props icons, etc.

It has the following advantages:

Ease of use: UGUI's Image component provides a simple and easy-to-understand interface, allowing developers to easily load and display images.
flexibility: You can set the properties of the Image component, such as color, transparency, etc. to achieve image display of various effects.
Performance optimization: UGUI's Image component supports batch rendering of images and can efficiently process a large number of image resources.

3. How to use the Image component of UGUI?

Here are five specific example codes for using UGUI's Image component, with operation steps and precautions:

Example Code 1: Load and display the picture

using UnityEngine;
using ;
public class ImageExample : MonoBehaviour
{
    public Image image;
    public Sprite sprite;
    private void Start()
    {
         = sprite;
    }
}

Operation steps:

Create an empty object and mount the script to the object.
Add a Canvas object in the scene and set the Render Mode of Canvas to Screen Space - Overlay.
Create an Image object under Canvas and drag the Image component to the image field of the script.
Drag the image resource to be displayed onto the script's sprite field.
Run the game and the picture will be displayed in the scene.

Notes:

Make sure that the image resources have been imported into the Unity project.
Make sure the Render Mode of Canvas is set correctly to ensure that the image is displayed in the correct position.

Example Code 2: Set the color of the picture

using UnityEngine;
using ;
public class ImageExample : MonoBehaviour
{
    public Image image;
    private void Start()
    {
         = ;
    }
}

Operation steps:

Create an empty object and mount the script to the object.
Add a Canvas object in the scene and set the Render Mode of Canvas to Screen Space - Overlay.
Create an Image object under Canvas and drag the Image component to the image field of the script.
Run the game and the color of the picture will turn red.

Notes:

You can change the color of the image by setting properties.
Color values can be represented by Unity's Color structure.

Example Code 3: Set the transparency of the picture

using UnityEngine;
using ;
public class ImageExample : MonoBehaviour
{
    public Image image;
    private void Start()
    {
        Color color = ;
         = 0.5f;
         = color;
    }
}

Operation steps:

Create an empty object and mount the script to the object.
Add a Canvas object in the scene and set the Render Mode of Canvas to Screen Space - Overlay.
Create an Image object under Canvas and drag the Image component to the image field of the script.
Run the game and the transparency of the picture will become 50%.

Notes:

You can change the transparency of the image by setting properties.
The value range of transparency is 0~1, 0 means completely transparent, and 1 means completely opaque.

Example Code 4: Set the filling method of the picture

using UnityEngine;
using ;
public class ImageExample : MonoBehaviour
{
    public Image image;
    private void Start()
    {
         = ;
         = ;
         = 0.5f;
    }
}

Operation steps:

Create an empty object and mount the script to the object.
Add a Canvas object in the scene and set the Render Mode of Canvas to Screen Space - Overlay.
Create an Image object under Canvas and drag the Image component to the image field of the script.
Run the game and the picture will fill 50% of the area in a horizontal manner.

Notes:

You can change the filling method and filling ratio of the picture through settings and attributes.
It represents the filling method, represents the horizontal filling, and represents the filling ratio.

Example Code 5: Set the size and position of the picture

using UnityEngine;
using ;
public class ImageExample : MonoBehaviour
{
    public Image image;
    private void Start()
    {
        RectTransform rectTransform = ;
         = new Vector2(200, 200);
         = new Vector2(100, 100);
    }
}

Operation steps:

Create an empty object and mount the script to the object.
Add a Canvas object in the scene and set the Render Mode of Canvas to Screen Space - Overlay.
Create an Image object under Canvas and drag the Image component to the image field of the script.
When running the game, the image will be in size 200x200 and the position on the Canvas is (100, 100).

Things to note

The size of the picture can be changed by setting it.
You can change the position of the image on Canvas by setting it.

The above is the introduction and use of the Image component of UGUI, and the example code and operation steps. I hope it will be helpful to you!

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