基于Cocos2dx的消除益智类手机游戏设计与实现

2017-11-02曾家鹏

软件导刊 2017年10期

曾家鹏

摘要：Cocos2dx是一个开源、免费、多平台支持的手机游戏引擎。“彩豆消消乐”手机游戏利用Cocos2dx提供的场景、层、精灵、瓦片地图、粒子效果、音效管理等技术，快捷实现了游戏的开发与多平台部署。详细阐述了该游戏的设计实现过程与游戏的搜索消除算法，为便捷、高品质、低成本地开发手机游戏，迅速高效地实现开发者的游戏创意提供了一种思路。

关键词：手机游戏；Cocos2dx；游戏引擎；益智游戏

DOIDOI：10.11907/rjdk.171654

中图分类号：TP319文献标识码：A文章编号：16727800（2017）010011805

0引言

隨着移动互联网的迅速发展与成熟， 4G移动通信网络的普遍覆盖，人们已将智能手机视为集通信、互联网、支付、娱乐等功能于一体的多功能平台。在众多丰富的手机应用中，手机游戏无疑是最受欢迎的应用之一。截至2016年底，根据中国互联网络信息中心统计，中国手机游戏用户已超3.5亿[1]。由此可见，手机游戏应用有着巨大的市场前景与经济效益。

PC端游戏多以大型复杂3D、网络游戏为主，普遍需要玩家的长时间关注，并需要大型公司投入大量的人力、物力、财力进行开发。而手机游戏普遍以简单的单机游戏为主，用户通常是在碎片时间下进行消遣，且手机游戏多为个人或小团队的创意作品，项目规模小，需要开发者快速、高质量地实现创意，迅速推向市场[2]。

若要在快速开发中保证游戏品质，游戏引擎的使用成为最佳选择。使用游戏引擎可降低开发成本、缩短开发周期、提高游戏品质并降低风险。游戏引擎为开发者封装好物理引擎、粒子效果、场景管理、音效管理等游戏开发工具，并提供游戏运行架构以及与操作系统的交互。开发者只需专注于游戏逻辑与图形逻辑的设计与实现即可，从而高效地实现创意[3]。

作为开源、免费、跨平台、高性能的游戏引擎Cocos2dx，消除益智类游戏“彩豆消消乐”基于该引擎，利用其提供的CCDirector、CCScene、CCLayer、CCSprite、TileMap、CCPaticleSystem等技术实现了快捷设计与开发，并在Android、iPhone等多个移动终端进行了多次部署测试，发现其运行效果良好，实现了设计目的。

1Coco2dx核心技术简介

Cocos2dx封装好一套标准的API接口供游戏开发者开发调用，可实现在不同平台的屏幕绘制、音效播放、文字处理、文件读写等功能。游戏开发者待项目完成后，只需在目标终端平台编译即可进行部署。Cocos2dx的核心技术概念与关系如图1所示。

CCDirector（导演）为单例模式，对游戏各场景及流程进行控制与管理。各场景间的初始化、结束销毁以及转换都需要CCDirector调用相关方法。常用的管理CCScene（场景）的方法有runWithScene、replaceScene、pushScene。为了使场景切换生动绚丽，拥有动画效果，可通过CCTransitionScene实现场景间的切换效果。

不管是普通应用程序还是游戏，都是由一个个界面构成的，游戏中的一个界面即可理解为一个场景。CCScene（场景）是构建游戏界面的基本元素，它是顶层容器，也是游戏界面逻辑的对应，在其上添加若干CCLayer（图层），以实现不同功能模块的划分。而场景内容的生动与丰富，以及相应的动画与交互操作是通过各图层上的不同CCSprite（精灵）来实现。CCSprite是游戏中相应的图片资源[4]，通过定义相应的CCAction（动作）实现不同的交互操作与动画。

2系统设计分析

2.1游戏逻辑设计

“彩豆消消乐”作为一款休闲的消除益智类游戏，其游戏目标为在设定时间内，尽可能多地消除同色彩豆。游戏场景为一矩形方格界面，随机排列各色彩豆，如图2所示。操作方法为点击游戏界面中无彩豆的方格处，在其对应的上、下、左、右4个垂直方向上，如有两个及以上同色彩豆即可消除。

