引言
哈喽大家好，我是亿元程序员，一位有着8年游戏行业经验的主程。
上周本来想摸个鱼，喝口水，看看窗外，假装自己也是个热爱生活的人。
结果评论区来了这么一条留言：
看到这里，我内心五味杂陈。
一方面很感动，说明文章确实帮到了大家。
另一方面也很愧疚，毕竟这位小伙伴可能已经被主管用我的文章精准打击了很多次。
但是转念一想：
反正主管都已经转发了，那不如让他再转一篇。(砂仁猪心)
今天决定卷个毛线！
言归正传，本期带大家一起来实战看看，在Cocos游戏开发中，实现毛线排序小游戏的关键点！
本文实战完整源码可在文末获取，小伙伴们自行前往，有体验链接。
毛线题材游戏
既然今天要卷个毛线，我们就要先了解毛线游戏的关键组成有哪些。
1.毛线
毛线游戏的核心 当然就是毛线了，通常采用柔软蓬松、色彩饱和度高且治愈感十足的绒线材质，并且在游戏中要突出其"可卷"的特性。
2.像素填色
通常在毛线题材的游戏中，伴随出现的则是像素填色，当完成一次解谜时，就会填充对应的像素图案区块。
填色过程和毛线缠绕的节奏相互呼应，往往会给玩家带来游戏的挑战以及像素画逐步展现的惊喜。
3.核心玩法
除去核心元素之外，剩下的就是核心玩法了，核心玩法就五花八门了，可以是时下热门的箭头、拼图、倒水排序等游戏。
本期 实战我们就采用了"倒水排序解谜"的核心玩法，感兴趣这个玩法的小伙伴可以翻看往期的文章，这里就不做赘婿赘述了。
下面我们就开始实战吧
毛线排序解谜小游戏实战
1.关卡编辑器
重要的事情说三遍：
关卡类游戏的核心是关卡编辑器！
关卡类游戏的核心是关卡编辑器！
关卡类游戏的核心是关卡编辑器！
现在 有了AI搭子，关卡编辑器只要有完整的流程思路，很容易就能够搭建起来。
下面列举下本期实战的编辑器流程：
- 准备色板 ：为了保证像素图按照游戏既定的素材生成，我们通常先要准备色板。
- 图像识别 ：可以通过选择/拖入图片之后，通过图像识别算法，将图片的像素转换成最接近的色板编号，完成识别和展示：
- 像素修改 ：因为是图像识别，通常识别会纯在一定的误差，因此我们需要对识别不对的、像素过少的进行修改和去除。
- 游戏配置 ：除了常规的像素图数据外，倒水类游戏的难度通常由颜色的数量和空槽的数量决定，因此编辑器需要加入这两个参数的配置。
- 数据的导入导出 ：也是常规功能，不做
赘婿赘述。
2.像素图
游戏里 ，像素图并不是游戏的难度所在，为了便于图片识别和展示，我们统一一套规格：编辑器与运行时都按35×35网格来算。
在关卡开始时 ，遍历关卡像素图数据：只对index > 0(颜色编号，0是透明或者白色)的格子建节点，用白色做底减少生成节点数。
每个格子 是一个带Sprite的子节点，开局时把所有像素块的Sprite设为enabled = false，可以优化填充时的体验，当然你也可以在填充时再创建。
只有 把对应颜色的毛线槽填满后才会被逐块点亮，形成上面说的解谜节奏+像素画逐步揭晓的效果。
3.毛线
结构上 ，每根线是槽里Layout下的子节点，容量是4,以3层为单位，和倒水排序一样，只是表现做成线轴。
为了不穿帮，顶层的圈用完整的，非顶层的圈带个缺口。理论上我们也可以采用两个半圆的形式，一前一后，线轴在中间，通过层级控制。
因此抬起时，我们需要将顶部的线圈换个图片：
接下来是线圈的移动 ，移动时原线圈不断减少，目的线圈不断增加，两者之间通过一根s线连接表示缠绕的效果。
其中 线是通过Graphics组件和贝赛尔曲线简单描绘：
最后就是填充效果，和上方移动的效果差不多，填充和线绘制相结合，形成一个动态的绘制效果。
4.其他细节
关卡编辑器总览：
道具功能：
以及槽位扩展：
效果演示
结语
卷个毛线，卷不动了！
最后用另外一个小伙伴的留言总结一下：
本文实战完整源码 已集成到亿元Cocos小游戏实战合集2.0，内含体验链接，已经拥有的小伙伴可以直接更新。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：