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

5.1 KiB
Raw Blame History

常见需求点击ui的时候不需要3d物体也作出相关响应操作

!Pasted image 20221116082845.png

还有这个需求3D物体有响应2d不响应

!Pasted image 20221210165731.png

拿一个写好的脚本来分析: MonoBehavior默认是有一个OnMouseDown()的方法

!Pasted image 20221210165814.png

这个测试代码,就是修改颜色来着

!Pasted image 20221210165915.png

运行游戏点击3d物体就可以穿透直接变色了

!Pasted image 20221210165958.png

然后解析另一个写好的脚本是给2d图片用的继承的类和内置监听是这些

!Pasted image 20221210172416.png

运行,点击,可以看到,图片点击,也是变色了,但俩都变色了

!Pasted image 20221210172514.png

日常的一个需求就是点2d图片的时候3d物体应该不响应 来处理一下,先放一个物理组件到相机上

!Pasted image 20221210172726.png

可以看到canvas画布是有继承这个ugui相关的射线检测

!Pasted image 20221225133111.png

3d物体的这个脚本可以remove移除了

!Pasted image 20221225134144.png

勾选使用这个就好

!Pasted image 20230102105037.png

重新运行游戏可以看到点击2d物体的碰撞检测是正常了不会也触发3d物体

!Pasted image 20221225134242.png

可以看到默认是勾选上这个指的是忽略没有关联Graphics的元素 需要注意的是只有ugui的元素是继承和关联Graphics基类的

!Pasted image 20230102102055.png

换一下函数的调用

!Pasted image 20230102105317.png

声明一个index用三元运算符做处理

!Pasted image 20230102105406.png

重新运行游戏点ui需求逻辑还是正常的不会对3d物体产生影响

!Pasted image 20230102105443.png

点后面3d物体也是正常的

!Pasted image 20230102105523.png

说明,这个接口用起来,还是比较方便的

!Pasted image 20230102105552.png

103-解决UI和3D物体的同时响应问题

如果要实现ui点击和3d物体同时响应承前启后也是基于这个接口实现这样在系统设计上逻辑会比较连贯

!Pasted image 20230103090114.png

加一个函数,其中调用的事件系统接口,是会收集所有点击到的物体,然后进行排序

!Pasted image 20230103090302.png

补充点击的eventData数据还有点击结果的数据完成传参处理

!Pasted image 20230103090432.png

继续完善逻辑,在拿到点击结果之后,遍历一下,触发一下点击事件和逻辑

!Pasted image 20230103093153.png

然后,调用一下

!Pasted image 20230105092626.png

之前写错地方了那个触发全部的函数逻辑应该放到ui逻辑里 剪切过来就好

!Pasted image 20230105092800.png

也是调用一下就好

!Pasted image 20230105092840.png

重新运行游戏点击ui3d物体也会变色了

!Pasted image 20230105092920.png

注释掉

!Pasted image 20230105092958.png

恢复成之前的亚子

!Pasted image 20230105093020.png

104-解决UI和鼠标点击之间的响应问题

加了这个脚本

!Pasted image 20230106092001.png

逻辑简单,响应鼠标左键点击,切换颜色

!Pasted image 20230106092034.png

用图形射线做检测,先声明一下,然后实例化

!Pasted image 20230106093934.png

写一个方法判断是否点击中包含ui

!Pasted image 20230110091459.png

加到判断条件里取false不是ui的时候才生效

!Pasted image 20230110091625.png

运行点击空白地方也是只有3d物体变更了颜色ui是没变化的

!Pasted image 20230110091712.png

点ui也是单独变颜色

!Pasted image 20230110093810.png

105-为什么要实现自己的圆形图片组件

一般单独小案例,都会创建一个独立的场景

!Pasted image 20230116091626.png

如果要看上一个章节的内容,其实介个场景也是可以看得到的

!Pasted image 20230116093503.png

生成圆形图片的,是介个场景

!Pasted image 20230116093529.png

先弄一个image出来

!Pasted image 20230116093627.png

简单设置一下尺寸

!Pasted image 20230116093648.png

ctrl+d复制一份出来

!Pasted image 20230117094341.png

拖曳,变成子物体

!Pasted image 20230117094420.png

用icon1作为图片

!Pasted image 20230117094503.png

在父物体加一个mask蒙版

!Pasted image 20230119102057.png

这是一张圆形的纯色图,背景透明

!Pasted image 20230119102157.png

把这个图,拖曳到父物体上

!Pasted image 20230119102311.png

因为有蒙版,所以整个图形都变成圆形了

!Pasted image 20230119102357.png

这就是unity自带的圆形实现不过缺陷也比较多其中一个就是锯齿很明显

!Pasted image 20230119102525.png

还有一点就是会提高unity的drawcall可以看到这里现在有5个 mask会极大增加drawcall

!Pasted image 20230119102618.png

所以,需要自己写一个实现