Ming Apps

Posts Tagged ‘cocos2d-iphone

Cocos2d for iPhone Logo

今天來一個cocos2d教學吧~

我想我忘了一些基本概念讓大家理解cocos2d吧!

相關: 官網 Tutorial: basic concepts

Director

導演Director, 每個Apps只有一個Director.

在OO內說,它是以Singleton的方式Share資訊,

用以呼叫那一個場景(CCScenes)出現與轉移的效果。

Scenes

場景Scenes, 每一個Apps都可以創建一個或多個Scenes.

即使一個Apps可以有多個Scenes, Director只會讓一個Scenes出現在遊戲中。

簡單來說,假設你的Apps有很多Scenes: Menu , GameStage Level1, Level2, Level3, High Score,

每次都只需要出現一個Scenes便可。

Cocos2d裏的Scenes非常合符Game Design的邏輯吧!

CCScene的SubClass – CCTrasitionScene,

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

每個Scenes可以包含一個或多個Layer組成.

Layers

Layers之前已經介紹過了,有CCLayer, 還有CCLayerColor(old name: CCColorLayer)改變背景顏色

如你有使用Photoshop和Flash的經驗,不難想像每個Layer就是你的畫紙,

在上面任意畫上不同圖案,

Layers上可以任意添加Menus(CCMenu), Sprites(CCSprites), Labels(CCLabelTTF, old name: CCLabel/Label).

每個Layers都可以包含一個或多個Sprites!

Sprites

Sprites英文是精靈,很多人物死物角色,都需要當成CCSprite Object來處理。

角色的Movement, 獨立人物死物的Animation等都是以Sprite當成核心進行。

大家可以到官網: Actions, 有很多Default旳Animation處理Sprites的移動和消失。

總括來說: Director –> Scenes –> (1 or more )Layers –> (1 or more) Sprites!

Link: Spritehelper

Top features:

  • 自動在的你已經載入的圖片中, 尋找同選擇你的CCSprite Objects / Sprite
  • 將多幅圖片載入同一幅的圖片,同時最佳壓縮化
  • 將你的CCSprite圖片save as PNG
  • Support大部份image format
  • 幫你的sprites create不同的形狀
  • Drag and drop改變Sprite的形狀
  • 放大縮小不同的sprites
  • 加入Sprite的時候可generate codes給你
  • Search functions
  • 跟據Sprite info做sorting

cocos2d本身已經係一個相當好用的library,

外國的Programmer亦都寫左唔少Helper tools幫大家develop cocos2d apps!

SpriteHelper其中一個有趣的地方在於,

佢會有另一個GUI既editor,

有齊Box2d同Chipmunk Physics Engines.

個人感覺,

使用上頗似在CSS Sprite將好多細圖縮做一張!

如果你寫的code大部份都係Game,

不是純粹Display的話,

cocos2d幫到你,呢個SpriteHelper亦幫到你!

Cocos2d for iPhone Logo

Ming Apps再黎一個Cocos2d Tutorial!

今次教大家砌Menu,

應用一下CCMenu和CCMenuItem呢一個Class吧!

註: 本人會以Xcode 4作示範,和xcode3可能會不相同。

我會源用之前的cocos2d教學 -layer transition with touch event 的方式,

一開始便會用兩張cclayer,

然後就是利用menu 方式 call scene transition,

不再是利用double tap / double touch的方式罷了。

好! 請大家下載先前教學source code, 開始!

Step 1: 加入CCMenuItem以及 CCMenu:

在HelloWorldLayer.m當中, 將function init入面的source code改成:


if( (self=[super init])) {
CCMenuItem *menuItem1 = [CCMenuItemFont itemFromString:@"Play Ming Apps" target:self selector:@selector(onClickPlay:)];
CCMenuItem *menuItem2 = [CCMenuItemFont itemFromString:@"Testing" target:self selector:@selector(onClickTesting:)];
CCMenuItem *menuItem3 = [CCMenuItemFont itemFromString:@"About" target:self selector:@selector(onClickAbout:)];
CCMenu *menu = [CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];
[menu setColor:ccc3(255, 255, 255)];
[menu alignItemsVerticallyWithPadding:10.0];
[self addChild:menu];
	}
	return self;

大家可以看到CCMenuitem 可以利用文字作為Menu選單的選項,

並加上selector:@selector(onClickPlay:)的attribute,

將select event function加入每個CCMenuItem中。

[CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];

共會將menuItem1,2,3加入CCMenu* menu中,

然後利用alignItemsVerticallyWithPadding直向排列你的Menu,

