cocos 项目实践总结

此文基于cocos3.6.2版本 2d；虽然cocos团队维护更新快，但是版本间差异还是蛮大的，如果是简单的canvas小游戏还是不建议使用大的框架，尤其web端无需适配的情况，炸壳的时候总是不断地需要翻看源码。

组件文档的理解：

一个scene当成是一个页面。scene做为一个场景一个大的组件，如果页面大的背景不变只是切换其中的内容；
todo - 待补充

开发过程顺序问题：

1、获取锚点坐标

一开始旧的版本是世界坐标系转，3.6的版本已经不同了，需使用 UITransform 组件的 convertToNodeSpaceAR 方法转换世界坐标到节点坐标。API 传送门

需要注意的是，不应带上世界坐标系原理的思路，这个函数的描述是：将一个 UI 节点世界坐标系下点转换到另一个 UI 节点 (局部) 空间坐标系，这个坐标系以锚点为原点。所以侧重的是UI，因此拿到UI节点坐标：let uiPos = event.getUILocation(); 非event.getLocation() 获取到的是 世界节点坐标；

let uiPos = event.getUILocation();
const transform = this.getComponent(UITransform);
const pos = transform.convertToNodeSpaceAR(v3(uiPos.x, uiPos.y));

2、事件监听

this.node.on(Node.EventType.MOUSE_DOWN, this.onMouseDown, this.node); // 第三个参数传递之后，函数中的this指向这个target
this.node.on(Node.EventType.MOUSE_DOWN, this.onMouseDown, this.node, true); // 注册在捕获状态，通常用于 父节点的触摸或鼠标事件先于任何子节点
input.on(Input.EventType.MOUSE_DOWN, this.onMouseDown, this.node); // 全局输入系统（全局输入事件包括鼠标、触摸、键盘和重力传感四种），简单的快速应用或主页应用


event.propagationStopped = true; 阻止事件进一步传递 stopPropagation()
stopPropagation()方法Event 阻止了当前事件在捕获和冒泡阶段的进一步传播；
preventDefault()阻止任何默认行为的发生，如a标签的默认点击效果；

父节点监听子组件再触发子组件事件，事件委托在这里应用的话，需要确认子组件的大概位置，要求不那么精确的可以应用；不过画布画出的页面，一版都有固定的触发事件及原理，且元素不多，所以不用费心考虑这部分的优化。

3、批量生成选词按钮

先创建一个Prefab（预制就像是组件，非常方便使用），在其父级引入并循环生成添加节点；生成之后使用update仅更新字体内容；

4、Button可以自定义边界、边界颜色、及弧度

使用系统的button组件总是觉得有些不舒适，记录一些问题：

一些问题记录

1、button点击过后重新恢复页面渲染，button的状态偶发还是点击态而非正常态

描述：世界上最难解决的问题就是偶发了，需要考虑所有可能的原因的排列组合。还没有足够的时间去发现，暂留记录下，有时间再看吧
解决方案：根据实际的状态页面切换重新渲染一次内容。

2、偶发事件绑定失败：

描述：组件事件面板里绑定事件的步骤，偶尔会出现绑定事件不被触发的情况，目前还未定位问题，但极大可能是因绑定失败而导致的不触发；
解决方案：使用自己写的btn来实现的效果。

3、触摸不同状态下不仅需要切换button背景还需要切换文字内容，不一体

描述：如描述，实在是不便啊，事件横竖都要监听
解决方案：使用自己写的btn来实现的效果。

自开发的btn也没有什么特别之处，只是比较适合自己当前的开发场景：同一个位置的btn顺序点击触发内容替换，只有两种状态：点击中、正常态（非点击、禁用）；

5、自定义toast

原理，脱离文档流类信息，可以通过js/ts来直接写一个node元素，补充好样式进行应用，触发的事件添加到页面上，应用位置在主html页面；因此这类toast、loading可以自定义添加，其他页面中实际元素不能应用；

6、总出现一些死机问题，没有定位到，就很突然

代码改着改着就出现，每次都是回撤scene更改记录 + 重启电脑才能恢复，很是磨人；感觉可能是prefab和scene切换开发的时候，prefab没有及时保持或删除导致的问题。

7、半屏/大屏切换问题

window.dispatchEvent(new Event('resize'))
// 监听屏幕变化及setDesignResolutionSize；且结合Widget设置位置
view.setResizeCallback(() => {
      view.setDesignResolutionSize(428, halfState ? 483 : 926, 4);
 })

这里遇到一个很坑的问题，ios的页面全屏发生了变化，但是内部的canvas依旧保持不变的大小；查看源码发现，cocos内部并没有放出resize重调用的触发函数，查看源码确认内部也是用的resize监听（web版），大小屏切换的时候会出现一个新高度获取失败仍为旧高度的情况；可以在确认高度更改成功之后再主动调取：window.dispatchEvent(new Event('resize'))，此处不能使用定时器（这个一向是不被推荐的且难以控制）。

QQ频道互动应用内大小屏切换目前方案

只是目前方案，还在优化中；
监听回调里判断新旧高度变化，一致则代表未发生适应性变化，则需主动触发resize。不一致则表示已经发生变化，不用处理。
监听resize，自己控制分辨率变化及页面内容显示；

8、字体模糊问题解决

实际应用：

扩大字体翻倍缩放

解决方案收集：

1、动态字体缩放；（怎么生成动态字体？）
2、扩大字体字号缩放； - 增大纹理内存，对比！！！
3、改分辨率 devicePixelRatio ;
作用：Window 接口的 devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。换句话说，比值越大越清晰。

编译后的压缩代码没有发现/不知如何调整！！
模糊移动设备的分辨率为3，比引擎设置大，显得模糊了。

尝试发现：代码中的分辨率是内部渲染使用的，并不能更高使用的渲染分辨率。

4、项目抗锯齿 - 已打开project settings

cocos开发后的思考

1、使用不熟悉的工具开发的时候，一定要留够buffer时间，即使使用的范围很广；
2、前期的使用评估非常有必要，在这个需求之下，小点的html的工具是占据优势的；但是没有实践对比过的都只是未被验证的猜想，抽时间可以使用其他的完成一个功能demo来验证下；
3、cocos使用的精灵图资源都是有自己的一套打包逻辑的，观察应该是由页面文件名等的，这就在一定程度上对资源的加载优化，需要先搞清逻辑才行；
4、终端的缓存机制是黑盒，需要自行处理缓存；
todo - 待补充