Hello! Cocos2d!

終於要開始寫程式了。在開始之前，請先確認下列的軟體已安裝完成，才能跟著文章一步步前進喔。

1.安裝Xcode：

在一般情況下，剛買來（或剛灌好）的mac電腦裡是不含Xcode的。請拿出您的系統安裝光碟，開啟之後找到option install的資料夾，裡面就含有Xcode的安裝程式，只要點兩下照著做就可以了。安裝好後，Xcode會被放在「硬碟 -> Developer -> Applications」的資料夾。

2.安裝iPhone SDK：

有了Xcode後，接下來請到iPhone Dev Center註冊並下載iPhone SDK。註冊是免費的，在網頁右上方有個Register點進去照著指示填寫資料就行了。過程中會詢問您是否已有Apple ID（就是逛AppStore用的那個），如果您已經有Apple ID了，而且您常用這個ID在AppStore上買東西，那麼請不要使用這個ID做為iPhone Dev Center的帳號。註冊指示下方也有提醒，因為系統帳號管理有些bug，如果一個Apple ID同時用來購買AppStore上的東西，又作為iPhone Dev Center的帳號，會造成一些無法預期的問題。這個，很多先賢先烈已經發生過了，請不要鐵齒，乖乖的再申請一個帳號吧！另外，過程中遇到要填資料的部份，請以英文填寫，不然到時發生什麼奇怪的事，真的會欲哭無淚。

註冊完成後，就可以下載iPhone SDK了。在iPhone Dev Center首頁下方就可以下載iPhone SDK相關檔案。目前最新的SDK版本為3.1.2，另外10.5和10.6所要下載的SDK版本也不一樣，請留意。這個SDK，老實說檔案還真給他有點大，1~2G應該是跑不掉，下載完成後點兩下照著指示就可以安裝完成。

3.安裝cocos2d：

最後一個步驟是要安裝cocos2d這個函式庫。目前最新的穩定版為0.8.2，可以到這裡下載。下載完解壓縮後，開啟終端機，切換到cocos2d-iphone-0.8.2的目錄下輸入：

./install_template.sh

這樣cocos2d就安裝完成了（剛剛下載的檔案可以丟掉沒關係），接下來要開始寫程式了！

首先打開Xcode，並在上方選單列中選擇「File -> New Project」。

接下來會出現一個選擇模版的視窗，您可以看到這個模版分為兩大類，上面iPhone OS是專門給iPhone程式開發用的模版，下方MAC OS X的分類則是開發MAC OS軟體所使用的模版。在這次的範例中，我們要選擇的是iPhone OS分類下的「cocos2d-0.8.2-application」這個模版。（如果沒有看到，代表剛剛cocos2d安裝上可能出了問題，趕快檢查一下吧）

緊接著，為這個專案取個名字，本次範例以"HelloCocos2d"作為專案名稱。最後找個適當的地方儲存這個專案，儲存好後便會看到Xcode攢寫程式的主要視窗。

基本上，到目前這個階段程式就可以執行了。先到視窗左上方的下拉選單，在Active SDK的下方選擇「iPhone Simulator 3.1.2」，再點選視窗上方「Build and Run」的綠色按鍵執行這個程式…

如果您的設定沒有問題，會先看到一個大大的iPhone模擬器跑出來，接著螢幕會出現程式的啟動畫面（預設是黃色的cocos2d主題），最後iPhone模擬器旋轉90度，並出現「Hello World」的字樣。

然後呢？這樣就寫完了嗎？

當然還沒呀！文章標題是「Hello! Cocos2d!」，我們得把iPhone模擬器上顯示的字改成和標題一樣才行。

基本上要改字是件很簡單的事，但因為從0.8.1之後，cocos2d這個預設模版的範例對初學者來說可能不是那麼容易看懂，所以在這裡我們要對這個程式動些小手術，方便講解與學習。

結束剛剛啟動的iPhone模擬器（cmd+Q）回到Xcode的主視窗。在左邊的欄位找到Classes這個資料夾，點選裡面HelloWorldScene.h這個檔案，這時視窗右下方的編輯視窗便會出現這個檔案的內容，把#import “cocos2d.h"下方的文字全部刪除，並改成下列程式碼：

@interface HelloWorldScene : Scene {

}

@end

@interface HelloWorldLayer : Layer {

}

@end

如果您對之前Objective-C的介紹還有印象的話，@interface通常會放在.h檔裡，用來宣告物件類別所包含的變數與函式方法。上述程式碼中，我們宣告了兩個類別別：HelloWorldScene和HelloWorldLayer。

接下來我們要在.m檔中把上述兩個類別的內容完成。

到左邊欄位中Classes資料夾下選擇HelloWorldScene.m這個檔案，把import “HelloWorldScene.h"之後的程式碼刪除，並加入下列程式：

@implementation HelloWorldScene

-(id) init {

self = [super init];

if(self) {

HelloWorldLayer *layer = [HelloWorldLayer node];

[self addChild:layer];

}

return self;

}

- (void) dealloc{

[super dealloc];

}

@end

@implementation HelloWorldLayer

- (id)init {

self = [super init];

if (self) {

Label *helloLabel = [Label labelWithString:@"Hello! Cocos2d!" fontName:@"Marker felt" fontSize:60];

[helloLabel setPosition:ccp(240, 160)];

[self addChild:helloLabel];

}

return self;

}

- (void)dealloc {

[super dealloc];

}

@end

OK了嗎？現在剩下最後一個步驟，到左邊欄位Classes資料夾下找到HelloCocos2dAppDelegate.m這個檔案，找到第54行

[[Director sharedDirector] runWithScene: [HelloWorld Scene]];

這行程式碼，將其修改為

[[Director sharedDirector] runWithScene: [HelloWorldScene node]];

大功告成，現在按下視窗上方「Build and Run」的按鈕…「Hello! Cocos2d!」

我們的第一個iPhone程式就暫時寫到這邊，下篇文章我們將進一步了解整個程式的流程架構，以及「Hello! Cocos2d!」到底做了哪些事情。

About these ads