如何用Cocos Creator做一个胶体（果冻效果）小游戏（二）

博客的主要目标还是记录自己做过的东西，如果能帮助到其他人，那就是更好的结果了，下面是正文：

在完成上一章的工具配置后，可以先不急着完成任务，先对Cocos Creator工具做一个熟悉，可以先根据官方文档，完成文档上最开始的样例。

1、首先介绍一下游戏的目标：

在被动的确定了开发工具和题目后，我们需要首先确定游戏的整体玩法，下面是简单介绍：

一款基于2D物理引擎对弹性粒子模拟的H5小游戏的设计及实现。借助物理引擎创建的虚拟物理世界，通过游戏方式表现出物理世界中胶体和刚体的物理特性，然后编程实现一个基于2D物理引擎（胶体）的实际运用案例。

这个过程中，使用JavaScript语言编写游戏脚本，使用Cocos Creator作为游戏开发引擎，导入LiquidFun.js实现物理模拟和计算，Express+Socket.IO负责网络请求，使用Node.js处理网络请求。数据库使用MongoDB数据库。

 

2.关于胶体的介绍

这是LiquidFun上的弹性效果展示。胶体其实很好理解，最直接的就是类似于果冻，根据弹性程度的不同，可以有不同的弹性效果。

需要注意的一点是，在本次的游戏开发中，liquidfun.js脚本文件作为Cocos Creator的插件脚本直接导入游戏引擎。与普通脚本不同，插件脚本不支持声明组件、不提供模块化。它脚本内不在任何函数内的局部变量会暴露成全局变量。在场景加载的过程中，插件脚本就会先于普通游戏脚本加载。这样保证了插件脚本所提供的接口能被普通脚本正确调用。

我当时将最新版本的Liquidfun作为脚本直接导入引擎，但是出现了报错，然后更换了版本，就能正常使用了（在当时可能有不兼容的现象），如果遇到同样的问题的，可以尝试着更换一下Liquidfun的版本。

 

3.关于游戏的设计

本游戏旨在实现一个基于2D物理引擎的胶体H5小游戏。在游戏中玩家需要控制一个胶体形态的角色，在规定的时间内，通过不同的障碍物，到达目的地，从而通过该关卡。每个关卡会有单独设置的积分和包括其他玩家的总排行榜。在游戏关卡通关或者时间截止时，跳转到得分场景。

 

首先要进行的就是游戏的框架设计，下面是用visio画的一个简单的游戏功能模块图：

 

因为篇幅的原因，这里就只放一个登录/注册模块的介绍和模块图：

登录注册模块：登录注册模块包括游戏的主界面、注册界面和登录界面。主界面用于进入其他界面，可以进入登录界面或者是选关的界面。玩家进入登录界面，输入对应玩家的信息，经过判定成功后即可登录，登录成功后自动跳转回用户界面。如果玩家还未拥有账号，则可以点击注册按钮进入注册界面执行注册操作。注册界面用于玩家执行注册操作，玩家输入期望的账号密码后，如果该账号已被注册，则注册失败。反之，注册成功，自动跳转回用户界面。

下面是登录注册的简单模块图：

4.下面展示几个主要的（非常不好看的）功能界面

虽然不好看，但是该有的功能都有- -

（1）主界面

打开游戏时就会显示该界面，这个界面是游戏的初始界面。点击界面中间的“START”按钮，系统将会进入游戏关卡开始游戏。按钮下方的Main Menu是关卡选择界面的入口。在界面的左上角，有一个设置的按钮，点击进入用户信息设置，包括登录和注册功能。在界面的中间有着游戏的名字“Flexible Box”

（2）登录界面

玩家在对应的框内，按照提示输入对应信息后，点击下方绿色的登录即可执行登录操作。服务器判断登录成功则会自动跳转，否则将在登录界面中显示“登录失败”的信息。如果玩家还没有账号，可以点击登录按钮下方的注册字样，进入注册界面执行注册操作。

（3）过关界面

游戏得关卡通关后会自动进入过关界面，过关界面中的SCORE会显示玩家在当前关卡的得分，点击界面中间的“next level”按钮即可进入下一关卡的游戏。在界面下方的三个按钮分别表示返回主界面，重新开始本关卡，查看本关卡的排行榜。

 

5.游戏玩法具体设计

（1）游戏激励模式图：

（2）游戏场景组件

游戏场景的场景组件包括了场景固有几何形状，包括墙壁，箱子，盒子，旗子，球体以及各类组合形状，还包括水池（流体）这类的特殊元素。

（3）游戏数值设计

<1>游戏得分

本游戏的各个关卡得分，与关卡结束后的剩余时间有关。倒计时的时间显示于游戏场景的正上方，初值为60（计算公式这里就不放了，就是个简单的数值策划里的减法公式）。玩家在游戏场景中操纵胶体角色通过障碍物时，会花费时间进行移动。通过上述的判断方式，用户通过障碍物将会消耗更多的时间，寻找正确的路线和适当的操作是获得高分的必要条件。

<2>游戏通关判定

在游戏界面的表现上，胶体角色到达旗子位置，即判定该关卡通过。在游戏的后台逻辑上，通关条件表现在胶体的粒子系统与旗子刚体的碰撞检测。如果在规定的时间内，成功通过障碍物，并与旗子相碰撞，就可以过关。

 

6 数据库设计（数据库结构）

根据游戏对数据库的需求分析，最终建立的E-R图：

用户信息表：表中包含三个字段，均不能为空。玩家进行登录注册功能时更新该表中的用户和密码两个字段，或者是玩家通过了新的关卡，更新该表的关卡记录字段。

字段名	数据类型	是否可以为空	主键	描述
id	int	否	是	用户ID
value	nchar(15)	否	否	密码
maxC	int	否	否	关卡纪录

评分信息表：表中包含三个字段，均不能为空，其中用户ID与关卡编号共同作为主键，来唯一确定玩家的关卡得分。

字段名	数据类型	是否可以为空	主键	描述
id	int	否	是	用户ID
chapterNum	int	否	是	关卡编号
score	int	否	否	得分

 

-----------------------------------------------------分割线--------------------------------------------------------------------

下章讲述游戏的具体实现细节。

等待更新~