在Unity5 的UGUI系统上实现图片的遮罩

转载请标明出处：http://blog.csdn.net/u013015161/article/details/46038989

UGUI是Unity官方在4.6 及其后版本中推出的GUI系统， 我们项目中采用的就是这种新的GUI系统。 Unity的GUI系统出现过相当长时间的一段官方空白期， 导致现在大部分游戏公司或者开发团队采用的都是第三方GUI插件，如NGUI等。这种现象的结果是， 虽然去年Unity就推出了这套GUI系统， 但目前网上的能搜索到的大部分GUI问题， 仍然都是针对NGUI的，而UGUI相关的多是一些基础视频教程，所以不少问题都需要自己去摸索和测试（- -|||）。

今天在游戏蛮牛上看到可以通过UGUI提供的mask组件实现遮罩， 但是一笔带过。过后自己在Unity上实践了一下，终于弄清楚了实现流程。

首先看一下官方手册对遮罩的描述：

"A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements.The mask restricts (ie, “masks”) the child elements to the shape of the parent." 

就是说遮罩（Mask）本身不是用来显示，而是用自己的形状来限制子元素的显示的。所以遮罩元素是遮罩元素的父元素。

实现遮罩步骤：

1、新建一个Image，命名为spongebob，显示如下：

2、再建一个Image，命名mask， 作为遮罩。Source Image设置为遮罩图片，如下：

正如所见，这是一张有透明通道的图片，图片中间的一块区域为非透明。

将1中建立的spongebob设置为其子对象，并使两个image坐标上重合：

3、关键来了。 给mask Image添加上mask组件

：component -> UI -> Mask。 属性窗口显示如下：

这个时候，海绵宝宝变成了这样：

（好丑。。）

Show Mask Graphic表示遮罩本身是否显示图像， 在这里， 勾不勾选没有什么影响。勾上的话，如果子image消失的话，可以看到遮罩图形：

不勾选就不展示结果了，反正什么都不剩了。

看到这里， 遮罩图形应该已经很清楚了：一张带同名通道的图片，其不透明部分是子元素显示的窗口。这次遮罩图像的制作使用paint.net完成的， 这里安利一下，体积小，也挺好用的。

计划之后把一些UGUI小功能的测试，包括这次关于遮罩的，统一放在一个开源项目里，自己和有需要的人都可以参考一下。都是很简单的东西，就当 一些tips吧。

项目地址：

https://git.oschina.net/lankton/unitytest.git