（译）cocos2d菜单教程：第一部分

最新推荐文章于 2020-12-09 10:42:55 发布

gf771115

最新推荐文章于 2020-12-09 10:42:55 发布

阅读量576

点赞数

分类专栏： cocos2d

cocos2d 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

转自：http://www.cnblogs.com/zilongshanren/archive/2011/07/15/2107758.html

原文链接地址：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];