UGUI实现引导蒙版有多种方案,可以基于shader,或纯粹靠程序实现,这里分享一种最近在项目中使用的基于shader的蒙版方案。
许多基于shader的引导蒙版方案都是将需要遮罩的区域以vector4的形式传入shader,这种方式实现简单且易于理解,而且效果不错,但使用这种方式容易造成一种无法避免的问题:蒙版区域无法旋转,当然除非额外传入遮罩区域的旋转信息。
今天要介绍的方案是直接计算出蒙版区域的矩阵(一个规范化空间,可以将坐标规范化到0-1内),将矩阵传入shader,在蒙版shader中处理顶点时将顶点转入矩阵,以矩阵中的坐标是否在0-1范围内判断(有点类似投影空间裁剪)。以这种方式实现的蒙版优点是,由于矩阵本身记录了坐标、旋转、缩放等信息,不需要在再shader中额外计算,只需要做一次矩阵左乘操作即可拥有同时具有旋转和遮罩功能的引导蒙版。另外c#脚本可以缓存一个当前矩阵,用来做点击穿透判断。另一个优点是,由于矩阵信息本身来自UI的RectTransform,因此可以避开对UI锚点等屏幕自适应规则的计算,总的来说如果熟悉矩阵运算的话,这种方式可以避开很多头疼的计算。另外由于最终是将蒙版中的像素坐标转到实际遮罩区域,并且遮罩区域规范化到0-1内,可以做出边缘过渡柔和的效果。
效果如下:
旋转支持:
穿透判定:
边缘柔和: