Cocos2d-x 3.0菜单教程：第二部分

如果你还没有阅读过第一篇教程的话，那么我建议你在继续之前，回过头去完成第一部分教程再回来。

　　今天，我们将在上一篇教程之上添加一些东西，同时，我们会用到动画和layer之间的切换效果（transition）。

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

　　好了，正式出发吧！第一步，就是整理一下我们将要实现些什么东西。如果在编码之前，你不做任何的计划的话，那么你什么也做不成！下面是我们这篇教程将要实现的功能特性列表：

• 为credit场景和play场景添加一个新的层
• 当从一个场景切换到另一个场景的时候，做一些transition。
• 用文本构建菜单系统。

　　我保证接下来的内容很直白，而且很容易。

　　让我们先创建两个新类“PlayLayer”和“CreditLayer”--为什么要有Credit Layer？好吧，其实就是让别人知道这个游戏是你做的。我真的希望“PlayLayer”很清晰明了，其实就是我们游戏的GameScene或者MainScene，就是你实际玩游戏的场景。

　　因此，像之前添加“SceneManger”类一样，右键点击“Classes”分组，再选择“New Files”，选择IOS -> C and C++ -> C++ Class，如下所示：
　　

　　同样的方法创建CreditLayer：

　　现在，我们有四个文件，但是里面啥也没有。。。别担心，我们马上会讲到如何添加里面的内容--首先是PlayLayer.h文件：

#include "cocos2d.h"#include "SceneManager.h"class PlayLayer : public cocos2d::Layer{public:    PlayLayer();    ~PlayLayer();    bool init();    void back(Object* pSender);    CREATE_FUNC(PlayLayer);};

现在是PlayerLayer.cpp文件：

#include "PlayLayer.h"USING_NS_CC;PlayLayer::PlayLayer(){}PlayLayer::~PlayLayer(){}bool PlayLayer::init(){    if(!Layer::init())    {        return false;    }    Size visibleSize = Director::getInstance()->getVisibleSize();    MenuItemFont *back = MenuItemFont::create("back", CC_CALLBACK_1(PlayLayer::back, this));    Menu *menu = Menu::create(back, NULL);    menu->setPosition(visibleSize.width/2, visibleSize.height/2);    this->addChild(menu);    return true;}void PlayLayer::back(Object* pSender){    SceneManager::goMenu();}

　　现在，CreditLayer和PlayLayer几乎差不多，除了名字不同以外。但是，为了教学的需要，我还是要展示出来--首先是CreditLayer.h文件：

#include "cocos2d.h"#include "SceneManager.h"class CreditLayer : public cocos2d::Layer{public:    CreditLayer();    ~CreditLayer();    bool init();    void back(Object* pSender);    CREATE_FUNC(CreditLayer);};

　　然后是CreditLayer.cpp文件：

#include "CreditLayer.h"USING_NS_CC;CreditLayer::CreditLayer(){}CreditLayer::~CreditLayer(){}bool CreditLayer::init(){    if(!Layer::init())    {        return false;    }    Size visibleSize = Director::getInstance()->getVisibleSize();    MenuItemFont *back = MenuItemFont::create("back", CC_CALLBACK_1(CreditLayer::back, this));    Menu *menu = Menu::create(back, NULL);    menu->setPosition(visibleSize.width/2, visibleSize.height/2);    this->addChild(menu);    return true;}void CreditLayer::back(Object* pSender){    SceneManager::goMenu();}

　　这些文件现在都只干一件事情----有一个“back”菜单按钮，当用户点击的时候，就通过SceneManager调转到MenuLayer。然后，如果你现在编译运行的话，也不会有任何问题，但是，你点back的时候，并不会跳转到任何场景去。。。我们马上就会来解决这个问题！

　　现在，我们回到SceneManager并作一些修改----添加两个方法“goPlay”和“goCredits”：

static void goPlay();static void goCredit();

　　同时，我们要向SceneManager.cpp里面添加两个方法的实现，它让我们能够跳转到PlayerLayer和CreditsLayer中去。

//添加头文件#include "PlayLayer.h"#include "CreditLayer.h"void SceneManager::goPlay(){    Layer *layer = PlayLayer::create();    SceneManager::go(layer);}void SceneManager::goCredit(){    Layer *layer = CreditLayer::create();    SceneManager::go(layer);}

　　因此，现在完整的SceneManager.cpp文件，看起来如下所示：

#include "SceneManager.h"#include "PlayLayer.h"#include "CreditLayer.h"USING_NS_CC;void SceneManager::goMenu(){    Layer *layer = MenuLayer::create();    SceneManager::go(layer);}void SceneManager::goPlay(){    Layer *layer = PlayLayer::create();    SceneManager::go(layer);}void SceneManager::goCredit(){    Layer *layer = CreditLayer::create();    SceneManager::go(layer);}void SceneManager::go(Layer* layer){    Director *director = Director::getInstance();    Scene *newScene = SceneManager::wrap(layer);    if ( director->getRunningScene() )    {        director->replaceScene(newScene);    }    else    {        director->runWithScene(newScene);    }}Scene* SceneManager::wrap(Layer *layer){    Scene *newScene = Scene::create();    newScene->addChild(layer);    return newScene;}

