大家好，我是 Cocos 新手，使用引擎不到两个月，彻夜奋战完成了以下两款小游戏，特来分享开发历程、技术要点和踩坑心得，欢迎大家指正！
一、项目概览
- 《救救八十一》——数字消除类
- 《无尽迷途》——一笔画连通类
下面简单分享一下我的开发历程、技术要点和心得，欢迎大家批评指正！!
二、项目亮点与技术要点
1. 《救救八十一》
-
玩法简介
- 5×5 网格，随机生成数字棋子。
- 相同数字相邻即可合并，目标数字达标即可过关。
-
核心实现 ：
-
相邻检测：遍历棋盘，每个棋子用递归搜上下左右相同数字，返回连通集合；连通 ≥3 个时触发合并。
-
下落动画：遍历自底向上，计算每个棋子下方消除格数，用 cc.Tween 控制下落。
-
-
踩坑 & 心得 ：
-
这是我第一次使用 cocos 每隔几天就发现更优写法，重写了很多次逻辑
-
一开始写排行榜的时候不知道有 layout 组件就自己在那循环一个一个的去设置位置，直到游戏快写完的时候才发现有 layout 这个东西，赶紧回去把能改的都改了
-
开发快结尾的时候用手机玩这个游戏，发现手机越玩越烫而且内存占用还越来越高，感觉一定是哪里写的不对，就一点点排查，结果发现
Node.removeAllChildren居然不会销毁节点 🤦，然后我就用destroyAllChildren结果又发现节点不会立即删除，而是要等到下一帧才会删 🤦，最终只能两个同时调用 -
一开始不理解什么是
Draw call上社区搜了一下才明白，我的就那一个棋盘居然用了好一百多个Draw call然后即使根据社区的建议不停的优化，字体增加缓存，微信小游戏开启动态图集，去掉无必要的Graphics。 -
关于圆角我找遍了社区和官方文档都没有合适添加圆角方案，我就自己用
Graphics去画圆角背景但是圆角裁剪还是做不到，后来发现Graphics居然会占用一个Draw call，然后我就再也不用它了干脆直接用带圆角的图片去替代。
-
2. 《无尽迷途》
-
玩法简介 ：用户需一笔画通过所有格子，从起点走到终点不同的格子有不同的走法限制、水平、垂直、交叉、旋转、黑洞、携带钥匙、单向、转弯……还有更厉害的机器人自动走等等（太难了还没有做）
-
核心实现 ：
-
棋盘没有自动随机实现，出现死局的概率太高，所有每一关都是手动配置的
-
格子类型：FLAG_START、FLAG、FLAG_END、FLAG_EMPTY、FLAG_VERTICAL、FLAG_HORIZONTAL、FLAG_CROSS、FLAG_ROTATE、FLAG_HOLE_0、FLAG_HOLE_1、FLAG_HOLE_2、FLAG_HOLE_3、FLAG_HOLE_4、FLAG_HOLE_5、FLAG_DIAMOND、FLAG_DIAMOND_EMPTY、FLAG_FLAG、FLAG_FLAG_EMPTY、FLAG_WATERMELON、FLAG_WATERMELON_EMPTY、FLAG_UP、FLAG_DOWN、FLAG_LEFT、FLAG_RIGHT、FLAG_UP_LEFT、FLAG_UP_RIGHT、FLAG_DOWN_LEFT、FLAG_DOWN_RIGHT、FLAG_LEFT_UP、FLAG_LEFT_DOWN、FLAG_RIGHT_UP、FLAG_RIGHT_DOWN
-
大致连线逻辑：用户点击一个格子判断这个格子时候走过，走过的话就回退到这里（交叉除外），没走过就判断点击的格子是否在上一个格子的附近，不在就不允许点击，在的话就判断上一个格子到这个格子的方向（上一个格子的出口）是否合法，不合法不允许点击（比如上一个格子只能是水平进入和离开如果离开时不是水平的就拒绝），然后判断再上一个格子到这个格子的方向（这个格子的入口）是否合法，中间设计很多逻辑的判断，因为有黑洞格子的存在导致每个地方都要做特殊判断（因为黑洞格子是成对出现，从这进入就会从另一个出来，这时他的坐标和之前的都不一致需要特殊处理）
-
关卡设计：手动配置根本不现实，支持的格子类型越来越多人眼都能看花，所有又单独写了一个页面设计关卡，最初就一个 10*10 的棋盘在上面随意画线，然后再在格子上设置不同的格子类型，但是涉及到旋转的时候就需要自己算好转了几次，在这个位置我应该放那个方向的格子，直到我写到可转弯的格子类型时才发现这样根本不行，人脑计算量太大了还很容易出错，干脆写个算法，我只需要设定这个格子上放什么类的格子，在导出的关卡数据的时候再根据旋转格子的数量，计算出最终应该是什么格子就行了（改完这个，我的关卡也快设计完了
）
-
-
踩坑 & 心得 ：
-
做微信开放数据域的时候头疼死了，之前没做过相关的不了解开放数据域到底是个啥，现在明白他大概就是个独立的运行环境并且这个环境里的数据无法给到外部和后端，微信这么做还是为了保护用户的隐私，避免开发者可以拿走用户的朋友圈信息
-
cocos 官方的 openDataContext 直接引用的是 Layout 打包后的源码，我想既然人家官方
Layout提供了微信插件为什么不用呢，然后我就在 build-templates/wechatgame/game.json 里添加插件–>打包–>出不来
，太坑了，game.json 并没有深度合并，我看这个问题在 24 年就已经提出了，官方还没有优化 
，无奈本人有点强迫症不喜欢没吃打完包再去手动改，有趣研究了一下 cocos 插件，根据 ai 的提示写了个打包后自动深度合并的功能（代码太■■就不公开了） -
Layout 也有一堆 bug，有的版本背景出不来，有的边框不支持设置单个边，cocos 中如果设置元素不在中心点事件会偏移（不知道谁的问题），无奈只能保持弹窗在 0，0 点
-
最后分享一个功能裁剪打包后尺寸测试
| 功能 | 裁剪前 | 裁剪后 | 描述 | 减少 kb |
|---|---|---|---|---|
| 默认原始大小 | 56 55kb | 5655kb | |
| WebSocket | 5655kb | 5655kb | ~0kb | |
| 3D | 5655kb | 4505kb | ~1150kb | |
| 视频 | 4505kb | 4505kb | ~0kb | |
| WebView | 4505kb | 4504kb | ~1kb | |
| 富文本 | 4504kb | 4504kb | ~0kb | |
| 2D 物理系统 | 4504kb | 4095kb | ~409kb | |
| 2D 相交检测算法 | 4095kb | 4095kb | ~0kb | |
| 2D 粒子系统 | 4095kb | 4094kb | ~1kb | |
| 用户界面 | 4094kb | 4094kb | 功能异常，游戏无法操作 | ~0kb |
| Tiled 地图 | 4094kb | 4094kb | ~0kb | |
| Dragon Bones | 4094kb | 4094kb | ~0kb | |
| 骨骼动画 | 4094kb | 4084kb | ~10kb | |
| Marionette 动画系统 | 4084kb | 4084kb | ~0kb | |
| 基础动画功能 | 4084kb | 3845kb | ~239kb | |
| Spine 动画 | 3845kb | 3836kb | ~9kb | |
| 2D 仿射变换 | 3836kb | 3834kb | ~2kb | |
| 斜切 | 3834kb | 3834kb | ~0kb | |
| 遮罩 | 3834kb | 3834kb | ~0kb | |
| 图形绘制 | 3834kb | 3834kb | 功能异常，游戏无法操作 | ~0kb |
| 缓动系统 | 3834kb | 3834kb | tween 无法使用 | ~0kb |
| 音频 | 3834kb | 3834kb | AudioSource 无法使用 | ~0kb |
| 运行状态统计 | 3834kb | 3828kb | ~6kb | |
| 剔除废弃的引擎接口 <3.8.0 | 3828kb | 3828kb | ~0kb |
欢迎社区大佬们体验测试，如有需要改进的地方欢迎指出
- 流量主还没有开通，和广告相关的会报错
