iPhone遊戲開發 使用Cocos2d架構開發教程

iPhone遊戲開發 使用Cocos2d架構開發教程是本文要介紹的內容，行動裝置正改變我們工作和與他人互動的關係。新一輪革命正在我們身上發生，人們開始通過行動裝置消費更多的資料內容。iPhone市集成為手機應用成功和流行的縮影，其中遊戲是最熱門的類別。在本篇文章中，我將展示如何用Cocos2d架構來製作iPhone遊戲。

iphone遊戲

Cocos2d架構

Cocos2d是用於構建iPhone遊戲的開源架構，是基於iPhone核心SDK之上架構而成，提供可加速iPhone遊戲開發的易用API。

下載和安裝Cocos2d架構和模板

要使用Cocos2d架構的強大功能，第一步是下載和安裝與架構相關的架構和模板。遊戲邦註：原文提供了架構和模板的。）

瞭解架構的基礎

在開始製作首個iPhone遊戲前，建議先熟悉下Cocos2d架構的基礎，包括以下四項內容：

情境。情境這個節點很特殊，它是所有節點的基礎。情境的目的在於呈現出遊戲的可操作部分和展現遊戲情境遊戲邦註：如遊戲結束、首頁面和高分熱門排行榜等）。

層次。層次呈現出的是玩遊戲的具體地區。Cocos2d中的層次與Photoshop的層次作用類似。這意味著某個情境可以由多個層次構成。一個層次承載背景畫面，另一個層次便是遊戲動作發生之初。

介面。介面指得是那些賦予遊戲靈魂的事物。比如，如果你製作太空遊戲，你的飛船和敵人就是介面。用於深化使用者遊戲體驗的每個角色都可以當成是介面。

製作首個Cocos2d項目

開啟Xcode，建立新項目。1所示，從項目模板菜單中選擇Cocos2d項目。

 
圖1：Cocos2d template for Xcode

點擊“選擇”進入下個情境。輸入MyFirstCocos2dProject作為項目名稱，然後點擊“儲存”。隨後，系統便會通過預設範本來建立Cocos2d項目。這篇文章中所述的是Cocos2d架構的0.99版本，預設搜尋的是SDK 4.0。如果你安裝過最新版的SDK，你會收到2中所示的“基礎SDK丟失”資訊。

 
圖2：Cocos2d project template base SDK missing

你所要做的是告訴Cocos2d架構我們正在使用的是更新版本的SDK。要達成此目標，點擊“項目”標籤下的“編輯項目設定”，然後3所示指定SDK版本。

圖3：Selecting the installed SDK for iOS device

正如你從以上截屏中看到的那樣，iOS SDK 4.0丟失，但我們可以選擇iOS SDK 4.1。選擇正確的SDK後，使用“指令B”構建整個項目。項目中不能有錯誤。實現上述目標後，你可以用“指令R”來運行應用。圖4顯示應用正在運行中iPhone模擬器的樣式。

 
圖4：The default Cocos2d project template output

Cocos2d模板有基礎執行程式，使得螢幕上顯示出“Hello World”的語句。每秒畫面格數(FPS)測量值顯示在螢幕左下方遊戲邦註：圖4中是60.0）。預設範本是為了驗證開發人員已正確安裝架構以及與架構相關的所有組件。下個部分我們將繼續深入挖掘Cocos2d架構。

開始使用Cocos2d架構

預設Cocos2d模板設定為橫向模式顯示，MyFirstCocos2dProjectAppDelegate.m檔案中使用以下代碼就可以輕易做出改變：

 

  
[director setDeviceOrientation:kCCDeviceOrientationPortrait]; 
 

現在，如果你運行應用就會發現，顯示是縱向而不是橫向。接下來，我們要改變遊戲的背景。我們已經在項目的“資源”檔案夾中加入檔案Background3.png。資源檔夾存放所有應用中使用的資源遊戲邦註：片、音效檔等）。以下面的代碼將背景圖片設定在靜態模式情境中：

 

  
+(id) scene  
  