　　现在，我们只需要在MenuLayer中添加一些调用就可以了！

　　因为，我们创建了“onNewGame”和“onCredits”两个函数，在第一部分里，我们并没有在MenuLayer.h里添加任何方法声明。当然，不要忘了#include PlayLayer.h和CreditLayer.h两个头文件。

　　最后，我们需要在MenuLayer.cpp文件里使用SceneManager来实现“onNewGame”和“onCredits”两个方法：

void MenuLayer::onNewGame(Object* pSender){    SceneManager::goPlay();}void MenuLayer::onCredits(Object* pSender){    SceneManager::goCredit();}

　　哇！就这么多代码！现在编译并运行，你现在有一个菜单，可以从“Play”到“Menu”，以及“Credits”之间相互切换了。

　　

　　但是，看起来有点生硬，不够生动---接下来，让我们做一些更有趣的事情吧---来玩一玩transitons怎么样？：）

　　那么，我们怎么做呢？我们可以让SceneManager来完成所有的工作。好，我们先在“go”方法里面使用CCFadeTransition来replaceScene，如下所示：

director->replaceScene(TransitionFade::create(1.2f, newScene, Color3B::WHITE));

　　从下载下来的cocos2d-x工程里的TestCpp测试代码中，找到TransitionsTest.h/.cpp，那里面有所有的transition的用法，后面我们用到的是从TransitionsTest切出来的一小部分。

　　为了从场景的字符串名字返回场景类，我们所要下面的宏定义和结构体：

#define STRINGIFY(x) #x#define TRANS(__className__) {                                      \    [](float t, Scene* s){ return __className__::create(t,s);},     \        STRINGIFY(__className__),                                   \}struct _transitions {    std::function<TransitionScene*(float t, Scene* s)> function;    const char * name;} transitions[] = {    TRANS(PageTransitionForward),    TRANS(PageTransitionBackward),    TRANS(FadeWhiteTransition),    TRANS(ZoomFlipXLeftOver),    TRANS(FlipXRightOver),    TRANS(FlipYUpOver)};

　　这个结构体保存从场景的字符串名字返回的场景类和该字符串。顺便定义了一个保存该结构体的数组transitions，存储了6个我们要用到的场景跳转效果。

　　整个SceneManager类看起来如下所示：

#define TRANSITION_DURATION (1.2f)class FadeWhiteTransition : public TransitionFade{public:    static TransitionScene* create(float t, Scene* s)    {        return TransitionFade::create(t, s, Color3B::WHITE);    }};class FlipXRightOver : public TransitionFlipX{public:    static TransitionScene* create(float t, Scene* s)    {        return TransitionFlipX::create(t, s, TransitionScene::Orientation::RIGHT_OVER);    }};class FlipYUpOver : public TransitionFlipY{public:    static TransitionScene* create(float t, Scene* s)    {        return TransitionFlipY::create(t, s, TransitionScene::Orientation::UP_OVER);    }};class ZoomFlipXLeftOver : public TransitionZoomFlipX{public:    static TransitionScene* create(float t, Scene* s)    {        return TransitionZoomFlipX::create(t, s, TransitionScene::Orientation::LEFT_OVER);    }};class PageTransitionForward : public TransitionPageTurn{public:    static TransitionScene* create(float t, Scene* s)    {        Director::getInstance()->setDepthTest(true);        return TransitionPageTurn::create(t, s, false);    }};class PageTransitionBackward : public TransitionPageTurn{public:    static TransitionScene* create(float t, Scene* s)    {        Director::getInstance()->setDepthTest(true);        return TransitionPageTurn::create(t, s, true);    }};#define STRINGIFY(x) #x#define TRANS(__className__) {                                      \    [](float t, Scene* s){ return __className__::create(t,s);},     \        STRINGIFY(__className__),                                   \}struct _transitions {    std::function<TransitionScene*(float t, Scene* s)> function;    const char * name;} transitions[] = {    TRANS(PageTransitionForward),    TRANS(PageTransitionBackward),    TRANS(FadeWhiteTransition),    TRANS(ZoomFlipXLeftOver),    TRANS(FlipXRightOver),    TRANS(FlipYUpOver)};#define MAX_LAYER (sizeof(transitions) / sizeof(transitions[0]))static int s_nSceneIdx = 0;TransitionScene* createTransition(int index, float t, Scene* s){    Director::getInstance()->setDepthTest(false);    return transitions[index].function(t,s);}

　　因此，最后修改一下“go”函数，首先，我们下面的语句：

