遮罩是unity里面很常用的一个功能,尤其是对于独立开发者来说,大部分情况下都没有形状大小刚刚好的图片,需要使用mask对图片进行处理。

为什么不用原生Mask:

1. 会导致层级复杂,其实独立开发的话对性能其实要求不高,多点drawcall但也可以接受,当然不加drawcall更好。但是每次调整都要同时修改两个,实在是有些麻烦。

2. 找不到合适的遮罩,对于一些圆角遮罩,如果没美术其实还挺不好找的。而且尺寸也是个问题。

3. Drawcall。这个没啥说的,就是性能问题。

如何解决:

对遮罩的应用,可以分为以下几种需求:

1.尺寸对,但形状不对,且图片尺寸较小。这种情况可以生成需要形状的网格,修改UV,是性能最优方案,成熟的项目一般都用这个。缺点是尺寸一大,就需要增加顶点数,且如果形状复杂的话,编码也挺难受的。丢掉Mask遮罩,更好的圆形Image组件[Unity] - 立航 - 博客园​www.cnblogs.com

2. 尺寸不对

比如我想做一个正方形的头像,但图片是个长方形的,直接用就被拉伸了

对于这种情况,就要重新计算UV,假如原图比较宽,就要根据他们宽高比的差和宽边的比值去计算uv

效果如下:

3. 形状不对,但没需要的遮罩

我们想做一个圆角的头像框,但没圆角的遮罩

当然也可以自己画一个……但对于程序来说,之后可能会需要各种圆滑度的圆角图片,还是一劳永逸的解决比较好

其实也可以用网格的方式去做,但比较麻烦

我参考的Procedural Image这个插件的做法,将信息传入shader,在shader里判断点是否可见

对每个角设置一个半径值r

针对一个点,可以先获取x1,y1,

获取x1,y1要先根据p去判断点位于哪个角

找到两个小于radius的分量,即可根据这两个分量去判断点的位置

此处为右上角的点,所以是x1,y1是width-x,height-y

和半径作差即可求得x2,y2

由x2方+y2方=1即可确定点是否在圆角内

4尺寸不对,形状也不对

把2和3结合起来即可

最后结果如下https://www.zhihu.com/video/1103630044240457728

Logo

这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容,并连接云服务、办公空间等稀缺资源,助你专注创造,无忧运营。

更多推荐