在 CCScene 中加入單張影像的方法

在 cocos2d 中，一個完整的應用程式是由許多的場景（CCScene）所構成，其每個場景都包含各自的的圖層元件（CCLayer and CCSprite），一個場景可以由一個或是多個圖層元件所組成，而所有的場景是彼此的獨立的（它們可能不知道對方的存在），必須經由 CCDirector 來控制或是調用這些場景。下面示範就從最基本的建立專案開始，一直到為第一場景加入一張靜態影像為止，請看以下說明。

首先從專案樣板內選取 cocos2d 樣板建立新專案，由於此範例只是簡單的加入圖片，並不需要物理學等演算法，所以使用基本的 cocos2d 樣板即可。

在建立好專案之後，會出現一大堆的檔案，但是大部分的檔案都是屬於 cocos2d 的核心，跟這次的範例完全沒有關係，由於 cocos2d 並沒有安裝特殊的函式庫或是第三方的 Framework，所以就算是把整個專案移到沒有安裝 cocos2d SDK 的 Xcode 上，專案照樣可以正常執行，這也就侍衛什麼會出現這麼多檔案的原因了。

回到正題，找到專案名稱資料夾下的檔案 HelloWorldLayer.h 和 HelloWorldLayer.m，這兩個檔案是在使用 cocos2d 樣板建立新專案時自動產生的，也是預設第一個場景所需要的圖層元件，接下來我們將仿造這兩個檔案的內容來設定新的場景。

首先是建立一個全新的 CCLayer，作法是專案上點擊滑鼠右鍵選擇 New File，找到 CCNode class 然後新增一個 CCLayer Subclass（CCScene、CCLayer 和 CCSprite 都是繼承此類別）並命名為 ImageLayer。

緊接著我們要替剛剛建立的 ImageLayer 物件補上建構式和解構式，其程式碼如下。

- (ImageLayer *)init {
    if ((self=[super init])) {

        //取得整個畫面的大小
        CGSize screenSize = [CCDirector sharedDirector].winSize;

        //製作一張影像
        CCSprite *logoSprite = [CCSprite spriteWithFile:@"Landspace.png"];

        //調整影像位置
        logoSprite.position = ccp(screenSize.width / 2,screenSize.height / 2);

        //加入影像
        [self addChild: logoSprite];
    }

    return self;
}

- (void)dealloc {
    [super dealloc];
}

在建構式調整影像位置的部份，其中 ccp() 方法被定義在 CGPointExtension.h 文件中，作用等同於 CGPointMake()。

程式碼到這裡就如建構式所寫已經可以成功將影像加入到 CCLayer 中，但是這樣還不足以將影像呈現於畫面上，還記得一開始引言所提，CCLayer 必須加入到 CCScene 中，並且要由 CCDirector 主動來調用該 CCScene 才行，所以我們還必須為 ImageLayer 加上一個回傳 CCScene 指標的類別方法，好讓 CCDirector 來調用它，其程式瑪如下。

+ (CCScene *)scene {
    CCScene *scene = [CCScene node];
    ImageLayer *layer = [ImageLayer node];

    //將圖層元件加入到場場景中
    [scene addChild: layer];

    return scene;
}

上述程式碼中的 node 是屬於類別方法，它被定義在最上層的 CCNode class 中，目的主要是分配記憶體給產生出來的物件並且在不再被使用（reference）時自動釋放其記憶體位置。

+ (id)node {
    return [[[self alloc] init] autorelease];
}
現在場景 CCScene 也已經準備好了，就等著由 CCDirector 來調用它。回到專案資料夾下，找到 AppDelegate.m 檔案，在方法 applicationDidFinishLaunching: 中可以找到以下程式碼，將 CCDirector 所調用的類別換成 ImageLayer 即可。

- (void) applicationDidFinishLaunching:(UIApplication*)application {

//以上省略
//Run the intro Scene
[[CCDirector sharedDirector] runWithScene: [HelloWorldLayer scene]];
}
[[CCDirector sharedDirector] runWithScene: [ImageLayer scene]];

ps：在本範例中所使用的圖片 Landspace.png 為橫向的 480 x 320 影像，必須事前就移至專案內的 Resources 或是 Supporting Files 資料夾中備用。