(译)cocos2d菜单教程:第一部分

原文链接地址:http://www.iphonegametutorials.com/2010/09/07/cocos2d-menu-tutorial/

 

  今天,我将带大家一起征服cocos2d的菜单。你不可能会做一个游戏而缺少菜单功能吧?cocos2d使得制作菜单变得非常简单。但是,在我们开始之前,需要确保构建一个系统,它非常容易扩展,以后制作任何游戏都可以用到,它就是我们即将创建的“场景管理器”(Scene Manager)。

  这里有本教程的完整源代码

  你可以去cocos2d官网上下载最新版本:http://www.cocos2d-iphone.org/download。目前最新版本是1.0,这是个稳定版本,之后会更新1.x版本,这个版本会支持苹果的2代,3代,4代。。。直至n代产品,意思是api向后兼容。而Riq大神正准备开发cocos2d 2.0版本,这个版本不向后兼容,而且只有3gs及其以后版本才支持。因为新版本使用opengles 2.0,可以直接使用shader操作GPU,以后性能和效果都会更酷些。如果大家想学习opengles的话,可以从2.0开始学起。

  下载完最新版本后,解压,然后运行下面的脚本就可以安装xcode模块了:

$ sudo ./install_template.sh

  安装好之后,重启Xcode,然后选择 File->New Project->cocos2d Application(注意:下图还是0.99.4,因为这个教程写的时候比较早,我也不改了,大家明白就好)

 

  试着编译到模拟器上去----你可以选择Build->Build and Debug-Breakpoints on。如果你编译出了问题,那么请确保你选择的是模拟器,其次,你选择了正确的sdk。我现在选择的是3.1.3,因为我使用的是2代的ipod touch。苹果只会更新3.2以后的所有版本,但是,我仍然希望我的程序可以向后兼容一些老的操作系统。

  一旦编译到模拟器上之后,你将看到下面的屏幕:

 

  注意:如果条件允许的话,你应该把你的程序在老设备和新设备上都测试一下。我以前做游戏的时候,会在游戏的加载画面里面显示一些“提示”,这些信息可以帮助玩家更好地了解游戏的玩法。同时,这样也可以使得加载画面看起来更快,因为玩家注意力被分散了,所以感觉上“慢”了。然后,那种在1代的设备上要花费10秒来加载的画面,在iphone4上面可能一眨眼就没了。为了解决这个问题,我会在加载完成之后,显示一个“Continue”按钮,这样玩家就有时间读“提示信息”了,同时也不会感觉很奇怪。只是一个小技巧而已:)

  我们将在一个背景层上面创建一个简单的菜单。在我们继续这个教程之前,我需要带领大家从头开始制作,这样的话能帮助大家更好地理解。首先最重要的事情,我们并不需要自动生成的HelloWorldScene.h和HelloWorldScene.m文件,所以让我们删了它们吧!

 

 

  现在,我们将创建一个简单的场景管理器----我们这样做的目的是,今后可以对层与层之间的切换有更多的控制权。直接在“Classes”分组上面点击右键,选择“Add”,然后是“New File”。

 

 

  我们将添加一个新的“New Objective-C”文件,并命名为“SceneManager”,你需要确保“Also create SceneManager.h”复选框被选中。

 

  那么,这个文件里的代码看起来是什么样子呢?  

#import "cocos2d.h"
#import
"MenuLayer.h"

@interface SceneManager : NSObject {
}

+(void) goMenu;

@end

 

  然后,往.m文件里添加下列内容:

#import "SceneManager.h"

@interface SceneManager ()
+(void) go: (CCLayer *) layer;
+(CCScene *) wrap: (CCLayer *) layer;
@end

@implementation SceneManager

+(void) goMenu{
CCLayer
*layer = [MenuLayer node];
[SceneManager go: layer];
}

+(void) go: (CCLayer *) layer{
CCDirector
*director = [CCDirector sharedDirector];
CCScene
*newScene = [SceneManager wrap:layer];
if ([director runningScene]) {
[director replaceScene: newScene];
}
else {
[director runWithScene:newScene];
}
}

+(CCScene *) wrap: (CCLayer *) layer{
CCScene
*newScene = [CCScene node];
[newScene addChild: layer];
return newScene;
}

@end

 

  你可能已经注意到了,我们包含了“MenuLayer.h”文件,然后在“goMenu”方法中使用了MenuLayer。所以,让我们再创建一个类,叫MenuLayer.h,如下所示:

#import "MenuLayer.h"

@implementation MenuLayer

-(id) init{
self
= [super init];

CCLabel
*titleLeft = [CCLabel labelWithString:@"Menu " fontName:@"Marker Felt" fontSize:48];
CCLabel
*titleRight = [CCLabel labelWithString:@" System" fontName:@"Marker Felt" fontSize:48];
CCLabel
*titleQuotes = [CCLabel labelWithString:@"\" \"" fontName:@"Marker Felt" fontSize:48];
CCLabel
*titleCenterTop = [CCLabel labelWithString:@"How to build a..." fontName:@"Marker Felt" fontSize:26];
CCLabel
*titleCenterBottom = [CCLabel labelWithString:@"Part 1" fontName:@"Marker Felt" fontSize:48];

CCMenuItemFont
*startNew = [CCMenuItemFont itemFromString:@"New Game" target:self selector: @selector(onNewGame:)];
CCMenuItemFont
*credits = [CCMenuItemFont itemFromString:@"Credits" target:self selector: @selector(onCredits:)];
CCMenu
*menu = [CCMenu menuWithItems:startNew, credits, nil];

titleCenterTop.position
= ccp(160, 380);
[self addChild: titleCenterTop];

titleCenterBottom.position
= ccp(160, 300);
[self addChild: titleCenterBottom];

titleQuotes.position
= ccp(160, 345);
[self addChild: titleQuotes];

titleLeft.position
= ccp(80, 345);
[self addChild: titleLeft];

titleRight.position
= ccp(220, 345);
[self addChild: titleRight];

menu.position
= ccp(160, 200);
[menu alignItemsVerticallyWithPadding:
40.0f];
[self addChild:menu z:
2];

return self;
}

- (void)onNewGame:(id)sender{
[SceneManager goMenu];
}

- (void)onCredits:(id)sender{
[SceneManager goMenu];
}
@end

 

  最后,修改app delegate(MenuTutorialAppDelegate.m),包含SceneManager.h头文件:

#import "SceneManager.h"

并且删除:

#import "HelloWorldScene.h"

 

  当然,我们还需要修改一些内容。因为所有的“runWithScene”逻辑,现在都被SceneManager类所替代,因此,把下面的语句:

[[CCDirector sharedDirector] runWithScene: [HelloWorld scene]];

替换成:

[SceneManager goMenu];

 

  我们也将会让我们的例子在Portrait模式运行(竖版)---因此,我们需要取消一些注释代码,具体如下:(使用cocos2d 1.0的朋友,如果不知道怎么弄,可以在下方留言)

// Obtain the shared director in order to...
CCDirector *director = [CCDirector sharedDirector];
// Sets landscape mode
//[director setDeviceOrientation:kCCDeviceOrientationLandscapeLeft];

 

  当你编译并运行工程之后,你就能看到上面的截屏啦!祝贺你完成了第一部分教程的学习,接下来,我们将在第二部分教程中学到更多有意思的内容。

  (注意:教程源代码如果不能运行,可以重新建立一个工程,然后把下载的工程里面的Classes文件夹下面的文件拷到新工程里面就ok了)

 

著作权声明:本文由http://www.cnblogs.com/andyque翻译,欢迎转载分享。请尊重作者劳动,转载时保留该声明和作者博客链接,谢谢!

posted on 2011-07-15 21:01  子龙山人  阅读(17705)  评论(22编辑  收藏  举报