Cocos Creator 3D 案例《弹弹乐》技术实现分享

 

《弹弹乐》是一款简单的休闲物理弹跳类 3D 小游戏，用手指轻轻划动屏幕来控制小球运动方向，跳中板心或是板边可获得不同分数，此外，留心获取游戏场景中设置的钻石，可以为玩家增加更多分数。

 

 

Cocos 引擎开发工程师放空将分享这款3D 小游戏最基础的完整开发流程，各位开发者可以在阅读学习本篇教程后，继续发挥创造力，将这款简单的 3D 小游戏进行拓展开发，变成一款更有趣的、可对外发布的小游戏。

 

游戏源码

https://github.com/cocos-creator/demo-ball

 

结构说明

下图是《弹弹乐》的草图以及整体设计思路：

在理出整体设计思路之后，就可以开始设计每个阶段应该完成的目标，以便于提高代码编写的效率。

 

以下是我划分的每个阶段的开发任务：

 

游戏初始化

• 跳板初始化
• 屏幕事件监听，小球与普通板块弹跳计算
• 提供相机跟随接口

 

游戏核心逻辑编写

• 跳板复用逻辑编写
• 小球与不同板块弹跳计算
• 游戏开始与结束逻辑编写

 

游戏丰富

• 添加钻石以及吃砖石表现
• 添加跳板表现
• 增加小球粒子以及拖尾表现

 

初期设计完成后，我们就可以开始整个游戏场景的搭建。

 

整个游戏一共就一个场景，一个主程序 Game，负责管理所有分支管理的 Manager 以及事件的监听和派发；多个分支 Manager，负责管理跳板创建摆放或游戏页面等；一个全局配置模块，负责存储游戏中使用的配置；独立对象的运作脚本，负责自身行为运作。

 

 

编写游戏内容逻辑

 

由于最终呈现出来的详细步骤代码太多，就不一一演示了，今天主要针对每个流程的几个关键部分做个说明。整个游戏的制作流程主要分为以下几点：

 

（1）跳板初始化

 

跳板初始化主要体现在 BoardManager 里的 initBoard 和 getNextPos 两个方法。在整个游戏过程中，使用的板一共只有 5 个，后续的跳板生成都是通过复用的方式，不断重新计算位置以及序号。跳板的生成也是严格根据上一个跳板的位置来计算，避免出现长距离位置偏移影响游戏进行。

getNextPos(board: Board, count: number, out ?: Vec3) {
      const pos: Vec3 = out ? out.set(board.node.position) : board.node.position.clone();    const o = utils.getDiffCoeff(count, 1, 2);    pos.x = (Math.random() - .5) * Constants.SCENE_MAX_OFFSET_X * o;    if (board.type === Constants.BOAR