用 Cocos Creator 做一个物理画线游戏！支持 UGC 关卡创作和微信关卡分享

引言：在 3D 跑酷游戏和 3D 三消游戏之后，本次孙二喵带来了一个 2D 物理画线游戏源码，使用 Cocos Creator 3.6.2 开发。源码见文末。

演示效果

物理画线是一种比较经典的 2D 游戏玩法，这几年也出了一系列的爆款产品。本文将从立项、游戏逻辑和具体功能点的实现，来讲解如何基于 Cocos Creator 3.x 开发一款物理画线游戏，并实现 UGC 关卡创作和微信关卡分享。

立项与准备

游戏立项

游戏的核心玩法是玩家通过画线保护自己的小鸡，让其免受黑洞中掉下的障碍小鸡、或地图上的其他障碍伤害。

游戏关卡

考虑到制作成本，游戏美术使用了简单的手绘风格，用 paletton 选择类似纸张的颜色，拖动色盘，把比较顺眼的方案保存起来，确定游戏整体的风格。

色板中用到的颜色统一可以使用圆角矩形缩到最小（比如 15px，就输出成 15+15+2=32px，预留2个 px 给九宫格拉伸用），游戏所有的 UI 框架加起来就只有几 KB，减少显存的同时，还可以提高加载速度。

考虑到 spine 专业版数千元的价格，游戏内的动画效果统一使用了 Cocos 内置的动画编辑器+序列帧动画。序列帧动画使用 PS 制作，在画好我们的角色后，PS 内复制数个分组，调整角色的五官，输出序列帧，一些相似的做了剔除，减少动画的体积占用。

在 Cocos 内制作序列帧动画比较简单。帧动画使用30帧，新建好动画，并在精灵上面创建好动画组件，在对应的关键帧替换图片即可。

制作好的序列帧动画无需进行合并，拖入到一个文件夹内，使用 Cocos 自带的自动图集打包即可。

自定义网格背景

考虑到游戏的背景是一个纸上世界、同时需要支持 UGC 和简单的 AI，我们需要一个图片背景+网格。然而使用图片背景+网格图片不够灵活，同时做出来的效果会比较死板，缺少随机性，因此我从 shadertoy 上移植了一个纸张网格的效果。

原 shader 的 for 循环比较多，且风格比较写实，这里进行了一定的简化。

这里把 shader 中常用的属性都进行了暴露，整体风格调整到和色卡一致。

游戏内的3个场景（游戏界面、游戏内、游戏编辑）都用到了这个 shader 的图片作为背景，这里使用精灵图自带的颜色 a_color 来控制网