alignItemsHorizontallyWithPadding就是橫向排列!

然後就是addChild在介面中加入menu。

Step 2: add menu click event functions

在HelloWorldLayer.m中,function dealloc前的空位,加入:


- (void)onClickPlay:(id)sender{
NSLog(@"on play ming apps");
[[CCDirector sharedDirector] replaceScene:[CCTransitionPageTurn transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
}

- (void)onClickTesting:(id)sender{
NSLog(@"on click testing");
[[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
}

- (void)onClickAbout:(id)sender{
NSLog(@"on click about");
[[CCDirector sharedDirector] replaceScene:[CCTransitionSplitRows transitionWithDuration:0.4 scene:[MingAppsLayer node]]];
}

大家可以看到每個selector event都以進行CCTransition的不同方式,

來進行scene transition.

Step 3: 完成!

大家可以到以下網址下載示範程式: cocos2dmenu-ming-apps-source-code.zip!

Ming Apps CCMenu Cocos2d Tutorial Screen shot

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 查看結果!

Cocos2d for iPhone Logo cocos2d-iphone 第一步: installation!

起步第一件事就係要有Mac 10.6 and install Xcode!

相信大家都知道 Xcode 就是寫iPhone Apps / iPad Apss最基本的程式了。

如果你並未擁有iOS Developer Program Member / Mac Developer Program Member的話,

只可下載 Xcode 3.2.6 and iOS SDK 4.3, 但必需登記成為iOS developer 才可下載。


注意: Xcode 4和Xcode 3 安裝方法有所不同!

由於我已成為了iOS Developer Program Member($99USD!),

現示範如何「安裝」cocos2D for iphone for Xcode 4.

大家首先要下載cocos2d-1.0.0-beta-templates,

然後到: ~/Library/Developer/Xcode/Templates Folder,

(注意: 你可能需要在以上Directories入面開New Folder, 請依足名稱大小寫。)

extract以上.tar.gz 的Achieve files,

搞點!

Xcode new project cocos2d-iphone project

Xcode 4 create new project下已經可以見到以下的選擇了!

你現在已經可以開始寫你的Cocos2d Apps了!

哈哈這個installation看來並不似installation吧哈哈~

Xcode 3又如何呢?

你需要下載另一個cocos2d-iphone的version: cocos2d-iphone-0.99.5

下載完,按步驟立即使用便成!

Cocos2d for iPhone Logo

原本網頁: http://www.cocos2d-iphone.org/

一個月前,FYP的topic由html5 web apps轉做iPad apps,

真的徬徨無助哈~

 

找了很多很多objective-c framework,

朋友介紹了這一個framework.

Fast, Free, Easy to Use, Community supported.

Google一下你的問題再加"cocos2d“做keywords,

好多問題都解決了~

有唔少Class會經常用到:

CCLayer / CCLayerColor(舊有的ClassName為CCColorLayer): Layer that receive touches and 設定初始背景顏色!

CCLayerColor *layer = [[CCLayerColor alloc] init];
[layer setColor: ccc4(255, 255, 255, 255)];

CCMenu / CCMenuItem: Default了一堆方便你堆砌Menu既Class!

[CCMenuItemFont setFontName:@"Helvetica"];

CCMenuItem *menuItem1 = [CCMenuItemFont itemFromString:@"HelloWorld" target:self selector:@selector(scene1:)];
CCMenuItem *menuItem2 = [CCMenuItemFont itemFromString:@"Test"];
CCMenu *menu = [CCMenu menuWithItems:menuItem1, menuItem2,nil];

[menu alignItemsVertically];
[menu setPosition:ccp(240, 160)];
[self addChild:menu];

CCLabelTTF(舊有的ClassName為CCLabel/Label):  故名思義, 就是LabelText, 純粹Display String/ Display Text

CCLabelTTF *test = [CCLabelTTF labelWithString:@"Testing" fontName:@"Marker Felt" fontSize:16];
 [self addChild:test];

CCSprite: Google了Sprite的解釋,是指小精靈/小妖精。如果你寫Game, 我會當佢做一個人物角色,可以任意係畫面複製角色於Layer / RenderTexture 上。

CCDirector: 導演一名,可設定Frame per second既時間,加速減速自己決定。

[[CCDirector sharedDirector] setAnimationInterval:1/240.0];

 

暫時已經support Xcode 3 & Xcode 4,

雖然仍在develop階段,

但好期待佢去version 1.0既正式版!

之後的Blog應該會有更多cocos2d的介紹!


%d 位部落客按了讚: