Ming Apps

Archive for the ‘Cocos2d Tutorial’ Category

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!

Xcode logo

當我在做FYP之時,

第一個遇上的問題就是這個!

為甚麼我畫線(Line Drawing)的時候,

條線一D都唔smooth!

objective-c tutorial: not smooth line demo

找尋良久,

終於讓我發現了一個很有趣的原因。

原來大部份電子產品,

都是利用了fixed sampling rate的設計,

意思即是每隔一千分之一秒(depends on你hardware, 可以係60分之一秒),

才會讀取user的input之類。

所以ipad的設計拿取touch point的數值之後,

點與點(point to point)之間的距離變得這樣大,

看來就不像曲線了。

所以要靠計數的方法!

Calculation 計返中間曲線的點!

Ming Apps Objective-c tutorial demo: line smoothed by spline

原來呢一招係Microsoft小畫家(mspaint)亦都需要用到呢~

招式正統名稱為: Spline Interpolation

比較常見的是Hermite spline or Cubic Hermite spline兩種。

筆者數學能力尚淺,

所以筆者還是找來了一個我在FYP中使用的方式,

主要是從cocos2d forum找來的c program code,

(不是objective-c! 因為我的program code改了還是貼上原文的code吧~)

void genCubicInterpolation(CGPoint *points, unsigned num, unsigned segments, CGPoint *vertices)
{
    int count = 0;
    float dt = 1.f / (float) segments;

    if (num < 2) return;

    // We need two extra points
    CGPoint d0, dN;

    d0 = ccpAdd(points[0], ccpNormalize(ccpSub(points[1], points[0])));
    dN = ccpAdd(points[num-1], ccpNormalize(ccpSub(points[num-1], points[num-2])));

    for (int i=0; i<(num-1); i++) {
        vertices[count] = points[i];
        count++;

        CGPoint y0, y1, y2, y3;

        if (i==0) {
            y0 = d0;
        } else {
            y0 = points[i-1];
        }
        y1 = points[i];
        y2 = points[i+1];
        if (i==(num-2)) {
            y3 = dN;
        } else {
            y3 = points[i+2];
        }

        for (float mu=dt; mu < 1.f; mu += dt) {
            CGPoint a0, a1, a2, a3, p;
            double mu2 = mu * mu;

            // Two variants, the second is smoother

            // First
            a0.x = y3.x - y2.x - y0.x + y1.x;
            a0.y = y3.y - y2.y - y0.y + y1.y;

            a1.x = y0.x - y1.x - a0.x;
            a1.y = y0.y - y1.y - a0.y;

            a2.x = y2.x - y0.x;
            a2.y = y2.y - y0.y;

            a3.x = y1.x;
            a3.y = y1.y;

            // Second, the same as Catmull/Rom
            /*
            a0.x = -0.5f * y0.x + 1.5f * y1.x -  1.5f * y2.x + 0.5f * y3.x;
            a0.y = -0.5f * y0.y + 1.5f * y1.y -  1.5f * y2.y + 0.5f * y3.y;

            a1.x = y0.x - 2.5f * y1.x + 2.f * y2.x - 0.5f * y3.x;
            a1.y = y0.y - 2.5f * y1.y + 2.f * y2.y - 0.5f * y3.y;

            a2.x = -0.5f * y0.x + 0.5f * y2.x;
            a2.y = -0.5f * y0.y + 0.5f * y2.y;

            a3.x = y1.x;
            a3.y = y1.y;
             */

            // The point
            p.x = (a0.x * mu * mu2) + (a1.x * mu2) + (a2.x * mu) + a3.x;
            p.y = (a0.y * mu * mu2) + (a1.y * mu2) + (a2.y * mu) + a3.y;

            vertices[count] = p;
            count++;
        }
    }

    vertices[count] = points[num-1];
}

大家嘗試自己將它變做自己的sourcecode吧!

注:  The vertices array must have a length of ((num-1)*segments)+1!!!

網址:
http://botd.wordpress.com/growing-blogs/?lang=zh-tw

今日一看,

成功拿到了Growing Blogs首位!

Ming apps become top growing blogs in wordpress!

標籤: , ,

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

Cocos2d for iPhone Logo

前日cocos2d已經更新了 RC version!

是次更新多了template的選擇,

Xcode 4 templates both for iOS and Mac. Includes: cocos2d, cocos2d + Box2d and cocos2d + Chipmunk templates

還加入了touchJSON等多個3rd party library,

更新速度不錯,

看來我也要加近進度學習了。

 

下載地址: cocos2d for iphone v1.0.0 rc version

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


%d 位部落客按了讚: