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

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

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

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

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

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

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

 

2.关于胶体的介绍

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第1张图片

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

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

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

 

3.关于游戏的设计

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

 

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

 

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第2张图片

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

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

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

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第3张图片

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

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

(1)主界面

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第4张图片

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

(2)登录界面

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第5张图片

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

(3)过关界面

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第6张图片

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

 

5.游戏玩法具体设计

(1)游戏激励模式图:

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第7张图片

(2)游戏场景组件

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

(3)游戏数值设计

<1>游戏得分

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

<2>游戏通关判定

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

 

6 数据库设计(数据库结构)

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

如何用Cocos Creator做一个胶体(果冻效果)小游戏(二)_第8张图片

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

字段名

数据类型

是否可以为空

主键

描述

id

int

用户ID

value

nchar(15)

密码

maxC

int

关卡纪录

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

字段名

数据类型

是否可以为空

主键

描述

id

int

用户ID

chapterNum

int

关卡编号

score

int

得分

 

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

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

等待更新~

 

 

 

 

 

你可能感兴趣的:(游戏,游戏开发)