曾家鵬

摘要：Cocos2dx是一個(gè)開源、免費(fèi)、多平臺(tái)支持的手機(jī)游戲引擎。“彩豆消消樂”手機(jī)游戲利用Cocos2dx提供的場景、層、精靈、瓦片地圖、粒子效果、音效管理等技術(shù)，快捷實(shí)現(xiàn)了游戲的開發(fā)與多平臺(tái)部署。詳細(xì)闡述了該游戲的設(shè)計(jì)實(shí)現(xiàn)過程與游戲的搜索消除算法，為便捷、高品質(zhì)、低成本地開發(fā)手機(jī)游戲，迅速高效地實(shí)現(xiàn)開發(fā)者的游戲創(chuàng)意提供了一種思路。

關(guān)鍵詞：手機(jī)游戲；Cocos2dx；游戲引擎；益智游戲

DOIDOI：10.11907/rjdk.171654

中圖分類號(hào)：TP319文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：16727800（2017）010011805

0引言

隨著移動(dòng)互聯(lián)網(wǎng)的迅速發(fā)展與成熟， 4G移動(dòng)通信網(wǎng)絡(luò)的普遍覆蓋，人們已將智能手機(jī)視為集通信、互聯(lián)網(wǎng)、支付、娛樂等功能于一體的多功能平臺(tái)。在眾多豐富的手機(jī)應(yīng)用中，手機(jī)游戲無疑是最受歡迎的應(yīng)用之一。截至2016年底，根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心統(tǒng)計(jì)，中國手機(jī)游戲用戶已超3.5億[1]。由此可見，手機(jī)游戲應(yīng)用有著巨大的市場前景與經(jīng)濟(jì)效益。

PC端游戲多以大型復(fù)雜3D、網(wǎng)絡(luò)游戲?yàn)橹?，普遍需要玩家的長時(shí)間關(guān)注，并需要大型公司投入大量的人力、物力、財(cái)力進(jìn)行開發(fā)。而手機(jī)游戲普遍以簡單的單機(jī)游戲?yàn)橹鳎脩敉ǔＪ窃谒槠瑫r(shí)間下進(jìn)行消遣，且手機(jī)游戲多為個(gè)人或小團(tuán)隊(duì)的創(chuàng)意作品，項(xiàng)目規(guī)模小，需要開發(fā)者快速、高質(zhì)量地實(shí)現(xiàn)創(chuàng)意，迅速推向市場[2]。

若要在快速開發(fā)中保證游戲品質(zhì)，游戲引擎的使用成為最佳選擇。使用游戲引擎可降低開發(fā)成本、縮短開發(fā)周期、提高游戲品質(zhì)并降低風(fēng)險(xiǎn)。游戲引擎為開發(fā)者封裝好物理引擎、粒子效果、場景管理、音效管理等游戲開發(fā)工具，并提供游戲運(yùn)行架構(gòu)以及與操作系統(tǒng)的交互。開發(fā)者只需專注于游戲邏輯與圖形邏輯的設(shè)計(jì)與實(shí)現(xiàn)即可，從而高效地實(shí)現(xiàn)創(chuàng)意[3]。

作為開源、免費(fèi)、跨平臺(tái)、高性能的游戲引擎Cocos2dx，消除益智類游戲“彩豆消消樂”基于該引擎，利用其提供的CCDirector、CCScene、CCLayer、CCSprite、TileMap、CCPaticleSystem等技術(shù)實(shí)現(xiàn)了快捷設(shè)計(jì)與開發(fā)，并在Android、iPhone等多個(gè)移動(dòng)終端進(jìn)行了多次部署測試，發(fā)現(xiàn)其運(yùn)行效果良好，實(shí)現(xiàn)了設(shè)計(jì)目的。

1Coco2dx核心技術(shù)簡介

Cocos2dx封裝好一套標(biāo)準(zhǔn)的API接口供游戲開發(fā)者開發(fā)調(diào)用，可實(shí)現(xiàn)在不同平臺(tái)的屏幕繪制、音效播放、文字處理、文件讀寫等功能。游戲開發(fā)者待項(xiàng)目完成后，只需在目標(biāo)終端平臺(tái)編譯即可進(jìn)行部署。Cocos2dx的核心技術(shù)概念與關(guān)系如圖1所示。

CCDirector（導(dǎo)演）為單例模式，對(duì)游戲各場景及流程進(jìn)行控制與管理。各場景間的初始化、結(jié)束銷毀以及轉(zhuǎn)換都需要CCDirector調(diào)用相關(guān)方法。常用的管理CCScene（場景）的方法有runWithScene、replaceScene、pushScene。為了使場景切換生動(dòng)絢麗，擁有動(dòng)畫效果，可通過CCTransitionScene實(shí)現(xiàn)場景間的切換效果。

不管是普通應(yīng)用程序還是游戲，都是由一個(gè)個(gè)界面構(gòu)成的，游戲中的一個(gè)界面即可理解為一個(gè)場景。CCScene（場景）是構(gòu)建游戲界面的基本元素，它是頂層容器，也是游戲界面邏輯的對(duì)應(yīng)，在其上添加若干CCLayer（圖層），以實(shí)現(xiàn)不同功能模塊的劃分。而場景內(nèi)容的生動(dòng)與豐富，以及相應(yīng)的動(dòng)畫與交互操作是通過各圖層上的不同CCSprite（精靈）來實(shí)現(xiàn)。CCSprite是游戲中相應(yīng)的圖片資源[4]，通過定義相應(yīng)的CCAction（動(dòng)作）實(shí)現(xiàn)不同的交互操作與動(dòng)畫。

2系統(tǒng)設(shè)計(jì)分析

2.1游戲邏輯設(shè)計(jì)

“彩豆消消樂”作為一款休閑的消除益智類游戲，其游戲目標(biāo)為在設(shè)定時(shí)間內(nèi)， 盡可能多地消除同色彩豆。游戲場景為一矩形方格界面，隨機(jī)排列各色彩豆，如圖2所示。操作方法為點(diǎn)擊游戲界面中無彩豆的方格處，在其對(duì)應(yīng)的上、下、左、右4個(gè)垂直方向上，如有兩個(gè)及以上同色彩豆即可消除。

消除動(dòng)畫為從點(diǎn)擊處發(fā)射出一條瞬時(shí)粒子彩帶擊打彩豆，使該彩豆從背景地圖彈起變大，然后呈頂點(diǎn)在上、開口向下的拋物線落下，到屏幕底部消失，如圖2方框處所示。若無可消除彩豆，則該點(diǎn)擊處閃現(xiàn)紅色圖片，并發(fā)出警告音效提示，如圖3中畫圈處所示。

2.2隨機(jī)邏輯設(shè)計(jì)

游戲界面中各色彩豆的隨機(jī)排列應(yīng)設(shè)計(jì)為彩豆擺放位置隨機(jī)，而不是各位置隨機(jī)產(chǎn)生各色彩豆。通過這種隨機(jī)邏輯設(shè)計(jì)，即可實(shí)現(xiàn)游戲中各彩豆的隨機(jī)排列，又可使彩豆的顏色種類和數(shù)量可控。通過控制彩豆的顏色類型及數(shù)量，可設(shè)置不同游戲難度等級(jí)供玩家選擇。

2.3系統(tǒng)模塊設(shè)計(jì)

游戲可設(shè)計(jì)為5個(gè)模塊：①游戲模塊：負(fù)責(zé)彩豆搜索與消除處理、游戲計(jì)分、游戲結(jié)束判斷、游戲勝利判斷與晉級(jí)、重排彩豆刷新游戲，是整個(gè)系統(tǒng)的核心模塊；②隨機(jī)生成模塊：負(fù)責(zé)生成一定數(shù)量的各色彩豆，隨機(jī)排列在一個(gè)二維方格矩形中；③數(shù)據(jù)存儲(chǔ)模塊：用于游戲用戶的數(shù)據(jù)保存，記錄游戲用戶成績；④特效模塊：負(fù)責(zé)游戲中彩豆消除時(shí)的物理動(dòng)畫與粒子渲染特效；⑤音效模塊：負(fù)責(zé)管理游戲的各種音效，如：歡迎界面背景音樂、游戲背景音效、點(diǎn)擊無彩豆可消除警告提示音效、游戲結(jié)束音效等。

