画地为Mask，随心所欲的高效遮罩组件[Unity]

组件效果##

MeshMask遮罩效果图

可以看到无论Mask形状是凸边形还是复杂的凹边形，都能准确地将Mask形状数据序列化成顶点，面片数据，
提供给需要Mask的图片修改渲染顶点，达到遮罩效果。组件用法类似于Unity Mask，且效率优于Unity Mask。插件已上传至Github[点击下载]， 欢迎试用~

效率对比##

使用原生Mask，10个Icon占用了15个Drawcall

使用MeshMask，10个Icon仅占用1个Drawcall

Scene切换到Overdraw模式：红框为Mask的Overdraw；蓝框为MeshMask的Overdraw

从上面三张图可以看到MeshMask相比Unity的Mask，在减少Drawcall消耗、Overdraw消耗等两方面都是完胜的。

Drawcall消耗#####

这10个icon都打包在同一图集的，使用Unity Mask，没办法享受图层合并，消耗了15个Drawcall；使用MeshMask的情况下，看截图里Batches为2，除去摄像机占用的1个Batch，10个icon仅占用1个Batch，即1个Drawcall。在Drawcall资源如此昂贵的情况下（一般机器都会要求Drawcall在200以下），这种性能节省效果非常显著。

Overdraw消耗#####

而看图三的Overdraw，使用Unity Mask的红框部分，被Mask的图片全部绘制一次，Unity Mask再做像素剔除，被Mask的部分又绘制了一次，总共需要绘制两次，且有一次是绘制了完全用不到的区域。使用MeshMask的蓝框部分，因为是靠改变顶点绘制出来的icon，因此仅有被Mask部分被绘制了一次。

面片消耗#####

当然，使用MeshMask的Image需要消耗比普通Image多一些的顶点和面片，观察Stats面板，使用MeshMsk的10个icon多占用1.3K的顶点和面片，即1个icon占用130个顶点，面片。然而GPU渲染顶点，面片的效率非常高（市面手机GPU渲染多边形数基本上2000-10000+万多边形/每秒以上），这点消耗跟Drawcall比起来就微不足道了。

小结#####

在渲染上，GPU、CPU两者的性能瓶颈往往是CPU；GPU的性能瓶颈往往是像素点填充率（Overdraw导致），CPU的性能瓶颈往往是Drawcall。所以，渲染性能排查，几项指标关注优先级应该是：Drawcall > Overdraw > 面片

组件使用##

MeshMask插件目录结构

插件里有MeshMask、MeshImage、MeshButton三个UI组件

MeshMask组件Inspector面板

MeshMask组件作用类似Unity Mask，依赖了Image及PolygonCollider2D组件，带有[根据Image组件生成Mask]、[根据Collider组件生成Mask]两个菜单项，支持两种方式生成Mask数据。

被遮罩GameOjecct的Inspector面板

MeshImage、MeshButton组件挂在需要被遮罩的GameObject上，设置好MeshMask对象，就能获得数据，实现遮罩或者精确点击。

组件实现##

不同于CircleImage，只需要简单的对圆形进行顶点，面片计算；MeshMask要考虑几个点：

1. 需要能对所有可能的图形进行顶点，面片计算。
2. 考虑顶点，面片计算需要读取Image，且有一定性能开销，所以不能在Run-time中实时计算数据，需要预先计算好vertices,triangle数据，并序列化存放在GameObject中，运行时读取。
3. 保证MeshMask灵活性，除了根据Image进行顶点，面片计算，希望像PS一样，提供路径工具，让开发可以可视化地新增、修改Mask形状。
4. 对所有图形支持像素级点击判断

更多unity2018的功能介绍请到paws3d爪爪学院查找。链接https://www.paws3d.com/learn/，也可以加入unity学习讨论群935714213

近期更有资深开发人士直播分享unity开发经验，详情请进入官网或加入QQ群了解