【Unity3D】UGUI之Image和RawImage

1 纹理（Texture）

Image 控件和 RawImage 控件都是承载渲染图片的控件，都需要指定一个纹理（Texture）图片。在 Assets 窗口选中一张图片，在 Inspector 窗口的参数设置面板可以查看和编辑图片属性。图片属性中最重要的是图片类型（Texture Type），有 Default、Normal map、Editor GUI and Legacy GUI、Sprite（2D and UI）、Coursor、Cookie、Lightmap、Single Channel 8 种类型，其中最常用的是 Default 和 Sprite 2 种类型，以下是这 2 种类型图片的参数设置面板。

当给图片设置精灵（Sprite）类型时，可以点击【Sprite Editor】按钮编辑图片的边框，以解决图片边界变形问题：图片在横向拉伸时，左右两边的边边界不会拉伸；图片纵向拉伸时，上下两边的边界不会拉伸；无论水平还是纵向拉伸，四个角的边界始终不变形。

2 Image 控件

1）面板属性

Image 控件只能添加精灵（Sprite）类型图片， 面板属性如下：

2）Image Type

Image Type 有 Simple、Sliced、Tiled、Filled 4 种类型，对应面板属性如下：

• Simple：图片适配控件大小自由拉伸，勾选 Preserve Aspect 保持图片宽高比不变，Set Native Size 设置控件宽高为图片原始宽高；
• Sliced：图片适配控件大小自由拉伸，需要设置边界，4 个角的边界始终不变形，取消 Fill Center 只绘制边界；
• Tiled：当控件比较大、图片比较小时，图片从下往上、从左往右重复平铺，铺满整个控件空间；
• Filled：只显示图片的一部分，可以用于技能 CD，Set Native Size 设置控件宽高为图片原始宽高。

重复平铺：

绘制部分：

3）遮掩（Mask）

可以给 Image 控件添加 Mask 组件，以控制子控件的显示区域，如：创建一个 Image 控件，改名为 MaskImage，将 Source Image 设置为一个圆形的图片（已修改为 Sprite 类型），并为其添加 Mask 组件；在 MaskImage 下创建 Image 子控件，将 Source Image 设置为一个正方形的 Sprite 图片。控件层级、Mask 组件、原图如下：

显示效果如下：

注意： MaskImage 中的圆形图片，必须是 png 格式的，并且圆形外面无像素（不是白色或黑色）。

3 RawImage 控件

RayImage 对图片类型没有要求，但是没有 Image Type 属性，面板属性如下：

4 应用

本节将通过技能 CD 的案例，展示 Image 控件的应用。

1）创建 UI

创建 3 个 Image 控件，分别重命名为 Circle、Skill、White，并给 Circle 添加 Mask 组件，再创建一个 Text 控件，这些控件的宽高都是 300，控件层级结构如下：

Circle、Skill、White 对应的图片如下：

将 White 控件的 Image Type 设置为 Filled，Fill Origin 设置为 Top，取消 Clockwise 选项，如下：

2）脚本组件

SkillCD.cs

using UnityEngine;
using UnityEngine.UI;

public class SkillCD : MonoBehaviour {
    private Image skillWhiteImage;
    private Text skillWaitText;
    private bool hasReleaseSkill = false;
    private float skillInterval = 2; // 技能冷却时间
    private float skillWaitTime = 0; // 释放技能后等待时间

    private void Start () {
        skillWhiteImage = transform.Find("White").GetComponent<Image>();
        skillWaitText = transform.Find("Text").GetComponent<Text>();
        skillWhiteImage.fillAmount = 0;
    }

    private void Update () {
        skillWaitTime += Time.deltaTime;
        if (!hasReleaseSkill && Input.GetMouseButtonDown(0)) {
            releaseSkill();
        }
        waitSkill();
    }

    private void releaseSkill() { // 释放技能
        skillWhiteImage.fillAmount = 1;
        skillWaitText.text = skillInterval.ToString("0.0");
        hasReleaseSkill = true;
        skillWaitTime = 0;
    }

    private void waitSkill() { // 等待技能点亮
        if (hasReleaseSkill) {
            float resTime = skillInterval - skillWaitTime;
            skillWhiteImage.fillAmount = resTime / skillInterval;
            skillWaitText.text = resTime.ToString("0.0");
            if (skillWaitTime > skillInterval) {
                hasReleaseSkill = false;
                skillWaitText.text = "";
            }
        }
    }
}

3）运行效果

声明：本文转自【Unity3D】UGUI之Image和RawImage