2.4部分界面設(shè)計(jì)

2.4.1歡迎界面

游戲啟動(dòng)后首先呈現(xiàn)在用戶面前的是歡迎界面，歡迎界面最基本、也最主要的元素是游戲的Logo（標(biāo)識(shí)）、進(jìn)入游戲以及退出游戲按鈕。這些元素能讓玩家明白游戲名稱以及是否進(jìn)行游戲。

2.4.2暫停界面

玩家在游戲過程中有暫停的需求，暫停時(shí)可進(jìn)行游戲音效管理、刷新游戲、返回歡迎界面、退出游戲等動(dòng)作。暫停界面與游戲都處于游戲場景中，屬于不同功能邏輯分區(qū)，這就使用到圖層CCLayer的概念。暫停界面處于PauseLayer圖層上，游戲界面處于GameLayer圖層上，從而將兩個(gè)功能模塊在一個(gè)場景內(nèi)分開。endprint

3系統(tǒng)實(shí)現(xiàn)

3.1游戲貼圖處理

3.1.1背景地圖

游戲界面的背景地圖使用了瓦片地圖（TileMap）技術(shù)。瓦片地圖，即某些適當(dāng)?shù)男D片，通過某種方式映射到場景界面中的相應(yīng)位置，拼接形成一個(gè)完整的背景地圖，這些瓦片可在一個(gè)或多個(gè)場景界面中多次重復(fù)使用。如果一個(gè)界面直接使用一張大的完整背景地圖來渲染，會(huì)造成手機(jī)內(nèi)存負(fù)載重、游戲加載時(shí)間長、安裝文件規(guī)模大、圖片資源重復(fù)設(shè)計(jì)與浪費(fèi)等問題。瓦片地圖的使用，只需少量小瓦片即可完成游戲世界的繪制與渲染，有效提高了手機(jī)的繪圖性能與效率，減輕了硬件資源負(fù)載，減小了安裝文件規(guī)模，亦方便游戲引擎的管理。

“彩豆消消樂”游戲場景界面是基于分辨率為800*480的屏幕進(jìn)行設(shè)計(jì)，瓦片地圖可設(shè)計(jì)為80*80大小，如圖4所示。重復(fù)利用該瓦片地圖映射到屏幕相應(yīng)位置，即可獲得完整的游戲背景地圖，如圖5所示。為使后期開發(fā)的粒子渲染效果明顯，特意把瓦片地圖背景顏色設(shè)計(jì)成深色。

相應(yīng)程序代碼如下：

// 得到屏幕橫豎兩個(gè)方向上所需瓦片個(gè)數(shù)

row = （int） （screenHeight/tiledHeight）；

col = （int） （screenWidth/tiledWidth）；

// 根據(jù)屏幕橫豎兩個(gè)方向上所需瓦片個(gè)數(shù)，將瓦片貼在屏幕上

for（int i=0； i

for（int j=0； j

// 確定瓦片映射在屏幕上的相應(yīng)位置

float x = j*tiledWidth；

float y = i*tiledHeight；

tiled >setPosition（x， y）；

// 將瓦片貼在屏幕上

addChild（tiled）；

3.1.2彩豆貼圖

為使圖片資源更小與減少內(nèi)存加載，可通過一張圖片的指定區(qū)域來創(chuàng)建不同的CCSprite。實(shí)現(xiàn)方法為通過CCTextureCache加載圖片到圖片紋理緩存，再從緩存中獲取該圖片的CCTexture2D對(duì)象[3]，通過裁剪指定區(qū)域來創(chuàng)建相應(yīng)的CCSprite。

如圖6所示，彩豆圖片紋理設(shè)計(jì)為360*40大小，每個(gè)不同顏色的彩豆（含透明無色彩豆）占據(jù)40*40的空間。在使用時(shí)載入整張圖片，但在繪制顯示不同顏色的彩豆時(shí)，只需傳入相應(yīng)繪制區(qū)域的坐標(biāo)，屏幕上即可顯示指定區(qū)域的圖片。

相應(yīng)代碼如下：

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

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

3.2隨機(jī)排列實(shí)現(xiàn)

一定數(shù)量的各色彩豆隨機(jī)排列在游戲背景地圖上，其隨機(jī)邏輯如上文隨機(jī)邏輯設(shè)計(jì)中所述：彩豆顏色類型、數(shù)量可控而位置隨機(jī)。該隨機(jī)邏輯的實(shí)現(xiàn)可通過集合的概念便捷實(shí)現(xiàn)。

先生成指定數(shù)量的各色彩豆放入集合，再把一定數(shù)量的空白透明彩豆加入集合（彩豆數(shù)量與空白透明彩豆數(shù)量之和為游戲背景地圖的方格數(shù)），然后把該集合中所有元素的位置打亂，把打亂位置后的集合中的彩豆存入彩豆類型的二維數(shù)組（該二維數(shù)組行列對(duì)應(yīng)游戲背景地圖中方格的行列），把數(shù)組元素中的各類型彩豆映射到背景地圖中行列對(duì)應(yīng)的方格處，則形成了游戲場景中彩豆隨機(jī)排列的界面。

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

3.3.1搜索算法

點(diǎn)擊空白位置后，在該位置對(duì)應(yīng)的上、下、左、右4個(gè)垂直方向上搜索彩豆，根據(jù)搜索到的彩豆顏色類型（彩色，非無色透明）進(jìn)行判斷，是否有可消除彩豆。

在進(jìn)行搜索時(shí)，每對(duì)外前進(jìn)搜索一個(gè)方格，需先判斷是否超出屏幕界限，即彩豆二維數(shù)組是否越界。若越界，表明該方向上沒有搜索到彩豆，則返回?zé)o色透明彩豆類型。由于點(diǎn)擊處本身為無色透明彩豆類型，則該方向上的搜索結(jié)果直接用點(diǎn)擊處的無色彩豆類型表示；若在該方向上搜索到彩豆，則停止搜索，返回搜索到的彩豆類型。搜索算法如圖7所示，該圖以向左搜索為例，其它方向類似，只需修改相應(yīng)參數(shù)即可。

3.3.2同色消除判定

定義一個(gè)數(shù)組用于存放搜索到的彩豆，然后對(duì)該數(shù)組中的彩豆類型進(jìn)行比較，判斷是否有可消除的同色彩豆，同時(shí)定義一個(gè)數(shù)組用于標(biāo)記相應(yīng)彩豆是否可被消除。相應(yīng)算法如下：

//判斷是否有同色彩豆，有則往標(biāo)志數(shù)組存“1”，無則默認(rèn)為“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；

……

//根據(jù)標(biāo)志數(shù)組中的值來判斷是否要消除相應(yīng)彩豆

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

if（dropFlag[direction]==1）{

switch （direction） {

case LEFT：

//執(zhí)行消除彩豆的動(dòng)畫特效

……

break；

case UP：

//執(zhí)行消除彩豆的動(dòng)畫特效

……

break；

……

3.4動(dòng)畫特效

3.4.1粒子特效

為使游戲動(dòng)畫視覺效果絢麗，如模擬火焰、爆炸、流星等特效，若使用圖片精靈等傳統(tǒng)方法實(shí)現(xiàn)，涉及大量的精靈控制和繪制[5]，將導(dǎo)致硬件資源負(fù)載大，且大大增加了開發(fā)工作量。針對(duì)這種情況，Cocos2dx提供了粒子系統(tǒng)CCParticleSystem實(shí)現(xiàn)這些特效。粒子特效的實(shí)現(xiàn)可通過代碼修改相應(yīng)的粒子效果屬性，或者使用粒子編輯器Particle Designer來實(shí)現(xiàn)。但前者工作量大，且需不斷調(diào)試，而后者是可視化編輯，待設(shè)計(jì)達(dá)到預(yù)期后，導(dǎo)出相應(yīng)的plist文件即可使用，較為方便，其使用代碼方法如下：

CCParticleSystemQuad *starParticle=new CCParticleSystemQuad（）；

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

this->addChild（starParticle）；

3.4.2動(dòng)作

Cocos2dx內(nèi)置了數(shù)量豐富的動(dòng)作功能，使精靈能在場景中實(shí)現(xiàn)相應(yīng)動(dòng)作，完成相應(yīng)動(dòng)畫的繪制，而這只需調(diào)用Cocos2dx相應(yīng)的動(dòng)作函數(shù)即可便捷實(shí)現(xiàn)。相應(yīng)代碼如下：

（1）粒子移動(dòng)代碼：

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

（2）彩豆彈起變大落下代碼：

// 彈起跳落動(dòng)作

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

// 放大動(dòng)作

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

// 合并彈跳和放大動(dòng)作，使彩豆可以一邊跳落一邊放大

CCAction *drop = CCSpawn：：create（jump，scale，NULL）；

3.5場景構(gòu)建與特效切換

“彩豆消消樂”是由不同場景構(gòu)成的一個(gè)完整的游戲系統(tǒng)，為了有更好的視覺效果，場景的切換使用了切換特效，以獲得良好的用戶體驗(yàn)。Cocos2dx為場景創(chuàng)建與特效切換的實(shí)現(xiàn)提供了極大方便。實(shí)現(xiàn)代碼如下：

（1）場景創(chuàng)建和運(yùn)行：

CCScene *scene = Scene：：create（）；

Scene->addChild（welcomLayer）；

pDirector->runWithScene（scene）；

（2）場景切換及特效切換：

//建立新場景

CCScene *gameScene = GameScene：：scene（）；

//建立過渡場景，使用交叉漸變切換特效

CCScene *transformScene = CCTransitionCrossFade：：create

（0.9f，gameScene）；

//調(diào)用release，使gameScene后面內(nèi)容可自動(dòng)釋放

gameScene->release（）；

//切換到過渡場景

CCDirector：：sharedDirector（）->replaceScene（pScene）

4結(jié)語

本文詳細(xì)敘述了“彩豆消消樂”游戲基于Cocos2dx游戲引擎的設(shè)計(jì)思路與技術(shù)實(shí)現(xiàn)細(xì)節(jié)。該游戲在多臺(tái)真機(jī)上進(jìn)行部署測試，運(yùn)行正常，游戲畫面絢麗，擁有良好的用戶體驗(yàn)效果，達(dá)到了設(shè)計(jì)期望。通過基于Cocos2dx的消除益智類手機(jī)游戲的設(shè)計(jì)與實(shí)現(xiàn)，可為便捷、高效、高品質(zhì)地實(shí)現(xiàn)游戲開發(fā)者創(chuàng)意提供借鑒參考。

參考文獻(xiàn)參考文獻(xiàn)：

[1]CNNIC.第39次中國互聯(lián)網(wǎng)絡(luò)發(fā)展統(tǒng)計(jì)報(bào)告[R].北京：中國互聯(lián)網(wǎng)絡(luò)信息中心，2017.

[2]陳懷.基于Android游戲開發(fā)中常用類庫的設(shè)計(jì)與實(shí)現(xiàn)[D].西安：西安電子科技大學(xué)，2011.

[3]沈大海.Cocos2dx手機(jī)游戲開發(fā)與項(xiàng)目實(shí)戰(zhàn)詳解[M].北京：清華大學(xué)出版社，2014.

[4]劉劍卓，鄭光龍.Cocos2dX游戲開發(fā)技術(shù)精解[M].第2版.北京：人民郵電出版社，2015.

[5]馮立鵬.Cocos2dx入門經(jīng)典[M].北京：人民郵電出版社，2014.

責(zé)任編輯（責(zé)任編輯：黃?。〆ndprint