基于Cocos2dx的消除益智類手機游戲設計與實現

曾家鵬

摘要：Cocos2dx是一個開源、免費、多平臺支持的手機游戲引擎?！安识瓜麡贰笔謾C游戲利用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）；

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

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

3.5場景構建與特效切換

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

（1）場景創建和運行：

CCScene *scene = Scene：：create（）；

Scene->addChild（welcomLayer）；

pDirector->runWithScene（scene）；

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

//建立新場景

CCScene *gameScene = GameScene：：scene（）；

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

CCScene *transformScene = CCTransitionCrossFade：：create

（0.9f，gameScene）；

//調用release，使gameScene后面內容可自動釋放

gameScene->release（）；

//切換到過渡場景

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

4結語

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

參考文獻參考文獻：

[1]CNNIC.第39次中國互聯網絡發展統計報告[R].北京：中國互聯網絡信息中心，2017.

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

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

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

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

責任編輯（責任編輯：黃健）endprint