Cocos Creator 重力球游戏制作教程

本文首发于：一枚小工（caizj_cn）

Cocos 经授权转载，感谢作者创作

游戏玩法

通过手机陀螺仪，调整手机，让球从上一层的间隔中落到下一层，楼层会不断上涨，如果球碰到上方或者下方的火焰，游戏结束。

游戏预览

开发工具

1. Cocos Creator 2.1.2

2. Visual Studio Code

参考 API

1. Physics Manager

2. SystemEvent

3. View

4. action

5. audioEngine

6. ParticleSystem

游戏模块

1. 游戏层

2. 物理场景层

3. 结算层

开发流程

创建项目

选择一个 HelloWorld 项目，设置保存路径，点击新建项目。

创建游戏场景

我们直接将新建的 helloworld 场景改名为我们的游戏场景 gameScene。

设计分辨率和初始场景

游戏有横屏也有竖屏，我们在开发一款游戏时，需要先确定好设计方向，选择"项目"=>"项目设置"=>"项目预览"，修改设计分辨率为：宽 720，高 1280，勾选上适配屏幕宽度。修改初始化预览场景为上一步创建的 gameScene.fire 场景（初始化预览场景是在我们运行这个项目时，默认显示的第一个场景，如果场景比较多时，设置初始场景可以更方便的展示我们想看的界面），设置完成后点击保存。

搭建游戏界面

我们先将项目的目录结构做一下调整，新增一个 resources 文件夹，将 Texture 文件夹放到它的下面，并在 resources 文件夹下创建一个 sound 文件夹，用来存放游戏音效（后面用到）

Texture 文件夹：用来存放游戏图片
sound 文件夹：用来存放游戏音效

接着将背景图放到 Texture 文件夹中，如下图：

打开 Cocos Creator，设置 gameScene 的 Canvas 属性，删除下方绑定的脚本组件和名为 Label 和 Cocos 的组件，如下图：

设置 background 属性，删除名为 Label 和 Cocos 的组件，如下图：

到这一步，我们就可以看到效果了，用浏览器运行，如下图：

运行出来后，是不是发现界面太大，要滑动滑条才能显示完整，这样开发起来会比较麻烦，我们要想个办法让他变小点：

将 canvas 的 DesignResolution 改成 360*640
将 background 的 Scale 缩放属性 X,Y 都改成 0.5

再次浏览器运行，就完整的显示出来了，这个设置在游戏开发完后我们需要还原，切记。

创建游戏脚本

我们就直接将 HelloWord.js 改个名字，改名为 gameLayer.js，删除多余代码，只保留基础框架，如下图：

绑定脚本

现在界面和脚本都创建好了，我们再将他们关联起来，选中 gameScene 场景的 Canvas 组件，将 gameLayer.js 拖到右边属性栏中，如下图：

这样就将脚本和场景关联了。

绑定属性

通过在组件脚本中声明属性，我们可以将脚本组件中的字段可视化地展示在属性检查器中，从而方便地在场景中调整属性值。

要声明属性，仅需要在 cc.Class 定义的properties字段中，填写属性名字和属性参数即可，如下图：

这时候，我们可以在属性检查器中看到上面定义的这个属性，如下图：

再将 background 组件拖到定义的这个属性上，就将 background 组件和脚本中定义的 bg 属性关联上了，在代码中用的 this.bg 就是 background 组件，后面所有的组件绑定同上方式，如下图：

创建预制

在 assets 下创建一个 Prefab 文件夹，再创建一个预制体，直接在 gameScene 中新建一个节点，将节点拖到 Prefab 文件夹下，就是一个预制体了。我们把名字改成 ball，如下图：

截止这一步，基础方法已经了解了，接着我们再来实现游戏功能。

UI 和脚本绑定

先搭建游戏 UI 界面，在脚本中声明属性，并将属性和 UI 上的组件绑定起来，如下图：

重力传感系统设置

（1）开启重力传感系统

cc.systemEvent.setAccelerometerEnabled(true);
cc.systemEvent.on(cc.SystemEvent.EventType.DEVICEMOTION,this.onDeviceMotionEvent, this)

（2）关闭重力传感系统

cc.systemEvent.off(cc.SystemEvent.EventType.DEVICEMOTION,this.onDeviceMotionEvent, this);

物理系统设置

