如果你还没有阅读过第一篇教程的话，那么我建议你在继续之前，回过头去完成第一部分教程再回来。
今天，我们将在上一篇教程之上添加一些东西，同时，我们会用到动画和layer之间的切换效果（transition）。
这里有本教程的完整源代码。
好了，正式出发吧！第一步，就是整理一下我们将要实现些什么东西。如果在编码之前，你不做任何的计划的话，那么你什么也做不成！下面是我们这篇教程将要实现的功能特性列表：
- 为credit场景和play场景添加一个新的层
- 当从一个场景切换到另一个场景的时候，做一些transition。
- 用文本构建菜单系统。
让我们先创建两个新类“PlayerLayer”和“CreditLayer”--为什么要有Credit Layer？好吧，其实就是让别人知道这个游戏是你做的。我真的希望“PlayLayer”很清晰明了，其实就是我们游戏的GameScene或者MainScene，就是你实际玩游戏的场景。
因此，像之前添加“SceneManger”类一样，右键点击“Classes”分组，然后选择“Add”，再选择“New Files”，确保选择“Objective-c”选项，同时要保证同时创建.h文件被勾上，如下所示：
同样的方法创建CreditsLayer：
现在，我们有两个文件，但是里面啥也没有。。。别担心，我们马上会讲到如何添加里面的内容--首先是PlayerLayer.h文件：
#import "cocos2d.h" #import "SceneManager.h" @interface PlayLayer : CCLayer { } -(void) back: (id) sender; @end
现在是PlayerLayer.m文件：
#import "PlayLayer.h" @implementation PlayLayer -(id) init{ self = [super init]; if (!self) { return nil; } CCMenuItemFont *back = [CCMenuItemFont itemFromString:@"back" target:self selector: @selector(back:)]; CCMenu *menu = [CCMenu menuWithItems: back, nil]; menu.position = ccp(160, 150); [self addChild: menu]; return self; } -(void) back: (id) sender{ [SceneManager goMenu]; } @end
现在，CreditsLayer和PlayerLayer几乎差不多，除了名字不同以外。但是，为了教学的需要，我还是要展示出来--首先是CreditsLayer.h文件：
#import "cocos2d.h" #import "SceneManager.h" @interface CreditsLayer : CCLayer { } -(void) back: (id) sender; @end
然后是CreditsLayer.m文件：
#import "CreditsLayer.h" @implementation CreditsLayer -(id) init{ self = [super init]; if (!self) { return nil; } CCMenuItemFont *back = [CCMenuItemFont itemFromString:@"back" target:self selector: @selector(back:)]; CCMenu *menu = [CCMenu menuWithItems: back, nil]; menu.position = ccp(160, 150); [self addChild: menu]; return self; } -(void) back: (id) sender{ [SceneManager goMenu]; } @end
这些文件现在都只干一件事情----有一个“back”菜单按钮，当用户点击的时候，就通过SceneManager调转到MenuLayer。然后，如果你现在编译运行的话，也不会有任何问题，但是，你点back的时候，并不会跳转到任何场景去。。。我们马上就会来解决这个问题！
现在，我们回到SceneManager并作一些修改----添加两个方法“goPlay”和“goCredits”：
#import #import "MenuLayer.h" #import "PlayLayer.h" #import "CreditsLayer.h" @interface SceneManager : NSObject { } +(void) goMenu; +(void) goPlay; +(void) goCredits; @end
同时，我们要向SceneManager.m里面添加两个方法的实现，它让我们能够跳转到PlayerLayer和CreditsLayer中去。
+(void) goPlay{ CCLayer *layer = [PlayLayer node]; [SceneManager go: layer]; } +(void) goCredits{ CCLayer *layer = [CreditsLayer node]; [SceneManager go: layer]; }
因此，现在完整的SceneManager.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) goPlay{ CCLayer *layer = [PlayLayer node]; [SceneManager go: layer]; } +(void) goCredits{ CCLayer *layer = [CreditsLayer 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中添加一些调用就可以了！
首先，修改MenuLayer的头文件：
#import "cocos2d.h" #import "SceneManager.h" #import "PlayLayer.h" #import "CreditsLayer.h" @interface MenuLayer : CCLayer { } - (void)onNewGame:(id)sender; - (void)onCredits:(id)sender; @end
因为，我们创建了“onNewGame”和“onCredits”两个函数，在第一部分里，我们并没有在MenuLayer.h里添加任何方法声明。当然，不要忘了＃imports PlayerLayer.h和CreditsLayer.h两个头文件。
最后，我们需要使用SceneManager来实现“onNewGame”和“onCredits”两个方法：
- (void)onNewGame:(id)sender{ [SceneManager goPlay]; } - (void)onCredits:(id)sender{ [SceneManager goCredits]; }
哇！就这么多代码！现在编译并运行，你现在有一个菜单，可以从“Play”到“Menu”，以及“Credits”之间相互切换了。
但是，看起来有点生硬，不够生动---接下来，让我们做一些更有趣的事情吧---来玩一玩transitons怎么样？：）
———————– New Note
在2010年9月1日，cocos2d更新到0.99.5-beta2了，在Transition方面做了一此改变。一些名字被改动了，如果你之前使用的是0.99.4，如果更新到0.99.5的话，那么会有一些错误。
下面是你需要做的一些更改，如果你是从0.99.4更新到0.99.5的话：
Transitions 所有的Transition类都被重新命名了 Old New CCXXXTransition CCTransitionXXX Example: Old New CCFadeTransition CCTransitionFade
你可以从下面的链接看到完整的更改列表： http://www.cocos2d-iphone.org/wiki/doku.php/release_notes:0_99_5 ———————–
那么，我们怎么做呢？我们可以让SceneManager来完成所有的工作。好，我们先在“go”方法里面使用CCFadeTransition来replaceScene，如下所示：
[director replaceScene:[CCFadeTransition transitionWithDuration:1.2f scene:newScene withColor:ccWHITE]];
从下载下来的cocos2d 测试代码中，找到Transition.h/.m，那里面有所有的transition的用法：
以下是一些样例：
[CCFadeTransition transitionWithDuration:1.2 scene:newScene withColor:ccWHITE]; [CCZoomFlipXTransition transitionWithDuration:1.2 scene:newScene orientation:kOrientationLeftOver]; [CCFlipYTransition transitionWithDuration:1.2 scene:newScene orientation:kOrientationDownOver];
我们将封装一下我们的类，使之接收两个参数“delay time”和“new scene”的名字。。。为了从场景的字符串名字获得场景类，我们所要下面这个方法：
Class c = NSClassFromString(r);"
整个SceneManager类看起来如下所示：
#define TRANSITION_DURATION (1.2f) @interface FadeWhiteTransition : CCFadeTransition +(id) transitionWithDuration:(ccTime) t scene:(CCScene*)s; @end @interface ZoomFlipXLeftOver : CCZoomFlipXTransition +(id) transitionWithDuration:(ccTime) t scene:(CCScene*)s; @end @interface FlipYDownOver : CCFlipYTransition +(id) transitionWithDuration:(ccTime) t scene:(CCScene*)s; @end @implementation FadeWhiteTransition +(id) transitionWithDuration:(ccTime) t scene:(CCScene*)s { return [self transitionWithDuration:t scene:s withColor:ccWHITE]; } @end @implementation ZoomFlipXLeftOver +(id) transitionWithDuration:(ccTime) t scene:(CCScene*)s { return [self transitionWithDuration:t scene:s orientation:kOrientationLeftOver]; } @implementation FlipYDownOver +(id) transitionWithDuration:(ccTime) t scene:(CCScene*)s { return [self transitionWithDuration:t scene:s orientation:kOrientationDownOver]; } static int sceneIdx=0; static NSString *transitions[] = { @"FlipYDownOver", @"FadeWhiteTransition", @"ZoomFlipXLeftOver", }; Class nextTransition() { // HACK: else NSClassFromString will fail [CCRadialCCWTransition node]; sceneIdx++; sceneIdx = sceneIdx % ( sizeof(transitions) / sizeof(transitions[0]) ); NSString *r = transitions[sceneIdx]; Class c = NSClassFromString(r); return c; }
因此，最后修改一下“go”函数，首先，我们添加下面一行代码：
Class transition = nextTransition();
然后，我们把下面的语句：
[director runWithScene:newScene];
替换成：
[director replaceScene:[transition transitionWithDuration:TRANSITION_DURATION scene:newScene]];
最终SceneManger的go函数看起来如下所示：
+(void) go: (CCLayer *) layer{ CCDirector *director = [CCDirector sharedDirector]; CCScene *newScene = [SceneManager wrap:layer]; Class transition = nextTransition(); if ([director runningScene]) { [director replaceScene:[transition transitionWithDuration:TRANSITION_DURATION scene:newScene]]; }else { [director runWithScene:newScene]; } }
很酷，对吧？
好像这个教程还不够，我们还可以调加更多的效果。。。最后，我还想在菜单文本上面添加一些效果。为了实现这个，我们需要修改MenuLayer.m文件。 首先，我们先把titleLeft和titleRight CClabel从下面的代码：
titleLeft.position = ccp(80, 345); [self addChild: titleLeft]; titleRight.position = ccp(220, 345); [self addChild: titleRight];
改在下面的代码：
titleLeft.position = ccp(80, -80); [self addChild: titleLeft]; titleRight.position = ccp(220, 520); [self addChild: titleRight];
然后为每一个菜单项添加一个动画：
CCAction *titleRightAction = [CCSequence actions: [CCDelayTime actionWithDuration: delayTime], [CCEaseBackOut actionWithAction: [CCMoveTo actionWithDuration: 1.0 position:ccp(220,345)]],nil];
oh！我的天，这在干嘛啊！
创建一个CCAction对象，它由于系列的事件组成。
这个事件序列首先等待0.3秒，然后移动到（220，345）的位置，时间间隔为1秒，同时用EaseBackOut修饰了，所以是先快后慢。
一旦我们创建了这个动作序列之后，我们在titleLeft上面运行这个action。
[titleLeft runAction: titleLeftAction];
我们同时要为titleRight添加类似的行为。
最后的动画就是Menu本身：
for (CCMenuItemFont *each in [menu children]) { each.scaleX = 0.0f; each.scaleY = 0.0f; CCAction *action = [CCSequence actions: [CCDelayTime actionWithDuration: delayTime], [CCScaleTo actionWithDuration:0.5F scale:1.0], nil]; delayTime += 0.2f; [each runAction: action]; }
你可以讲讲上面的代码是干嘛用的吗？我们又创建了一个“Action”变量，先停0.3秒，然后0.5秒缩放到1.0。因为我们开始之前把scale设置为0，这样就可以在0.5秒的时间内，慢慢放大到100％的尺寸。让我们运行一下代码，体验一下吧！
再见！
最新评论