三年前下载量达600W的老游戏，没想到还能发光发热！
三年前下载量达600W的老游戏，没想到还能发光发热！
说好的 TypeScript 版已经三年了，是时候该兑现了！
《球球要回家2》是晓衡当年，初开微店晓衡在线时的开门商品（2021 年被 Cocos 招安，在 Cocos 引擎负责 CocosStore 与 Cocos微店 的运营工作）。
《球球要回家2》第一版在微店上架半个月不到就卖出近30份，解决了晓衡当时的一度的经济危机，欲知晓衡当前的故事可以看这篇文章：《大龄个人开发者，我是如何活下来的，又将怎样活下去》。
有群友多次告诉过晓衡，有人购买了我的《球球要回家》上架 vivo 平台，下载量达到 600W+。
这是他看到的微店上最为成功的案例，上面这些已经是 2020 年的往事了。
三年过去 Cocos 引擎已经更新了数十个版本，而我开发的《球球要回家》时不时会得到一些朋友的支持，但一直停留在 Cocos Creator 2.2.2 版本上。
直到今年双11，有老铁说 Creator 2.2.2 的引擎都找不到下载（其实在 Cocos 官网上可以下载到历史版本），下载了代码还是看不太明白。
我常对 Cocos Store 开发者们说：“要为用户提供有价值的内容”。看来现在，时候对自己说这句话了！为此我新开了《球球要回家-Lite教学版》工程。
它是在《球球要回家》3.6.2 原版基础上抽离出核心玩法，并重构资源结构与代码，使其更为简洁：
prefabs目录：核心预制与脚本
- Ball：⚽️
球会在图块通道中滚向终点 - Block：玩家在游戏中移动
图块🧩形成通道 - GameBoard：
棋盘💠是图块的容器，控制关卡布局
res 目录：美术资源与模型
- atlas：图块🧩图集资源
- config：游戏关卡配置📝
- model：3D足球⚽️模型
- textures：2D 图片素材背景、按钮、图标等
scenes：游戏场景与脚本
- GameScene：负责关卡加载、关卡选择、进度保存、UI更新
原版本包含首页、经典玩法、冒险模式三个场景。
基本概念
- 要读懂《球球回家》代码，一定要先了解核心玩法。游戏是模拟了
球在图块通道中做直线或曲线滚动，图块按形状分为：
直线图块：垂直或水平
拐角图块：每个拐角都是1/4个圆 2. 图块端口port
游戏中图块通道只会出现在方块的上、右、下、左的四个边上，我们用四个边上的开口来标识它的出入口port。
图块的名字后缀为“UR”，表示开口在“上”和“右” 3. 入口与出口
球在接通的图块通道中移动时，对于单个图块来说，会有进有出。出入口不同，球的运动方向也就不同。
因此，带通道的图块含有入口或出口，但出入口不是确定的，需根据球运动的方向来确认。
- 左图：球从上向下移动，向
右拐弯，因此入口在上，出口在右 - 右图：球从右向左移动，向
上拐弯，因此入口在右，出口在上
- 圆环运动
球在拐角图块上的曲线移动，我们在游戏中并没有使用贝赛尔曲线，而是把它看成是一个固定半径的圆周移动。
需要注意的是，代码中是以逆时针旋转为正方向：
- 0π 在最右边
- 0.5π 在正上方
- 1π 在最右
- 2π 与 0π 重合
圆环参数的计算是在 Block.ts 脚本中，球的位移动画是在 Ball.ts 脚本中。
5. 图块命名
要读懂源码，一定要注意图块文件的命名规则，图形按颜色分为3种，见下图：
- 前缀
- greywood：灰色木块，在游戏中不可移动
- redwood：红色木块，在游戏表示终点，不可移动
- wood：普通木块，在游戏中可触摸移动
- 中缀
- base：实心无通道的图块
- line：直线通道的图块，有出入口
- start：起点图块，只有出口
- goal：终点图块，只有入口
- turn：拐角图块，有出入口
- 后缀
- H：水平通道
- V：垂直通道
- U：开口在上
- R：开口在右
- D：开口在下
- L：开口在左
通过以上基本概念的解释，希望能帮助到大家理解代码的实现，能在基础上创造出更多的玩法。
获取源码
源码链接： https://store.cocos.com/app/detail/4374
往期精彩
本文分享自 Creator星球游戏开发社区 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！