unity3dui中图片加不上_Unity UI 扩展Image组件实现遮罩效果
遮罩是unity里面很常用的一个功能,尤其是对于独立开发者来说,大部分情况下都没有形状大小刚刚好的图片,需要使用mask对图片进行处理。为什么不用原生Mask:1. 会导致层级复杂,其实独立开发的话对性能其实要求不高,多点drawcall但也可以接受,当然不加drawcall更好。但是每次调整都要同时修改两个,实在是有些麻烦。2. 找不到合适的遮罩,对于一些圆角遮罩,如果没美术其实还挺不好找的。而
遮罩是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
更多推荐



所有评论(0)