{  
  
// ‘scene’ is an autorelease object.  
  
CCScene *scene = [CCScene node];  
  
 
  
// ‘layer’ is an autorelease object.  
  
HelloWorld *layer = [HelloWorld node];  
  
 
  
CCSprite *background = [CCSprite spriteWithFile:@"Background3.png"];  
  
 
  
[layer addChild:background];  
  
 
  
// add layer as a child to scene  
  
[scene addChild: layer];  
  
 
  
// return the scene  
  
return scene;  
  
} 
 

CCSprite類型包含spriteWithFile方法，輸入檔案名稱作為參數。使用addChild方式將背景介面加入到層次中，得到圖5中顯示的效果。

圖5：Background sprite not positioned correctly

不幸的是，背景介面的位置不正確。我們需要為介面設定錨點，6所示。

 
圖6：Background sprite positioned correctly

背景圖片適合尺寸為320 x 480的螢幕。如果你計劃讓裝置的轉動發揮作用，那麼你需要有張適合480 x 320橫向模式的背景圖片。在下一節中，我們將為應用添加介面。

添加介面

添加背景只是應用設計的開始，我們需要為遊戲添加可操作的介面。我們將使用一張笑臉圖片作為我們的活動介面。使用下列代碼可為應用添加介面：

 

  
// on “init” you need to initialize your instance  
  
-(id) init  
  
{  
  
// always call “super” init  
  
// Apple recommends to re-assign “self” with the “super” return value  
  
if( (self=[super init] )) {  
  
 
  
// adding the sprite  
  
CCSprite *smiley = [CCSprite spriteWithFile:@"smiley.png"];  
  
smiley.position = ccp(100,100);  
  
[self addChild:smiley];  
  
 
  
}  
  
return self;  
  
} 
 

使用最初的方法，我們建立CCSprite執行個體呈現笑臉角色。首先將笑臉放置在適當位置100，100），隨後添加到層中。如果你運行應用，你會發現笑臉看不見。原因在於笑臉位於背景層之後。為看到笑臉，我們將背景介面的Z軸值調為-1，將背景介面放置在笑臉介面之後，代碼如下：[layer addChild:background z:-1];

圖7顯示調整後的結果。

圖7：Smiley face sprite added to the game scene

在上述例子中，我們將笑臉放置在螢幕上時使用的是硬代碼值。以下使用硬代碼值在螢幕上放置元素是因為應用將以iPhone協調系統為基礎。

如果你在iPad上運行應用，你會發現背景和介面的位置都有錯誤。為了讓應用在iPhone和iPad裝置上的顯示效果相同，我們必須使用CGSize類別來深化當前裝置的寬度值和高度值。以下代碼顯示如何使用CGSize：

 

  
// on “init” you need to initialize your instance  
  
-(id) init  
  
{  
  
// always call “super” init  
  
// Apple recommends to re-assign “self” with the “super” return value  
  
if( (self=[super init] )) {  
  
 
  
CGSize windowSize = [[CCDirector sharedDirector] winSize];  
  
 
  
// adding the sprite  
  
CCSprite *smiley = [CCSprite spriteWithFile:@"smiley.png"];  
  
smiley.position = ccp(windowSize.width/2,windowSize.height/2);  
  
[self addChild:smiley];  
  
 
  
}  
  
 
  
return self;  
  
} 
 

在上述代碼中，我們使用CCDirector來恢複winSize執行個體。winSize是指當前啟動並執行iOS裝置的尺寸。這確保應用正確地在裝置上運行。

現在，我們的笑臉還沒有任何移動。在下節中，我們將介紹讓笑臉在螢幕中移動的方法。

動作和順序

Cocos2d使用動作為CCNode對象中的介面或其他對象添加效果。Cocos2d架構有許多內建動作，這些動作包括CCFadeTo、CCMoveTo和CCScaleBy等。以下代碼使用CCMoveTo動作將笑臉移動到螢幕上的特定位置：

 

  
// on “init” you need to initialize your instance  
  
