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 即可。

組合遊戲場景

接下來我們要實際建立一個遊戲場景,步驟如下:
  1. 建立一個背景圖層 (BackgroundLayer -> CCLayer)
  2. 建立一個遊戲圖層 (GameLayer -> CCLayer),在其中加入前面練習的 rocket sprite
  3. 建立一個遊戲場景 (GameScene -> CCScene),並加入以上兩個圖層
  4. 換掉原本啟動的場景(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 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。