Cocos2D 學習筆記 (2) - 圖層(Layer)及場景(Scene)

Cocos2D demo

上一篇中，我們透過 HelloWorld 來體驗 Cocos2D 的第一次執行，接下來將寫幾行程式，試著加入自已的角色 (Sprite)。
註：Sprite 在 wiki 中的解釋為場景中的一組二維影像，中文被翻譯成「精靈」，這邊我把它稱為角色比較好說明。至於到底什麼是 Sprite，直接搜尋圖片「sprite sheet」就可以清楚瞭解了。

如何加入角色

首先在專案中加入一張圖片 (rocket.png)

做法：選擇 Files -> Add Files to "專案名稱"，然後選擇圖片，並把 "Copy items into destination group's folder (if needed)" 選項打勾，最後按下 Add 即可加入圖片到專案中。
接著開啟 HelloWorldLayer.m 把 init 的程式碼換成如下：

- (id)init
{
    if( (self=[super init]) ) {
        CGSize size = [[CCDirector sharedDirector] winSize];
        CCSprite *rocket = [CCSprite spriteWithFile:@"rocket.png"];
        [rocket setPosition:ccp(size.width/2, size.height/2)];
        [self addChild:rocket];
    }
    return self;
}

執行結果如下圖：

說明：每個 Sprite 代表示一個角色，上面的程式碼就是建立了一個火箭的角色，並且把它置於螢幕中央，最後把它加入圖層中。

Cocos2D 的運作概念是由一個 Director 去控制許多場景 (Scene)，每個場景可以有許多的圖層 (Layer) ，每個圖層可以包含許多的角色 (Sprite) 及其他元件等等。Director 並且還負責執行遊戲迴圈及所有的算圖工作，所以它可以控制遊戲的暫停及恢復。Director 一次只能執行一個場景 (Scene)，場景即顯示在 iPhone/iPad 螢幕上的畫面。

Director -> Scene -> Layer -> Sprite

我們也可以在圖層內加入其他元件，例如文字標籤 (Label)，程式碼如下：

CCLabelTTF *lblStart = [CCLabelTTF labelWithString:@"Game Start" fontName:@"Marker Felt" fontSize:50];
lblStart.position = ccp(size.width/2, size.height/2 - 50);
[self addChild:lblStart];

執行結果：

! 重要：在 Cocos2D 中由於是使用 OpenGL 的座標系統，所以座標的原點在螢幕左下角，而非 UIKit 座標系統的左上角，這點要注意一下。

畫面左下角顯示的資訊是遊戲執行的影格數，預設是 60，若不想顯示它，可以在 AppDelegate.m 中找到

// Display FSP and SPF
[director_ setDisplayStats:YES];

將其改為 NO 即可。

組合遊戲場景

接下來我們要實際建立一個遊戲場景，步驟如下：

建立一個背景圖層 (BackgroundLayer -> CCLayer)
建立一個遊戲圖層 (GameLayer -> CCLayer)，在其中加入前面練習的 rocket sprite
建立一個遊戲場景 (GameScene -> CCScene)，並加入以上兩個圖層
換掉原本啟動的場景(HelloWorld)，改為 GameScene

1. 建立背景圖層

先加入一個背景圖片 space.png 到專案中。接著加入一個 Objective-C Class，Class 名稱為 BackgroundLayer，父類別選擇 CCLayer，記得 import "cocos2d.h"，在 .m 檔中加入以下程式碼：

- (id)init
{
    self = [super init];
    if (self != nil) {
        CCSprite *backgroundSprite = [CCSprite spriteWithFile:@"space.png"];
        CGSize size = [[CCDirector sharedDirector] winSize];
        [backgroundSprite setPosition:ccp(size.width/2, size.height/2)];
        [self addChild:backgroundSprite z:0 tag:0];
    }

    return self;
}

在這個圖層中，我們加入了一個背景角色 (Sprite)。

2. 建立遊戲圖層

加入一個 Objective-C Class，Class 名稱為 GameLayer，父類別選擇 CCLayer，記得 import "cocos2d.h"，在 .m 檔中加入以下程式碼：

- (id)init
{
    if( (self=[super init]) ) {
        CGSize size = [[CCDirector sharedDirector] winSize];
        CCSprite *rocket = [CCSprite spriteWithFile:@"rocket.png"];
        [rocket setPosition:ccp(size.width/2, size.height/2)];
        [self addChild:rocket];
    }
    return self;
}

在這個圖層中，加入了一個火箭的角色 (Sprite)。

3. 建立遊戲場景

加入一個 Objective-C Class，Class 名稱為 GameScene，父類別選擇 CCScene，記得 import "cocos2d.h"及前面建立的兩個圖層的 .h，在 .m 檔中加入以下程式碼：

- (id)init
{
    self = [super init];
    if (self != nil) {
        //Background layer
        BackgroundLayer *bgLayer = [BackgroundLayer node];
        [self addChild:bgLayer z:0];


        //Game layer
        GameLayer *gameLayer = [GameLayer node];
        [self addChild:gameLayer z:1];
    }

    return self;
}

現在已經完成了場景的建立，控制圖層的顯示順序，在於 z 值，數值越小越下面（會被蓋住），數值越大越上面，所以背景圖層的 z 值為 0，遊戲圖層的 z 值為 1（或任何大於背景圖層的值）。

4. 換掉啟動場景

接下來要把原本顯示的 HelloWorldLayer 換成我們建立的 GameScene。在 AppDelegate.m 中搜尋 "director runWithScene"，找到後把該行註解掉，換成

[director runWithScene:[GameScene node]];

Director 現在換成執行 GameScene 了。

[GameScene node] 等同於 [[GameScene alloc] init]，你可以直接按住 Command 鍵再用滑鼠去點 node，就可以看到原始碼中在做什麼。

執行結果：

本文網址：http://blog.tonycube.com/2013/10/cocos2d-2-layerscene.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