首页>>iPhone >>开发
Cocos2d Tutorial: Layer Transition And Touch Event 翻页效果
楼:1
九品仙
2011-8-25 18:35:20
Cocos2d Tutorial: Layer Transition And Touch Event 翻页效果

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中加入
    1 import "cocos2d.h"

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

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

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

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

  2. 在HelloWorldLayer.m的function: init中,
    將以下source code:
    1  self = [super init]

    改成為:

    1 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:
    1 [self addChild: label];

    之前,加上:

    1 [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:
    1 #import "MingAppsLayer.h"

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

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

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

    以上設定為:
    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