director->replaceScene(TransitionFade::create(1.2f, newScene, Color3B::WHITE));

　　替换成：

//director->replaceScene(TransitionFade::create(1.2f, newScene, Color3B::WHITE));s_nSceneIdx++;s_nSceneIdx = s_nSceneIdx % MAX_LAYER;Director::getInstance()->replaceScene(                    createTransition(s_nSceneIdx, TRANSITION_DURATION, newScene));

　　最终SceneManger的go函数看起来如下所示：

void SceneManager::go(Layer* layer){    Director *director = Director::getInstance();    Scene *newScene = SceneManager::wrap(layer);    if ( director->getRunningScene() )    {        //director->replaceScene(TransitionFade::create(1.2f, newScene, Color3B::WHITE));        s_nSceneIdx++;        s_nSceneIdx = s_nSceneIdx % MAX_LAYER;        Director::getInstance()->replaceScene(                           createTransition(s_nSceneIdx, TRANSITION_DURATION, newScene));    }    else    {        director->runWithScene(newScene);    }}

　　很酷，对吧？

　　好像这个教程还不够，我们还可以调加更多的效果。。。最后，我还想在菜单文本上面添加一些效果。为了实现这个，我们需要修改MenuLayer.cpp文件。
　　首先，我们先把titleLeft和titleRight Label从下面的代码：

titleLeft->setPosition(    Point( (visibleSize.width - tileWidth)/2,            titleCenterTop->getPosition().y - titleLeft->getContentSize().height - 40) );this->addChild(titleLeft);titleRight->setPosition(    Point( (visibleSize.width - tileWidth)/2 + titleLeft->getContentSize().width + 50,        titleCenterTop->getPosition().y - titleRight->getContentSize().height - 40) );this->addChild(titleRight);

　　改成下面的代码：

auto titleLeftPosBegin = Point((visibleSize.width - tileWidth)/2,    titleCenterTop->getPosition().y - titleLeft->getContentSize().height - 40 - 400);auto titleLeftPosEnd = Point((visibleSize.width - tileWidth)/2,    titleCenterTop->getPosition().y - titleLeft->getContentSize().height - 40 );auto titleRightPosBegin = Point(    (visibleSize.width - tileWidth)/2 + titleLeft->getContentSize().width + 50,    titleCenterTop->getPosition().y - titleRight->getContentSize().height - 40 + 400);auto titleRightPosEnd = Point(    (visibleSize.width - tileWidth)/2+titleLeft->getContentSize().width + 50,    titleCenterTop->getPosition().y - titleRight->getContentSize().height - 40);titleLeft->setPosition(titleLeftPos);this->addChild(titleLeft);titleRight->setPosition(titleRightPos);this->addChild(titleRight);

　　注意：原教程直接写的坐标数字，但是由于我改编时使用的分辨率跟原教程不同，所以之前的坐标没法用。于是我自己使用的相对坐标定位，这样造成代码有点长，于是在这里把需要的坐标特地用titleRightPosEnd，titleRightPosBegin等提取出来。这里由于title初始坐标改变了，依赖title初始坐标的菜单错位，如titleCenterBottom就应该变成依赖title的目的地坐标。titleCenterBottom的设置Position代码变为：

titleCenterBottom->setPosition(    Point( (visibleSize.width - titleCenterBottom->getContentSize().width)/2,    titleRightPosEnd.y - titleCenterBottom->getContentSize().height - 40) );

　　接着，在init函数开始时声明float delayTime ＝ 0.3f，然后在菜单项设定Position之后的位置为菜单项添加一个动画：

Action *titleLeftAction = Sequence::create(    DelayTime::create(delayTime),    EaseBackOut::create(MoveTo::create(1.0, titleLeftPosEnd)),    NULL);

　　oh！我的天，这在干嘛啊！

　　创建一个Action对象，它由于系列的事件组成。

　　这个事件序列首先等待0.3秒，然后移动到 titleLeftPosEnd 的位置，时间间隔为1秒，同时用EaseBackOut修饰了，所以是先快后慢。

　　一旦我们创建了这个动作序列之后，我们运行这个action。

titleLeft->runAction(titleLeftAction);

　　我们同时要为titleRight添加类似的行为。

　　最后的动画就是Menu本身：

for (Node *each : menu->getChildren()){    each->setScale(0.0f, 0.0f);    Action *action = Sequence::create(DelayTime::create(delayTime),                                        ScaleTo::create(0.5f, 1.0f),                                        NULL);    delayTime += 0.2f;    each->runAction(action);}

　　你可以讲讲上面的代码是干嘛用的吗？我们又创建了一个“Action”变量，先停0.3秒，然后0.5秒缩放到1.0。因为我们开始之前把scale设置为0，这样就可以在0.5秒的时间内，慢慢放大到100％的尺寸。让我们运行一下代码，体验一下吧！