1. 程式人生 > >基於cocos2d-android的“植物大戰殭屍”遊戲研發

基於cocos2d-android的“植物大戰殭屍”遊戲研發

1 Cocos2d_android遊戲引擎介紹

Cocos2d是一個包含很多成員的大家族,其中含有Cocos2d-X、Cocos2d-iPhone、Cocos2d-JS等。然而,Cocos2d-X在中國處於世界領先水平。不同的Cocos2d版本之間的區別只是程式語言不同,但是實現的邏輯都相同。對於Cocos2d_Android只要關注以下四個部分:CCDirector(導演)、CCScene(場景)、CCLayer(圖層)、CCSprite(精靈)。

2總體設計

本遊戲事先會準備很多圖片(精靈),植物座標以二維陣列的儲存方式儲存在特定集合中,殭屍座標也保存於特定集合中,當遊戲開始時,殭屍會從儲存的座標點中隨機產生出來;而植物的產生則由玩家安放。遊戲的主體介面上有類似的植物安放位置地圖,是以螢幕位置劃分的,使用者只要單擊了植物,再點選螢幕的設定範圍、即可做出相應的響應。

由於cocos2d-android遊戲的特殊性,不能使用Android源生的預設介面,所以遊戲地圖主介面採用Tiled工具製作特殊地圖的方式實現,遊戲主要包括3個介面,遊戲開始介面、遊戲選擇介面、遊戲主體介面。遊戲的介面流程圖如圖1所示。所有非遊戲介面採用了貼圖或者選單選項等顯示機制,並對這些貼圖或者選單設有按鈕點選事件,當用戶點選時,會有相應的提示。遊戲主體介面是遊戲設計中游戲物件最多,需要處理的遊戲執行緒處理最複雜的介面[1]。

3業務邏輯的實現

3.1遊戲基本框架搭建

MENU(選單)遊戲選單按鈕,首先使用CCSprite來初始化兩張背景圖片,一張是正常顯示的圖片,另一張是點選按鈕按下去時的圖片;初始化選單是使用CCMenu初始化的,其呼叫方式是用onClick( )方法來檢測選單按鈕的狀態(選單按鈕是否被選中),當被使用者點選改選單按鈕時,螢幕上會顯示按下去時的圖片,程式會調onSelect( )方法,這個方法中會有相應的點選事件處理。

圖1 介面設計流程圖

Fig.1 interface design flow chart

3.1.2遊戲主介面類

遊戲進入主介面是呼叫CCTMXTiledMap的tiledMap方法來載入Tiled地圖製作軟體製作的地圖,在載入地圖的同時,檢查儲存植物的集合是否為空,如果為空需轉至商店圖層購買植物,否則直接進入遊戲;載入完地圖以後,再載入植物和殭屍的座標點,這些座標點儲存在特定的集合中;後續使用Random()方法隨機產生殭屍,使用一個cocos2d的定時器,即CCScheduler的scheduler方法,定時產生殭屍;左上方有供使用者操作的特殊工具,比如商店,倉庫等;右上方有返回按鈕。中上方位置是在商店購買的植物,不過這裡只能顯示5種植物,即可安放的植物,在其下方就是戰鬥位置、殭屍產生和植物安放的位置。

當提示安放植物時,一段延時以後,定時器會產生殭屍,隨後使用者可以種植植物,在這裡為了方便判斷與減少未知的bug,用到了一個FightLine類(戰線類),該類的作用就是儲存某一條線上的植物物件和殭屍物件,用以處理遊戲中碰撞的實現。如果殭屍遇到植物,則可攻擊;如果某一條線上有殭屍並且有可攻擊的植物時,則植物攻擊殭屍;如果該位置上有植物則不可安放其他植物。

3.1.3地圖製作

一般cocos2d-android的地圖製作工具是Tiled地圖製作軟體,本遊戲中使用到的功能有插入物件和插入物件層。主要目的是用於載入小殭屍的座標點和植物種植的座標點。

3.1.4 植物選擇框植物顯示位置的計算

遊戲中用到的植物選擇框有3行4列,首先要確定某一個植物屬於哪一行哪一列;我們這樣計算:假設R(1<=R<=12)植物屬於第i行第j列,不妨設左上角的那個框為第0行第0列,在該位置的植物為1,如圖2所示。

圖2 植物選擇框

Fig.2 Plant selection box

         則:從0開始計數,

第1個植物,屬於0行0列,即:行:(1-1)/4列:(1-1)%4;

第2個植物,屬於0行1列,即:行:(2-1)/4列:(2-1)%4;

第3個植物,屬於0行2列,即:行:(3-1)/4列:(3-1)%4;

……

……

第12個植物,屬於2行3列,即:行:(12-1)/4列:(12-1)%4;