-(id) init  
  
{  
  
// always call “super” init  
  
// Apple recommends to re-assign “self” with the “super” return value  
  
if( (self=[super init] )) {  
  
 
  
CGSize windowSize = [[CCDirector sharedDirector] winSize];  
  
 
  
// adding the sprite  
  
CCSprite *smiley = [CCSprite spriteWithFile:@"smiley.png"];  
  
smiley.position = ccp(windowSize.width/2,windowSize.height/2);  
  
[self addChild:smiley];  
  
 
  
// actions  
  
 
  
[smiley runAction:[CCMoveTo actionWithDuration:0.9 position:ccp(300,300)]];  
  
 
  
}  
  
 
  
return self;  
  
} 
 

在這個代碼中，我們使用runAction方法來在笑臉介面上執行CCMoveTo動作。CCMoveTo動作方法使用actionWithDuration和位置參數。actionWithDuration是完成動作所需要的時間。位置參數指的是介面的移動地點。如果你運行應用，你會發現笑臉從原位置移動到新位置上。

在你需要介面執行諸多動作的同時，便產生了情節。對於這些情節，你可以使用CCSpawn類型，確保這些動作同時為介面所執行。以下代碼便是CCSpawn在動作中的應用：

 

  
id moveAction = [CCMoveTo actionWithDuration:0.9 position:ccp(200,200)];  
  
id fadeOutAction = [CCFadeOut actionWithDuration:0.9];  
  
id callback = [CCCallFunc actionWithTarget:self selector:@selector(finishedAnimation)];  
  
 
  
[smiley runAction:[CCSequence actions:moveAction,fadeOutAction,callback,nil]];  
  
 
  
-(void) finishedAnimation  
  
{  
  
NSLog(@”animation has been finished!”);  
  
} 
 

在這個代碼中，你可以建立兩個獨立的動作，CCMoveTo和CCFadeOut。這兩個動作都會以參數的形式遞交給CCSpawn方法，使得笑臉CCSprite能夠同時移動和淡出螢幕。

當使用CCActions時，找到動畫的完結點很有用。在這段情節中，我們可以使用CCSequence類別。CCSequence讓開發人員可以陸續進行不同動作，然後最終會有回收功能顯示動畫已完成。以下代碼便是CCSequence：

 

  
-(void) finishedAnimation  
  
{  
  
int x = arc4random() % 320;  
  
int y = arc4random() % 480;  
  
 
  
id moveAction = [CCMoveTo actionWithDuration:0.9 position:ccp(x,y)];  
  
id callback = [CCCallFunc actionWithTarget:self selector:@selector(finishedAnimation)];  
  
 
  
[smiley runAction:[CCSequence actions:moveAction,callback,nil]];  
  
} 
 

這個代碼使用CCCallFunc類別建立出回收功能。一旦CCMoveTo和CCFadeOut兩個動作均完成之後，回收功能就會被觸發。以排除漏洞模式運行應用，你會發現在動畫完成後，顯示完成的日誌資訊動畫會顯示在螢幕上。

我們可以使用回收功能來不斷重複動畫，將介面移動到螢幕上的任意位置。這可以通過finishedAnimation功能實現，以下便是代碼：

 

  
-(void) finishedAnimation  
  
{  
  
int x = arc4random() % 320;  
  
int y = arc4random() % 480;  
  
 
  
id moveAction = [CCMoveTo actionWithDuration:0.9 position:ccp(x,y)];  
  
id callback = [CCCallFunc actionWithTarget:self selector:@selector(finishedAnimation)];  
  
 
  
[smiley runAction:[CCSequence actions:moveAction,callback,nil]];  
  
} 
 

注意：上述代碼可輕易獨立成某個類別的方法，這會減少出現複製粘貼之類的錯誤。但為了讓此文更為簡潔，我已經複製了代碼。

