Ming Apps

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便成。
   
   ‧
2. 跟著指示改變Project名稱（In my example, named as:MingApps）
   ‧
3. Add New File to the project
   
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(如圖)。
   

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-mingapps.zip

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

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