綜上;第R個植物,屬於i=(R-1)/4行、j=(R-1)%4列。

由於要在螢幕上顯示植物,故需知道其顯示的座標;對於cocos2d遊戲引擎,這裡統一的設定其錨點為(0,0),因為遊戲裡植物圖片寬度為54畫素,高度為59畫素,每個框之間的距離為16畫素,植物框的高度為175畫素,所以某個植物的顯示位置如下:

x=(R-1)%4*54+16;

y=175-(R-1)/4*59;

隨後呼叫該植物的setPosition(x, y)方法即可在螢幕顯示,如圖3所示。

圖3 選擇框植物展示

Fig.3 Select box plant display

4.1.5 植物可種植區域的計算

可種植區域就是戰鬥的位置(包括植物和殭屍),遊戲中的戰鬥位置有3行4列,但螢幕總的有6行10列,首先要知道使用者點選了哪行那列,由於每一行和每一列中每個格子的寬度為46畫素,高度為53畫素,不妨設使用者點選的座標為(x, y),對應的行為line、列為column,螢幕的高度為h,則:

行:line=x/46;

列:column=(h-y)/53;(cocos2d座標體系原點為左下角)

從左往右、從上到下數起,可種植區域屬於從弟3行第6列開始至第5行第9列結束,如圖4所示。

圖4 遊戲地圖及植物種植區域

Fig.4 Game maps and planting areas

故可種植的行和列的範圍為:

行:line>=2 and line<=4;

列:column>=5 and column<=8;

即:當用戶點選了的點在line和column範圍內,直接呼叫植物的setPosition(line, column)方法即可實現植物的種植。

3.2 單項功能的實現

3.2.1 可種植區域判斷

當用戶點選了植物,再點選螢幕其他位置時,先獲取到使用者點選的位置座標,如果使用者點選的位置與可種植區域座標相符時,並且該位置沒有其他植物時,方可種植植物,然後把所點選植物的座標設為所點選的座標。

3.2.2 植物種植過程的實現

首先,採用一個二維陣列儲存植物種植的座標點,隨後在用一個類(戰線類)儲存某一條線上的植物和殭屍,在生成戰鬥頁面類時就初始化戰線類,如果有多條戰線,需迴圈初始化;該戰線類裡面存有戰鬥邏輯的相關方法,其中有個方法就是判斷該戰線中是否種植了植物,如果有則種植不成功,否則種植成功;當用戶點選植物時,植物先變為半透明狀態,如果使用者種植了植物,隨後被點選的植物恢復初始狀態,或者點選其他植物也可以恢復初始狀態。在種植植物的過程中,程式會把種植了的植物物件和隨機產生的殭屍的物件新增到戰線類中,用於處理戰鬥的碰撞過程。

3.2.3 太陽花的種植及生產陽光實現

首先,建了特定的基類,太陽花類繼承自生產植物基類,都有些特殊屬性,比如特殊的動畫;當安放了太陽花以後,會產生一個定時器,該定時器會定時的產生太陽花,太陽花產生的位置跟種植的太陽花有關,一般偏幅在10個畫素左右;太陽花有其生命週期,當移動到收集的位置時,陽光值加加,然後陽光自身銷燬。其次,種植植物太陽花時,做了很多判斷,比如,是否落在了地圖可種植區域、該地圖位置是否已經種植了植物等。最後,如果太陽花被殭屍吃了,則會停止產生陽光的定時器來停止生產陽光同時太陽花植物本身銷燬。

3.2.4 豌豆射手種植及產生豌豆實現

豌豆射手和豌豆都繼承自植物基類,都有其特殊屬性,豌豆有其移動的屬性,從種植豌豆射手的位置,移動到某個位置,如果中途有殭屍則攻擊,否則不產生。豌豆也設有定時器,監測該位置的這條線上是否有殭屍,如果有則產生豌豆。豌豆射手種植和太陽花差不多,都是判斷是否落在可種植區域並且該位置沒有種植植物即可安放。

3.2.5 生成殭屍的實現

殭屍不同於植物,殭屍的產生需要幾個引數,移動的起始位置以及終點位置,以及移動過程中的不同動畫的播放。對於殭屍的基類,有些抽象方法可實現,比如是否被攻擊、是否攻擊植物、運動過程中播放的動畫等。殭屍的產生是隨機的,呼叫了Random()方法生成了幾個隨機數,用於讀取地圖的殭屍起點座標點,然後在相應的某條線上產生殭屍。

3.2.6 遊戲彈窗的實現

在實現遊戲彈窗的時候,採用以下方式:首先,暫停當前圖層,呼叫當前圖層的父類,新增一個新的圖層,這個新的圖層就是彈窗。這個新的圖層也有點選事件的操作,比如,結束這個新的圖層、繼續當前圖層。或者結束所有圖層。