Ming Apps

Cocos2d tutorial: CCMenu – menu選單

Posted on: 2011/04/02

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

1 Response to "Cocos2d tutorial: CCMenu – menu選單"

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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: