今天，我将带大家一起征服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];returnnewScene;

}

@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];returnself;

}-(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了)