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

关注

原创最新推荐文章于 2026-05-19 11:10:27 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

unity 使用image组件显示图片在unity中有多种显示图片的方法，我们这里使用的image组件，在场景中右键新建UI ---> Image，并点击转态栏的2D标识，这样就能从3D视角转成2D平面视角，在Assets中新建picture目录，将需要显示的图片都放进picture目录，并将属性由默认的default设置为Sprite(2D and UI)，因为Image组件只识别这种属性的图片。编写脚本：然后将图片都扔到sprites中其中idx用于每次点击或者按键的自加。阅读详情

一、引言

在 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 编辑器中设置好不同状态的颜色值。