（1）开启物理系统：

cc.director.getPhysicsManager().enabled= true;

（2）开启物理调试状态：

cc.director.getPhysicsManager().debugDrawFlags= true;

（3）配置重力加速度：

cc.director.getPhysicsManager().gravity= cc.v2(0, -1000); //cc.v2（x方向的重力，y方向的重力）

小球设置

接着我们创建一个小球，给小球绑定一个刚体，它就会沿着重力加速度方向做自由落体运动了：

现在运行项目，就可以看到一个小球垂直落下啦。

小球挡板数值

板子的宽度，板与板之间的间隔，板子的坐标，都需要随机获取。所以，我们先预定义一些区间范围的数据，在创建的时候用到。

先创建出一个挡板

挡板的预制体上已经绑定了多边形的物理组件（详情请看 Cocos Creator 编辑器中 board.prefab 的 board 节点上绑定的组件属性）在设置完挡板的大小等一系列属性后，需要调用 apply() 方法，这个方法可以刷新挡板身上绑定的多边形组件的大小。

挡板设计思路

接着再创建一行挡板,一行挡板的计算比较多，详细代码请参考 gameLayer.js 的第155~202 行，设计思路如下：

先随机计算一个挡板的宽度，再判断是不是这行挡板的第一个挡板，如果是，则随机获取一个X坐标，否则通过上一个挡板的坐标和宽度计算当前挡板的坐标，直到不需要再创建为止。

挡板初始化

游戏未开始时，我们需要在界面上创建多行挡板：

挡板移动控制

游戏过程中，挡板向上运动，通过定时器无限循环调用移动函数，并判断如果挡板超出可视范围，就创建一行新的：

挡板难度控制

为了增加游戏难度，我们再实现一个升级功能，每隔 10s 加快挡板的运行速度，但也有上限，配置如下：

BOARD_COLOR 是配置不同等级下挡板显示的颜色。

游戏升级

升级功能比较容易，通过判断时间戳的差值可以得出间隔时长，注意时间戳的单位是毫秒。我们用到的挡板的图片颜色是白色的，在游戏中通过自己设置图片颜色，可以变换成任意我们想要的颜色，设置方法如下：

难点是如何做成渐变色，通过初始颜色和结束颜色的 RGB 值，计算出一系列的中间值，再用 runAction 方法执行颜色变化动作就可以了，详细代码请参考 computeGRB（）和 computeUpgrade（）这两个函数。

游戏结束判断

当小球碰撞了上下燃烧的火焰时，判定游戏结束，这时需要进行碰撞监听，我们创建一个 contact.js 脚本，绑定在火焰刚体和小球刚体上，并将这两个刚体开启碰撞监听，将 tag 值设置为 0（我们将除这两个以外的其他刚体的tag都设置为 1）如图：

然后在脚本中实现碰撞监听函数：

通过判断碰撞物体身上的 tag 值来决定是否需要处理碰撞回调。

游戏得分记录

当判定游戏结束后，我们展示游戏结算界面，并本地保存得分，本地存储方式如下：

设置本地存储：

cc.sys.localStorage.setItem("ballBestScore", this.curScore);

获取本地存储：

let ballBestScore = parseInt(cc.sys.localStorage.getItem("ballBestScore") || 0);

基本流程就已经完成了，最后再加音效，算得分，就是一个完成的游戏啦！想要获取【源码】可以联系我噢！

非常感谢“一枚小工”精彩分享，感谢所有开发者自发的创作，感谢所有社区成员无私的贡献，帮助 Cocos 不断向前发展。同时也欢迎更多开发者加入创作队伍，如果您在使用 Cocos Creator 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

更

多

精

彩

创意小游戏橙皮书发布

Cocos技术派|3D小游戏《快上车》技术分享

用 Cocos Creator 快速制作打地鼠游戏

1周开发，7留35%，小游戏《成语消消对战》团队专访

Cocos Service 全面解析

我的小游戏开发之路|腾讯TGideas周桂华

创意小游戏《荒野日记》Cocos专访：游戏如何讲故事？

5G 云游戏亮相 Chinajoy，大作一键秒玩

Cocos Creator 接入微信小游戏引擎插件指引

【报名通道】全球游戏开发者大会即将来袭

Cocos海外开发者专访：遗憾的是没早点开始做游戏