消除动画为从点击处发射出一条瞬时粒子彩带击打彩豆，使该彩豆从背景地图弹起变大，然后呈顶点在上、开口向下的抛物线落下，到屏幕底部消失，如图2方框处所示。若无可消除彩豆，则该点击处闪现红色图片，并发出警告音效提示，如图3中画圈处所示。

2.2随机逻辑设计

游戏界面中各色彩豆的随机排列应设计为彩豆摆放位置随机，而不是各位置随机产生各色彩豆。通过这种随机逻辑设计，即可实现游戏中各彩豆的随机排列，又可使彩豆的颜色种类和数量可控。通过控制彩豆的颜色类型及数量，可设置不同游戏难度等级供玩家选择。

2.3系统模块设计

游戏可设计为5个模块：①游戏模块：负责彩豆搜索与消除处理、游戏计分、游戏结束判断、游戏胜利判断与晋级、重排彩豆刷新游戏，是整个系统的核心模块；②随机生成模块：负责生成一定数量的各色彩豆，随机排列在一个二维方格矩形中；③数据存储模块：用于游戏用户的数据保存，记录游戏用户成绩；④特效模块：负责游戏中彩豆消除时的物理动画与粒子渲染特效；⑤音效模块：负责管理游戏的各种音效，如：欢迎界面背景音乐、游戏背景音效、点击无彩豆可消除警告提示音效、游戏结束音效等。

2.4部分界面设计

2.4.1欢迎界面

游戏启动后首先呈现在用户面前的是欢迎界面，欢迎界面最基本、也最主要的元素是游戏的Logo（标识）、进入游戏以及退出游戏按钮。这些元素能让玩家明白游戏名称以及是否进行游戏。

2.4.2暂停界面

玩家在游戏过程中有暂停的需求，暂停时可进行游戏音效管理、刷新游戏、返回欢迎界面、退出游戏等动作。暂停界面与游戏都处于游戏场景中，属于不同功能逻辑分区，这就使用到图层CCLayer的概念。暂停界面处于PauseLayer图层上，游戏界面处于GameLayer图层上，从而将两个功能模块在一个场景内分开。endprint

3系统实现

3.1游戏贴图处理

3.1.1背景地图

游戏界面的背景地图使用了瓦片地图（TileMap）技术。瓦片地图，即某些适当的小图片，通过某种方式映射到场景界面中的相应位置，拼接形成一个完整的背景地图，这些瓦片可在一个或多个场景界面中多次重复使用。如果一个界面直接使用一张大的完整背景地图来渲染，会造成手机内存负载重、游戏加载时间长、安装文件规模大、图片资源重复设计与浪费等问题。瓦片地图的使用，只需少量小瓦片即可完成游戏世界的绘制与渲染，有效提高了手机的绘图性能与效率，减轻了硬件资源负载，减小了安装文件规模，亦方便游戏引擎的管理。

“彩豆消消樂”游戏场景界面是基于分辨率为800*480的屏幕进行设计，瓦片地图可设计为80*80大小，如图4所示。重复利用该瓦片地图映射到屏幕相应位置，即可获得完整的游戏背景地图，如图5所示。为使后期开发的粒子渲染效果明显，特意把瓦片地图背景颜色设计成深色。

相应程序代码如下：

// 得到屏幕横竖两个方向上所需瓦片个数

row = （int）（screenHeight/tiledHeight）；

col = （int）（screenWidth/tiledWidth）；

// 根据屏幕横竖两个方向上所需瓦片个数，将瓦片贴在屏幕上

for（int i=0； i

for（int j=0； j

// 确定瓦片映射在屏幕上的相应位置

float x = j*tiledWidth；

float y = i*tiledHeight；

tiled >setPosition（x， y）；

// 将瓦片贴在屏幕上

addChild（tiled）；

3.1.2彩豆贴图

为使图片资源更小与减少内存加载，可通过一张图片的指定区域来创建不同的CCSprite。实现方法为通过CCTextureCache加载图片到图片纹理缓存，再从缓存中获取该图片的CCTexture2D对象[3]，通过裁剪指定区域来创建相应的CCSprite。

如图6所示，彩豆图片纹理设计为360*40大小，每个不同颜色的彩豆（含透明无色彩豆）占据40*40的空间。在使用时载入整张图片，但在绘制显示不同颜色的彩豆时，只需传入相应绘制区域的坐标，屏幕上即可显示指定区域的图片。

