UGUI 知识精讲与实用案例（第 2 弹）——Image组件详解包含案例

本文链接：https://blog.csdn.net/MY_future_/article/details/146325587

一、引言

在 Unity 开发中，UGUI（Unity GUI）是构建用户界面的重要工具。其中的 Image 组件作为展示图片的基础元素，有着丰富的功能和多样的应用场景。本文将结合实际案例，深入讲解 Image 组件的各个参数。

二、Image 组件参数详解

（一）基本参数

Source Image：该参数用于指定要显示的精灵图（Sprite）。在实际项目中，开发者可将准备好的 Sprite 资源拖拽至此。比如制作游戏中的道具展示图，就需将对应的道具 Sprite 设置到该参数。
Color：用于调整 Image 的颜色。图中当前为白色，通过颜色选择器或代码可修改其颜色值。
Material：材质参数，图中显示 “None (Material)”。材质可用于实现特殊的视觉效果，如添加光影、透明渐变等。
Raycast Target：勾选此选项后，Image 可以接收射线检测，常用于交互操作。比如在一个图片展示场景中，勾选该选项的图片可以响应鼠标悬停等交互事件。

（二）Raycast Padding

Left、Bottom、Right、Top：这四个参数用于设置射线检测的内边距。图中均为 0，表示射线检测范围与 Image 实际显示范围一致。在一些需要精确控制交互区域的场景中，如多个重叠的图片，可通过调整这些值来避免误触发交互。

（三）Maskable

Maskable：勾选后，Image 可以被遮罩（Mask）组件影响。在制作类似地图局部显示效果时，该选项能让图片只在遮罩范围内显示。

三、实际案例 —— 动态改变图片颜色

（一）案例需求

在游戏场景中，有一个代表能量的 Image 图标，当能量发生变化时，图标的颜色也随之改变，并且其交互区域稍作扩大以方便点击查看能量详情。

（二）实现步骤

准备资源：准备好代表能量的图标 Sprite。
创建 Image：在 Unity 场景中创建一个 Image 组件，将能量图标 Sprite 赋值给 “Source Image”。
设置交互：勾选 “Raycast Target”，为 Image 添加交互功能。
调整交互区域：设置 “Raycast Padding” 的四个值（如 Left = 10，Bottom = 10，Right = 10，Top = 10），扩大交互区域。
添加脚本：编写 C# 脚本，实现根据能量值改变 Image 颜色的功能。

using UnityEngine;
using UnityEngine.UI;

public class EnergyImageColorChanger : MonoBehaviour
{
    private Image image;
    public Color lowEnergyColor;
    public Color mediumEnergyColor;
    public Color highEnergyColor;
    private float currentEnergy;

    void Start()
    {
        image = GetComponent<Image>();
        currentEnergy = 50f; // 初始能量值示例
    }

    void Update()
    {
        if (currentEnergy < 30)
        {
            image.color = lowEnergyColor;
        }
        else if (currentEnergy < 70)
        {
            image.color = mediumEnergyColor;
        }
        else
        {
            image.color = highEnergyColor;
        }
    }
}

将脚本挂载到 Image 所在的 GameObject 上，并在 Unity 编辑器中设置好不同状态的颜色值。