首页 > Unity3D之项目开发 > Unity3D之UGUI拓展 > Unity3D UGUI:圆形Image组件,可用来制作头像
2017
03-24

Unity3D UGUI:圆形Image组件,可用来制作头像

昨天在改项目的时候,看到人物头像是圆形的,我就想到用UGUI的Mask组件,但是我试了一下,效果不是很好,而且性能上也不是很理想,所以我就找到一个比较好的解决办法,之前也考虑过用Image上的Material去弄,但是也不是很完美,后来看到一篇文章,说是重写Image组件,所以就有了下面我要提到的东西(只支持53版本以上)。

首先需要重写Image,由于继承UnityEngine基类的派生类不能在Inspector里显示自定义参数。所以我们要新建BaseImage类来代替Image类。原Image源码有近千行代码,BaseImage对其进行了部分精简,只支持Simple Image Type,并去掉了eventAlphaThreshold的相关代码。经过删减,得到一个百行代码的BaseImage类,精简版Image就完成了。

然后,开始写CricleImage类,Image类继承自MaskableGraphic,实现了ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter这三个接口。最关键的是MaskableGraphic类,MaskableGraphic负责绘制逻辑,MaskableGraphic继承自Graphic,Graphic里有个OnPopulateMesh函数,这正是我们需要的函数。

UI元素生成顶点数据时会调用OnPopulateMesh(VertexHelper vh)函数,我们只要继承改写OnPopulateMesh函数,将原先的矩形顶点数据清除,改写入圆形顶点数据,这样渲染出来的自然是圆形图片。

最后,还有一个辅助类

Unity3D UGUI:圆形Image组件,可用来制作头像 - 第1张  | 大腿Plus
上面就是所有代码了,上面还加入了圆形区域的点击检测,是通过Ray-Crossing算法判断的,也就是由这个点发射一条射线与多边形相交,如果交点是奇数,说明在多边形内,如果是偶数个就是在多边形外面。下面是package包,有需要的去下载吧。

下载链接: http://pan.baidu.com/s/1nvhqBLv 密码: qa1p

顺便提一下我找到新工作了,感觉还不错,最近还没找到房子,所以现在更新的少了,等找到房子后会及时更新的。

 

最后编辑:
作者:大腿Plus
欢迎大家常来,我不是什么大牛,但是我会将我知道的和大家分享,也希望大家能多提意见,多交流,共同学习。

Unity3D UGUI:圆形Image组件,可用来制作头像》有 6 条评论

  1. 我在3号楼,好近啊。

  2. 赵哥,找的新工作在什么地方?

留下一个回复