iPhone游戲開發(fā) 使用Cocos2d框架開發(fā)教程
iPhone游戲開發(fā) 使用Cocos2d框架開發(fā)教程是本文要介紹的內(nèi)容，移動設(shè)備正改變我們工作和與他人互動的關(guān)系。新一輪革命正在我們身上發(fā)生，人們開始通過移動設(shè)備消費更多的數(shù)據(jù)內(nèi)容。iPhone應(yīng)用商店成為手機應(yīng)用成功和流行的縮影，其中游戲是最熱門的類別。在本篇文章中，我將展示如何用Cocos2d框架來制作iPhone游戲。
iphone游戲
Cocos2d框架
Cocos2d是用于構(gòu)建iPhone游戲的開源框架，是基于iPhone核心SDK之上架構(gòu)而成，提供可加速iPhone游戲開發(fā)的易用API。
下載和安裝Cocos2d框架和模板
要使用Cocos2d框架的強大功能，***步是下載和安裝與框架相關(guān)的框架和模板。（游戲邦注：原文提供了框架和模板的下載地址。）
了解框架的基礎(chǔ)
在開始制作***iPhone游戲前，建議先熟悉下Cocos2d框架的基礎(chǔ)，包括以下四項內(nèi)容：
場景。場景這個節(jié)點很特殊，它是所有節(jié)點的基礎(chǔ)。場景的目的在于呈現(xiàn)出游戲的可操作部分和展現(xiàn)游戲場景（游戲邦注：如游戲結(jié)束、主頁面和高分排行榜等）。
層次。層次呈現(xiàn)出的是玩游戲的具體區(qū)域。Cocos2d中的層次與Photoshop的層次作用類似。這意味著某個場景可以由多個層次構(gòu)成。一個層次承載背景畫面，另一個層次便是游戲動作發(fā)生之初。
界面。界面指得是那些賦予游戲靈魂的事物。比如，如果你制作太空游戲，你的飛船和敵人就是界面。用于深化用戶游戲體驗的每個角色都可以當(dāng)成是界面。
制作***Cocos2d項目
打開Xcode，創(chuàng)建新項目。如圖1所示，從項目模板菜單中選擇Cocos2d項目。
圖1：Cocos2d template for Xcode
點擊“選擇”進入下個場景。輸入MyFirstCocos2dProject作為項目名稱，然后點擊“保存”。隨后，系統(tǒng)便會通過默認(rèn)模板來創(chuàng)建Cocos2d項目。這篇文章中所述的是Cocos2d框架的0.99版本，默認(rèn)搜索的是SDK 4.0。如果你安裝過***版的SDK，你會收到如圖2中所示的“基礎(chǔ)SDK丟失”信息。
圖2：Cocos2d project template base SDK missing
你所要做的是告訴Cocos2d框架我們正在使用的是更新版本的SDK。要達成此目標(biāo)，點擊“項目”標(biāo)簽下的“編輯項目設(shè)置”，然后如圖3所示指定SDK版本。
圖3：Selecting the installed SDK for iOS device
正如你從以上截屏中看到的那樣，iOS SDK 4.0丟失，但我們可以選擇iOS SDK 4.1。選擇正確的SDK后，使用“指令B”構(gòu)建整個項目。項目中不能有錯誤。實現(xiàn)上述目標(biāo)后，你可以用“指令R”來運行應(yīng)用。圖4顯示應(yīng)用正在運行中iPhone模擬器的樣式。
圖4：The default Cocos2d project template output
Cocos2d模板有基礎(chǔ)執(zhí)行程序，使得屏幕上顯示出“Hello World”的語句。每秒幀數(shù)(FPS)測量值顯示在屏幕左下方（游戲邦注：圖4中是60.0）。默認(rèn)模板是為了驗證開發(fā)者已正確安裝框架以及與框架相關(guān)的所有組件。下個部分我們將繼續(xù)深入挖掘Cocos2d框架。
開始使用Cocos2d框架
默認(rèn)Cocos2d模板設(shè)定為橫向模式顯示，MyFirstCocos2dProjectAppDelegate.m文件中使用以下代碼就可以輕易做出改變：
- [director setDeviceOrientation:kCCDeviceOrientationPortrait];
現(xiàn)在，如果你運行應(yīng)用就會發(fā)現(xiàn)，顯示是縱向而不是橫向。接下來，我們要改變游戲的背景。我們已經(jīng)在項目的“資源”文件夾中加入文件Background3.png。資源文件夾存放所有應(yīng)用中使用的資源（游戲邦注：如圖片、聲音文件等）。以下面的代碼將背景圖片設(shè)置在靜態(tài)模式場景中：
- +(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方法，輸入文件名作為參數(shù)。使用addChild方式將背景界面加入到層次中，得到圖5中顯示的效果。
圖5：Background sprite not positioned correctly
不幸的是，背景界面的位置不正確。我們需要為界面設(shè)置錨點，如圖6所示。
圖6：Background sprite positioned correctly
背景圖片適合尺寸為320 x 480的屏幕。如果你計劃讓設(shè)備的轉(zhuǎn)動發(fā)揮作用，那么你需要有張適合480 x 320橫向模式的背景圖片。在下一節(jié)中，我們將為應(yīng)用添加界面。
添加界面
添加背景只是應(yīng)用設(shè)計的開始，我們需要為游戲添加可操作的界面。我們將使用一張笑臉圖片作為我們的活動界面。使用下列代碼可為應(yīng)用添加界面：
- // 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;
- }
使用最初的方法，我們創(chuàng)建CCSprite實例呈現(xiàn)笑臉角色。首先將笑臉放置在適當(dāng)位置（100，100），隨后添加到層中。如果你運行應(yīng)用，你會發(fā)現(xiàn)笑臉看不見。原因在于笑臉位于背景層之后。為看到笑臉，我們將背景界面的Z軸值調(diào)為-1，將背景界面放置在笑臉界面之后，代碼如下：[layer addChild:background z:-1];
圖7顯示調(diào)整后的結(jié)果。
圖7：Smiley face sprite added to the game scene
在上述例子中，我們將笑臉放置在屏幕上時使用的是硬代碼值。以下使用硬代碼值在屏幕上放置元素是因為應(yīng)用將以iPhone協(xié)調(diào)系統(tǒng)為基礎(chǔ)。
如果你在iPad上運行應(yīng)用，你會發(fā)現(xiàn)背景和界面的位置都有錯誤。為了讓應(yīng)用在iPhone和iPad設(shè)備上的顯示效果相同，我們必須使用CGSize類別來深化當(dāng)前設(shè)備的寬度值和高度值。以下代碼顯示如何使用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來恢復(fù)winSize實例。winSize是指當(dāng)前運行的iOS設(shè)備的尺寸。這確保應(yīng)用正確地在設(shè)備上運行。
現(xiàn)在，我們的笑臉還沒有任何移動。在下節(jié)中，我們將介紹讓笑臉在屏幕中移動的方法。
動作和順序
Cocos2d使用動作為CCNode對象中的界面或其他對象添加效果。Cocos2d框架有許多內(nèi)置動作，這些動作包括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方法來在笑臉界面上執(zhí)行CCMoveTo動作。CCMoveTo動作方法使用actionWithDuration和位置參數(shù)。actionWithDuration是完成動作所需要的時間。位置參數(shù)指的是界面的移動地點。如果你運行應(yīng)用，你會發(fā)現(xiàn)笑臉從原位置移動到新位置上。
在你需要界面執(zhí)行諸多動作的同時，便產(chǎn)生了情節(jié)。對于這些情節(jié)，你可以使用CCSpawn類型，確保這些動作同時為界面所執(zhí)行。以下代碼便是CCSpawn在動作中的應(yīng)用：
- 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!”);
- }
在這個代碼中，你可以創(chuàng)建兩個獨立的動作，CCMoveTo和CCFadeOut。這兩個動作都會以參數(shù)的形式遞交給CCSpawn方法，使得笑臉CCSprite能夠同時移動和淡出屏幕。
當(dāng)使用CCActions時，找到動畫的完結(jié)點很有用。在這段情節(jié)中，我們可以使用CCSequence類別。CCSequence讓開發(fā)者可以陸續(xù)進行不同動作，然后最終會有回收功能顯示動畫已完成。以下代碼便是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類別創(chuàng)建出回收功能。一旦CCMoveTo和CCFadeOut兩個動作均完成之后，回收功能就會被觸發(fā)。以排除漏洞模式運行應(yīng)用，你會發(fā)現(xiàn)在動畫完成后，顯示完成的日志信息動畫會顯示在屏幕上。
我們可以使用回收功能來不斷重復(fù)動畫，將界面移動到屏幕上的任意位置。這可以通過finishedAnimation功能實現(xiàn)，以下便是代碼：
- -(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]];
- }
注意：上述代碼可輕易獨立成某個類別的方法，這會減少出現(xiàn)復(fù)制粘貼之類的錯誤。但為了讓此文更為簡潔，我已經(jīng)復(fù)制了代碼。
arc4random功能可用于隨機生成從0到n-1的數(shù)字。我們根據(jù)iPhone屏幕尺寸（游戲邦注：即320 x 480像素）來限定這個隨機數(shù)字。獲得的坐標(biāo)隨后將傳輸至CCMoveTo功能的位置參數(shù)。finishedAnimation也可以用作回收方法，使得動畫在結(jié)束后不斷重復(fù)。運行應(yīng)用，你會發(fā)現(xiàn)笑臉不斷從某個隨機位置移動到另一個隨機位置。
觸屏的使用
我們的笑臉在屏幕上自由移動，目前沒有方法讓它停下來。在本節(jié)中，我們將讓用戶可以通過接觸事件來控制笑臉。處理接觸事件的方法很多，為使設(shè)計簡單我們使用CCTouchesBegin事件，這個事件在用戶接觸屏幕時觸發(fā)。在使用CCTouchesBegin事件之前，使用原始方法確保isTouchEnabled特性設(shè)定為“是”：
- -(void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- {
- UITouch *touch = [touches anyObject];
- CGPoint location = [touch locationInView:[touch view]];
- location = [[CCDirector sharedDirector] convertToGL:location];
- }
以上使用的ccTouchesBegan方法可獲得用戶接觸屏幕的坐標(biāo)。在ccTouchesBegan事件中，我們需要得知用戶是否接觸笑臉。我們通過使用好用的老式畢達哥拉斯原理來實現(xiàn)這個目標(biāo)。以下代碼顯示我們?nèi)绾尾煊X笑臉是否已被接觸：
- -(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];
- }
- }
在上述代碼中，我們可以設(shè)置笑臉和觸點間的最短距離。如果距離小于50像素，程序確實笑臉已被用戶觸及。隨后我們運行CCScaleBy動作，為笑臉增大，隨后使用傳統(tǒng)removeSmileyFromLayer方法將其從層中移除。
添加CCParticles
現(xiàn)在，當(dāng)用戶觸及笑臉時，它會增大隨后消失。我們可以使用Cocos2d的Particles框架使之表現(xiàn)得更為出色。Particles框架讓你可以通過數(shù)百個CCNode對象動畫做出令人矚目的效果。所有對象協(xié)調(diào)配合，創(chuàng)造出特殊的效果。
我們將使用ParticleExplode效果，這會在用戶點擊笑臉后創(chuàng)造出爆炸性的效果。以下代碼顯示如何為游戲添加特殊效果。我們在爆炸中使用相同的笑臉，這意味著一旦笑臉遭到點擊，便會產(chǎn)生出更小的笑臉。
- 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效果之一。粒子效果間隔時間設(shè)定為2秒，粒子對象設(shè)定為自動移除。
效果顯示在圖8中。
圖8：CCParticleExplosion effect in action
我已經(jīng)在本文中為你簡要介紹了Cocos2d框架的使用方法，幫助你入門開發(fā)iPhone游戲。如果你想要探索蘋果iOS開發(fā)環(huán)境，使用Cocos2d構(gòu)建一款簡單的游戲可以使你積累一定的開發(fā)經(jīng)驗。
小結(jié)：iPhone游戲開發(fā) 使用Cocos2d框架開發(fā)教程的內(nèi)容介紹完了，希望本文對你有所幫助！
