Ming Apps

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!