基于Cocos2dx的消除益智類手機游戲設(shè)計與實現(xiàn)

曾家鵬

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

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

DOIDOI：10.11907/rjdk.171654

中圖分類號：TP319文獻標識碼：A文章編號：16727800（2017）010011805

0引言

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

PC端游戲多以大型復雜3D、網(wǎng)絡(luò)游戲為主，普遍需要玩家的長時間關(guān)注，并需要大型公司投入大量的人力、物力、財力進行開發(fā)。而手機游戲普遍以簡單的單機游戲為主，用戶通常是在碎片時間下進行消遣，且手機游戲多為個人或小團隊的創(chuàng)意作品，項目規(guī)模小，需要開發(fā)者快速、高質(zhì)量地實現(xiàn)創(chuàng)意，迅速推向市場[2]。

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

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

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

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

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

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

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

2.1游戲邏輯設(shè)計

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

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

2.2隨機邏輯設(shè)計

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

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

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

2.4部分界面設(shè)計

2.4.1歡迎界面

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

2.4.2暫停界面

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

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

3.1游戲貼圖處理

3.1.1背景地圖

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

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

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

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

row = （int） （screenHeight/tiledHeight）；

col = （int） （screenWidth/tiledWidth）；

// 根據(jù)屏幕橫豎兩個方向上所需瓦片個數(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。實現(xiàn)方法為通過CCTextureCache加載圖片到圖片紋理緩存，再從緩存中獲取該圖片的CCTexture2D對象[3]，通過裁剪指定區(qū)域來創(chuàng)建相應(yīng)的CCSprite。

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

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

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

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

3.2隨機排列實現(xiàn)

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

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

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

3.3.1搜索算法

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

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

3.3.2同色消除判定

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

//判斷是否有同色彩豆，有則往標志數(shù)組存“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；

……

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

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

if（dropFlag[direction]==1）{

switch （direction） {

case LEFT：

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

……

break；

case UP：

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

……

break；

……

3.4動畫特效

3.4.1粒子特效

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

CCParticleSystemQuad *starParticle=new CCParticleSystemQuad（）；

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

this->addChild（starParticle）；

3.4.2動作

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

（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）；

// 合并彈跳和放大動作，使彩豆可以一邊跳落一邊放大

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

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

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

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

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)容可自動釋放

gameScene->release（）；

//切換到過渡場景

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

4結(jié)語

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

參考文獻參考文獻：

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

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

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

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

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

責任編輯（責任編輯：黃?。〆ndprint