arc4random功能可用於隨機產生從0到n-1的數字。我們根據iPhone螢幕尺寸遊戲邦註：即320 x 480像素）來限定這個隨機數字。獲得的座標隨後將傳輸至CCMoveTo功能的位置參數。finishedAnimation也可以用作回收方法，使得動畫在結束後不斷重複。運行應用，你會發現笑臉不斷從某個隨機位置移動到另一個隨機位置。

觸屏的使用

我們的笑臉在螢幕上自由移動，目前沒有方法讓它停下來。在本節中，我們將讓使用者可以通過接觸事件來控制笑臉。處理接觸事件的方法很多，為使設計簡單我們使用CCTouchesBegin事件，這個事件在使用者接觸螢幕時觸發。在使用CCTouchesBegin事件之前，使用原始方法確保isTouchEnabled特性設定為“是”：

 

  
-(void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
  
{  
  
 
  
UITouch *touch = [touches anyObject];  
  
CGPoint location = [touch locationInView:[touch view]];  
  
location = [[CCDirector sharedDirector] convertToGL:location];  
  
} 
 

以上使用的ccTouchesBegan方法可獲得使用者接觸螢幕的座標。在ccTouchesBegan事件中，我們需要得知使用者是否接觸笑臉。我們通過使用好用的老式畢達哥拉斯原理來實現這個目標。以下代碼顯示我們如何察覺笑臉是否已被接觸：

 

  
-(void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
  
{  
  
 
  
UITouch *touch = [touches anyObject];  
  
CGPoint location = [touch locationInView:[touch view]];  
  
location = [[CCDirector sharedDirector] convertToGL:location];  
  
 
  
float distance = pow(smiley.position.x – location.x, 2) + pow(smiley.position.y – location.y, 2);  
  
distance = sqrt(distance);  
  
 
  
if(distance <= 50)  
  
{  
  
[smiley runAction:[CCScaleBy actionWithDuration:0.9 scale:2.0]];  
  
 
  
[self performSelector:@selector(removeSmileyFromLayer) withObject:nil afterDelay:1.2];  
  
 
  
}  
  
} 
 

在上述代碼中，我們可以設定笑臉和觸點間的最短距離。如果距離小於50像素，程式確實笑臉已被使用者觸及。隨後我們運行CCScaleBy動作，為笑臉增大，隨後使用傳統removeSmileyFromLayer方法將其從層中移除。

添加CCParticles

現在，當使用者觸及笑臉時，它會增大隨後消失。我們可以使用Cocos2d的Particles架構使之表現得更為出色。Particles架構讓你可以通過數百個CCNode對象動畫做出令人矚目的效果。所有對象協調配合，創造出特殊的效果。

我們將使用ParticleExplode效果，這會在使用者點擊笑臉後創造出爆炸性的效果。以下代碼顯示如何為遊戲添加特殊效果。我們在爆炸中使用相同的笑臉，這意味著一旦笑臉遭到點擊，便會產生出更小的笑臉。

 

  
if(distance <= 50)  
  
{  
  
CCParticleExplosion *explosion = [[CCParticleExplosion alloc] init];  
  
explosion.texture = [[CCTextureCache sharedTextureCache] addImage:@”smiley.png”];  
  
[explosion setDuration:2];  
  
[explosion setAutoRemoveOnFinish:YES];  
  
explosion.position = self.smiley.position;  
  
[self addChild:explosion];  
  
 
  
[self removeChild:self.smiley cleanup:YES];  
  
self.smiley = nil;  
  
} 
 

在上述代碼中，我們已將CCParticleExplosion效果初始化，這是Cocos2d架構中許多可用的CCParticles效果之一。粒子效果間隔時間設定為2秒，粒子物件設定為自動移除。

效果顯示在圖8中。

圖8：CCParticleExplosion effect in action

我已經在本文中為你簡要介紹了Cocos2d架構的使用方法，協助你入門開發iPhone遊戲。如果你想要探索蘋果iOS開發環境，使用Cocos2d構建一款簡單的遊戲可以使你積累一定的開發經驗。

小結：iPhone遊戲開發 使用Cocos2d架構開發教程的內容介紹完了，希望本文對你有所協助！