Ming Apps

Cocos2d Tutorial: Layer Transition And Touch Event

Posted on: 2011/03/31

MingApps又出教學post啦!

今晚本想打FYP report,

但總想打一篇教學Blog教一教大家使用cocos2d for iphone!

因為全靠佢我寫iPad Apps先會寫得咁快哈~

我想第一件事要學習的是Layer的轉換吧~

以下教學亦包含了CCLabelTTF的顏色設定,

增加Double Tap/Double Touch Event,

以及增加新場景和CCLayer背景顏色(Background Color)的方法。

首先介紹一下CCLayer / CCLayerColor:

CCLayer 我會將他當成一張預設只有黑色背景的一張紙,

沒有任何背景圖片和背景顏色的設定,

你可以在紙上任意塗鴉。

CCLayerColor 可以說是繼承了CCLayer的原本設定,

但加上可以自定義背景顏色的funciton讓你改變「紙」的顏色.

好! 開始第一部!

(注意以下方式會以Xcode 4作示範,和Xcode 3可能略有不同!)

Step 1: 開啟新Project及新增Layer

  1. 首先建立一個新的cocos2d iphone project!
    選擇cocos2d project便成。
    Xcode new project cocos2d-iphone project
  2. 跟著指示改變Project名稱(In my example, named as:MingApps)
  3. Add New File to the project
    cocos2d project right click to add new file
  4. Select iOS Cocoa Touch Objective-C Classes, named as MingAppsLayer
    subClass as CCLayer
  5. 在MingAppsLayer.h中加入
    import "cocos2d.h"
    

  6. 複製 HelloWorldLayer.h 的內容到 MingAppsLayer.h
    HelloWorldLayer.m 的內容到 MingAppsLayer.m但注意在MingAppsLayer.h 中不要改掉MingAppsLayer的Object Name,
    以及在MingAppsLayer.m 中加入
    #import "MingAppsLayer.h"
    @implementation MingAppsLayer
    

    以及在scene function中的HelloWorldLayer改為MingAppsLayer(如圖)。
    cocos2d iphone - mingapps layer source code

Step 2: 改變CCLayer(HelloWorldLayer)的顏色 及CCLabelTTF 文字顏色

  1. 在HelloWorldLayer.h中,繼承的CCLayer改為CCLayerColor
    @interface HelloWorldLayer : CCLayerColor
    

  2. 在HelloWorldLayer.m的function: init中,
    將以下source code:

     self = [super init] 

    改成為:

     self=[super initWithColor:ccc4(255, 255, 255, 255)] 

    function ccc4(r,g,b,o) :
    ccc4為Cocos2d中一個重要function, 以RGB color model為基礎,
    共有四個parameter:
    r: red, g: green, b: blue, o: opacity(透明度)
    4個數值均以 0 – 255之間的數值。

    因此上文以設定為不透明(o: 255)的白色背景(r: 255, g: 255, b:255)

  3. 在以下的source code:
    [self addChild: label];

    之前,加上:

    [label setColor:ccc3(0, 0, 0)];

    label的color setting需要 ccc3的function,
    它亦是RGB model, 因此上文r:0 g:0 b:0設定了Label的文字為黑色。

Step 3: HelloWorldLayer增加Touch Event / Tap Event

  1. 在HelloWorldLayer加入header – MingAppsLayer:
    #import "MingAppsLayer.h"

  2. 在HelloWorldLayer的function – init中,加入:
    self.isTouchEnabled = YES;

    這是必須加入,是Cocos2d for iphone framework的原有設定, 容許Layer擁有Touch Event的設定 / 功能。

  3. 在HelloWorldLayer的function dealloc前,加入以下function:
    - (void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
        UITouch*	touch = [touches anyObject];
         if ([touch tapCount]==2) {
              [[CCDirector sharedDirector] replaceScene:[CCTransitionPageTurn transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
         return;
         }
    }
    

    以上設定為:
    ccTouchesBegan: cocos2d default functions, 是CCLayer處理Touch event的function,
    UITouch and [touch tapCount]: 用以拿取touch的次數, doubleTap / doubleTouch的話,[touch tapCount]會return 2

    [CCDirector sharedDirector] replaceScene:[CCTransitionPageTurn transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
    呼叫CCDirector改變現時場景為另一CCLayer: MingAppsLayer!


    CCTransitionPageTurn 是右下角揭頁效果
    可以改成其他的轉頁效果,
    例如 CCTransitionFlipAngular, CCTransitionFade, CCTransitionJumpZoom,
    大家可以自由選擇。

完成!

cocos2d iphone layer transition test
cocos2d iphone layer transition test

示範程式下載: cocos2d-iphone-layer-mingapps.zip

Thanks to DropBox, 有免費2GB空間俾我share source code!

大家可以按下左上角的RUN BUTTON Build project以及在simulator 查看結果!

1 Response to "Cocos2d Tutorial: Layer Transition And Touch Event"

[…] 正是用來控制CCScene與其他Scene的轉移效果, […]

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: