【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 种类型图片的参数设置面板。

         【Unity3D】UGUI之Image和RawImage_第1张图片   【Unity3D】UGUI之Image和RawImage_第2张图片  

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

【Unity3D】UGUI之Image和RawImage_第3张图片

2 Image 控件

        1)面板属性 

        Image 控件只能添加精灵(Sprite)类型图片, 面板属性如下:

【Unity3D】UGUI之Image和RawImage_第4张图片

        2)Image Type

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

       【Unity3D】UGUI之Image和RawImage_第5张图片

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

         重复平铺:

【Unity3D】UGUI之Image和RawImage_第6张图片

        绘制部分:

【Unity3D】UGUI之Image和RawImage_第7张图片

        3)遮掩(Mask) 

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

                  【Unity3D】UGUI之Image和RawImage_第8张图片      【Unity3D】UGUI之Image和RawImage_第9张图片

         显示效果如下:

【Unity3D】UGUI之Image和RawImage_第10张图片

        注意: MaskImage 中的圆形图片,必须是 png 格式的,并且圆形外面无像素(不是白色或黑色)。

3 RawImage 控件

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

【Unity3D】UGUI之Image和RawImage_第11张图片

4 应用

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

        1)创建 UI

        创建 3 个 Image 控件,分别重命名为 Circle、Skill、White,再创建一个 Text 控件,这些控件的宽高都是 300,控件层级结构如下:

【Unity3D】UGUI之Image和RawImage_第12张图片

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

        【Unity3D】UGUI之Image和RawImage_第13张图片   【Unity3D】UGUI之Image和RawImage_第14张图片   【Unity3D】UGUI之Image和RawImage_第15张图片

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

【Unity3D】UGUI之Image和RawImage_第16张图片

        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();
		skillWaitText = transform.Find("Text").GetComponent();
		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,Image,RayImage,Mask,技能CD,Unity3D)