相应代码如下：

CCTexture2D * textureBean = CCTextureCache：：shareTextureCache（） > addImage（“bean.png”）；

CCSprite * bean = CCSprite：：createWithTexture（textureBean CCRectMake（beanType*40， 0， 40， 40））；

3.2随机排列实现

一定数量的各色彩豆随机排列在游戏背景地图上，其随机逻辑如上文随机逻辑设计中所述：彩豆颜色类型、数量可控而位置随机。该随机逻辑的实现可通过集合的概念便捷实现。

先生成指定数量的各色彩豆放入集合，再把一定数量的空白透明彩豆加入集合（彩豆数量与空白透明彩豆数量之和为游戏背景地图的方格数），然后把该集合中所有元素的位置打乱，把打乱位置后的集合中的彩豆存入彩豆类型的二维数组（该二维数组行列对应游戏背景地图中方格的行列），把数组元素中的各类型彩豆映射到背景地图中行列对应的方格处，则形成了游戏场景中彩豆随机排列的界面。

3.3同色彩豆搜索与消除判定

3.3.1搜索算法

点击空白位置后，在该位置对应的上、下、左、右4个垂直方向上搜索彩豆，根据搜索到的彩豆颜色类型（彩色，非无色透明）进行判断，是否有可消除彩豆。

在进行搜索时，每对外前进搜索一个方格，需先判断是否超出屏幕界限，即彩豆二维数组是否越界。若越界，表明该方向上没有搜索到彩豆，则返回无色透明彩豆类型。由于点击处本身为无色透明彩豆类型，则该方向上的搜索结果直接用点击处的无色彩豆类型表示；若在该方向上搜索到彩豆，则停止搜索，返回搜索到的彩豆类型。搜索算法如图7所示，该图以向左搜索为例，其它方向类似，只需修改相应参数即可。

3.3.2同色消除判定

定义一个数组用于存放搜索到的彩豆，然后对该数组中的彩豆类型进行比较，判断是否有可消除的同色彩豆，同时定义一个数组用于标记相应彩豆是否可被消除。相应算法如下：

//判断是否有同色彩豆，有则往标志数组存“1”，无则默认为“0”

for（int index1=0；index1<3；index1++）{

for（int index2=index1+1；index2<4；index2++）{

if（searchedBean[index1].getBeanType（）！=SPACE&&searchedBean

[index2].getBeanType（）！=SPACE&&searchedBean[index1].getBea

nType（）==searchedBean[index2].getBeanType（））

{

dropFlag[index1]=1；

dropFlag[index2]=1；

……

//根据标志数组中的值来判断是否要消除相应彩豆

for（int direction=0； direction<4； direction++）{

if（dropFlag[direction]==1）{

switch （direction） {

case LEFT：

//执行消除彩豆的动画特效

……

break；

case UP：

//执行消除彩豆的动画特效

……

break；

……

3.4动画特效

3.4.1粒子特效

为使游戏动画视觉效果绚丽，如模拟火焰、爆炸、流星等特效，若使用图片精灵等传统方法实现，涉及大量的精灵控制和绘制[5]，将导致硬件资源负载大，且大大增加了开发工作量。针对这种情况，Cocos2dx提供了粒子系统CCParticleSystem实现这些特效。粒子特效的实现可通过代码修改相应的粒子效果属性，或者使用粒子编辑器Particle Designer来实现。但前者工作量大，且需不断调试，而后者是可视化编辑，待设计达到预期后，导出相应的plist文件即可使用，较为方便，其使用代码方法如下：

CCParticleSystemQuad *starParticle=new CCParticleSystemQuad（）；

starParticle->initWithFile（“stars.plist”）；

this->addChild（starParticle）；

3.4.2动作

Cocos2dx内置了数量丰富的动作功能，使精灵能在场景中实现相应动作，完成相应动画的绘制，而这只需调用Cocos2dx相应的动作函数即可便捷实现。相应代码如下：

（1）粒子移动代码：

CCActionInterval *fly=CCMoveTo：：create（0.4f，ccp（endX，endY））；

（2）彩豆弹起变大落下代码：

// 弹起跳落动作

CCActionInterval *jump = CCJumpBy：：create（duration， ccp（x，y）， height， frequency）；

// 放大动作

CCActionInterval *scale = CCScaleBy：：create（duration， 1.8f）；