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項目。
點擊“選擇”進入下個場景。輸入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框架開發教程的內容介紹完了,希望本文對你有所幫助!