obsidian/笔记文件/2.笔记/UGUI整体解决方案-案例篇_第二章.md
2025-03-26 00:02:56 +08:00

4.3 KiB
Raw Permalink Blame History

这个是,实现遮罩的逻辑

!Pasted image 20240306161852.png

继承自

!Pasted image 20240306161935.png

这是重写ugui重绘

!Pasted image 20240306162017.png

在重绘的最开始,先把原本的渲染清空

!Pasted image 20240306165459.png

这里是获取uv信息

!Pasted image 20240306162033.png

uv有四个角在坐标系所以是Vector4

!Pasted image 20240306162117.png

然后获取uv高度和宽度 计算uv中心和比例 radian是每一块的弧度

!Pasted image 20240306165844.png

!Pasted image 20240306170005.png

原始坐标和锚点pivot进行计算处理防止轴心点问题

!Pasted image 20240306172546.png

!Pasted image 20240306172700.png

这里是最开始的绘制,原始顶点

!Pasted image 20240306171837.png

原始颜色

!Pasted image 20240306172022.png

逐弧度递增,对颜色进行赋值; 跟百分比有关,如果在范围内,就是正常颜色,否则,置灰

!Pasted image 20240306170231.png

表现:

!Pasted image 20240306170622.png

!Pasted image 20240306170332.png

获得三角面函数:

!Pasted image 20240306170438.png

结构上,是相邻的:

!Pasted image 20240306170457.png

逻辑实现也是如此中间的是圆心0

!Pasted image 20240306170529.png

还有检测点击的逻辑重写: 通过屏幕空间转换成本地空间得到一个localPoint

!Pasted image 20240306170747.png

!Pasted image 20240306170953.png

检测点击的算法,就是点击的点,画一根线,如果跟图片,交点总数,是奇数,就说明在图片内,就是点击有效,如果交点总数,是偶数,就说明在图片外,点击无效

!Pasted image 20240306173110.png

也是用到了前面填充的有效_vertexList顶点列表 除以2看奇偶

!Pasted image 20240306171054.png

具体实现,也是遍历顶点列表,然后,对比本地空间,和顶点距离范围,计算相交点总数

!Pasted image 20240306171157.png

!Pasted image 20240306170843.png

这是一个3D滚轮最终运行的效果可以看到实际上只是一个2d的界面是通过算法处理呈现3D效果

!Pasted image 20240322170231.png

逻辑上每个图片都会上一个RotationDiagramItem进行统一管理 其中包含位置ID拖曳移动对应的Action回调函数移动的_offsetX偏移动画的时间_aniTime用在Dotween动画插件还有协程的时间等待 图片和GUI矩形的获取器

!Pasted image 20240322170624.png

各个设置接口,设置结构父类,图片值; 设置位置信息调用了Dotween相关的DOAnchorPos和DOScale接口分别是修改坐标还有缩放 然后调用协程Wait函数等待动画事件_aniTime过渡之后通过SetSiblingIndex修改层级次序

!Pasted image 20240322171028.png

继续,是两个拖曳函数,还有注册移动监听函数; 另外每个图片Item体都会有一个位置PosId拖曳旋转之后这个需要配合总Item数目重新换算

!Pasted image 20240322171345.png

位置信息、缩放、层级次序构成一个ItemPosData的数据类 位置坐标PosId是一个图片ItemData的结构体

!Pasted image 20240322171538.png

游戏内,挂载的脚本是这个

!Pasted image 20240322171641.png

对应的逻辑其中ItemSize是设置每个图片Item的大小 ItemSprites就是图片数组用来存储需要实例化出来展示的图片集合 Offset就是两个图片之间的间距偏移 ScaleTimesMin 和 ScaleTimesMax就是在切换过程中最小和最大的缩放值

!Pasted image 20240322171819.png

各个功能函数接口创建一个命名为Template的子实体大小尺寸设定为ItemSize的大小再添加图片和RotationDiagramItem组件 调用RotationDiagramItem组件的接口完成父物体的赋值 添加拖曳移动的监听是Change函数 完成以上操作后就可以加到_items队列容器 Change函数是其中一个根据偏移的正负三元运算得到symbol方向再调用另一个Change函数

!Pasted image 20240322172132.png

两个函数重载

!Pasted image 20240322173308.png