UGUI之Image、RawImage使用说明

Image说明

Image是UGUI中最常见的控件，用于图片的显示，需要使用精灵图片。

基本属性

1. Source Image，具体使用的图片，可拖动进来，需要是精灵格式；
2. Color，图片的颜色，包括透明度控制。脚本上有Color、Color32的区别，Color类是Folat类型的参数，大小为0 ~ 1，Color32是Int类型参数，大小为0 ~ 255；
3. Material，图片的材质；
4. Raycast Target，是否能够响应图形射线，是否有点击事件，是否穿透主要是看这个属性；
5. ImageType

• Simple，默认属性
• Sliced，九宫格应用，需要图片做过九宫格分割（下面单独讲），四角在图片拉升时不变，用于一个图适应多个大小，而不会拉伸变形
• Tiled，图片平铺
• Filled，图片消失动画，分为水平、垂直、90°、180°、360°，技能冷却主要依靠这个属性，主要控制Fill Amount的变化

图片切割

九宫格

点击Sprite Editor，进入九宫格切割界面，默认是没有安装这个插件的，需要在Window >> Package Manager >> 搜索框输入 2D Sprite，然后install。

九宫格切割比较简单，理解起来也比较容易，切割后在具体Image中应用是，需要选中Sliced属性，如下图：

图集

图片中可以放入多个图，手动制作成图集，然后进行切割，降低游戏的Draw Call。

图片中需要选择Sprite Mode为“Multiple”，然后点击Sprite Editor。

切割的方式有多种，切割完毕后，一张图，可分为多个精灵图，每个精灵图可以单独使用。

切割完毕，点击Apply进行保存。

切割后一个图片，变为多个精灵。

RawImage可以做什么

一般都用Image这个组件，那么RawImage用来做什么呢？他和Image有什么区别呢？

可以看到他具体对应的文件不需要是一个精灵，只需要是一个Texture，虽然Sprite也是Texture的一种类型，当然RawImage也可以使用精灵。

同时，RawImage有UV Rect，改变UV坐标，可实现一张图片“切分（不是真的切图）”多个区域，如果这一组图相互切换变成一个动画，例如动物跑动，就能实现动图的效果。

RawImage核心代码比Image少很多，Raw Image不支持交互，可用于显示任何图片而不仅仅是Sprite，一般用在背景、图标上,支持UV Rect(用来设置只显示图片的某一部分)，而Image不支持UV Rect。

用途一：小地图

利用Camera的属性 Target Texture，可以指定一个图片给摄像机，这个摄像机什么都不看，只看这个地图。

用途二：帧动画（动图）

改变RawImage的UV坐标，实现动图的效果。

小常识

1. 快速设置图片的长宽

2. 给图片添加像文本那样的阴影效果和描边效果