零基础学习IOS开发（四）- cocos2d-x3.0 使用转场动画和按钮

上一期中最后我分享了我写的一段打开门的动画效果的代码，相信大家也都自己动手尝试了一下，这一期我要和大家分享的是转场动画以及menu按钮的制作（对应入门视频教程中第三课和第四课）。

一、转场动画

要制作转场动画首先需要有一个新的场景（scene），而程序模板给出的HelloWorldScene就是一个场景，因此我们可以仿照它来创建一个自己的场景。

首先在工程中创建一个头文件和对应的cpp文件（此处我新建了一个叫做MenuScene的类作为新场景）

然后仿照HelloWorldScene.h修改了MenuScene.h:

###MenuScene.h####include "cocos2d.h"class MenuScene : public cocos2d::LayerColor{public:    static cocos2d::Scene* createScene();    virtual bool init();    void menuCloseCallback(cocos2d::Ref* pSender);    CREATE_FUNC(MenuScene);    MenuScene(void);    ~MenuScene(void);};

相应地，MenuScene.cpp修改如下:

#include "MenuScene.h"#include "HelloWorldScene.h"USING_NS_CC;bool MenuScene::init(){    if ( !LayerColor::initWithColor(Color4B(0,0,0,255)) )//这里我使用了黑色作为背景色    {        return false;    }    return true;}Scene* MenuScene::createScene(){    auto scene = Scene::create();    auto layer = MenuScene::create();    scene->addChild(layer);    return scene;}MenuScene::MenuScene(void){}MenuScene::~MenuScene(void){}

然后就是仿照上一期的内容，在init()中创建需要显示的图像，这里就不再赘述，接下来讲述如何实现转场。

首先在HelloWorldScene.h中加入转场方法声明：

void animationEnd();

然后在cpp文件中实现它：

void HelloWorld::animationEnd(){    auto scene = MenuScene::createScene();    auto fade = TransitionFadeTR::create(1.0f, scene);    //auto slide = TransitionSlideInL::create(1.0f, scene);    auto director = Director::getInstance();    director->replaceScene(fade);  }

这里，auto scene = MenuScene::createScene(); 就是定义了一个scene场景，并把MenuScene创建的初始赋给它，以供之后使用。

而auto fade = TransitionFadeTR::create(1.0f, scene); 中TransitionFadeFR是cocos2d-x自带的fade样式的转场动画效果，TR的意思是Top-Right，也就是从左下方向右上方显示转场的动画，相应地你也可以使用up/down/BL(也就是Botton-Left)实现你需要的fade转场效果，当然你也可以用fade以外的效果（可以参考：http://blog.csdn.net/u012510614/article/details/25285615）

然后就在上一期制作的打开门的动画中加入转场代码，这里我们把转场代码加入到左门打开动画的序列（sequence）中:

    auto loadScene2 = CallFunc::create(this, callfunc_selector(HelloWorld::animationEnd));    auto loading_seq = Sequence::create(moveLeft, delay, loadScene2, NULL);    leftNode->runAction(loading_seq);

然后你就惊喜的发现你的转场动画生效啦~！我的转场动画效果如下：

二、menu按钮的制作

menu按钮的制作和制作普通的动画以及动画序列的过程非常类似，我们来看一下：

(1) 文本型按钮

首先建立文本标签Label：

auto label1 = Label::create("start","Microsoft YaHei", 50);label1->setColor(Color3B(255,255,0));auto label2 = Label::create("exit","Microsoft YaHei", 50);label2->setColor(Color3B(255,255,0));

Label::create()的参数中，第一个参数是Label的文本内容，第二个参数是字体，第三个参数是字号；

建立好Label文本标签后就利用MenuItemLabel::create(label名称)来将Label变成可以点击的menu按钮：

auto menu1 = MenuItemLabel::create(label1);menu1->setPosition(Point(400,200));                   auto menu2 = MenuItemLabel::create(label2);menu2->setPosition(Point(400,400));

然后就像动画序列一样，建立一个menu让它包含所有的menu按钮然后addChild让它显示出来：

auto menu = Menu::create(menu1, menu2, NULL);menu->setPosition(Point(0,0));this->addChild(menu);

(2)图片型按钮

学会了文本型按钮，你一定想知道图片形式的按钮怎么做呢，和文本型的十分类似，具体如下：

auto startbutton = MenuItemImage::create("startbutton1.png", "startbutton2.png");startbutton->setAnchorPoint(Point(0.5, 1));startbutton->setPosition(Point(visibleSize.width/2-200,100));//这里我用了屏幕宽度visibleSize.width/2来设定按钮位置auto exitbutton = MenuItemImage::create("exitbutton1.png", "exitbutton2.png",);exitbutton->setAnchorPoint(Point(0.5, 1));exitbutton->setPosition(Point(visibleSize.width/2+200,100));auto menu = Menu::create(startbutton, exitbutton, NULL);menu->setPosition(Point(0,0));this->addChild(menu);

要注意的是，图片形式的按钮使用的创建指令是MenuItemImage::create("图片1.png", "图片2.png");

其中的“图片1”和“图片2”分别是按钮没有被按下的时候和被按下时的图像（当然，不要忘记先把图片文件导入到工程中哦），如果你想做的按钮要实现有时候是灰色（无法点击）的效果，那么就在“图片2”后面再加上一个无法点击时的图像作为第三个参数即可。

然后你就发现图片形式的按钮也成功显示啦！

(3)点击按钮调用事件

我们已经成功地显示按钮，但是按钮的存在价值是点击的时候调用一个事件，如转场、开始游戏等等，那么接下来我们就为按钮加入事件。

首先在场景的头文件中声明public的事件调用方法：

void clickStart(cocos2d::Object* menuItem);void clickExit(cocos2d::Object* menuItem);

为了能够显式地说明按钮按下确实调用了事件，我们在头文件里再声明一个Label，当按钮按下时Label中的文字会发生变化：

private:    cocos2d::Label* output;

在cpp中定义并显示Label：

output=Label::create("CWBeta", "LiShu", 80);output->setAnchorPoint(Point(0.5,0.5));output->setPosition(Point(visibleSize.width/2,visibleSize.height/2));this->addChild(output);

然后再实现点击按钮调用事件，点击start按钮显示“CWBeta started!”，点击exit按钮显示“CWBeta exited!”：

void MenuScene::clickStart(cocos2d::Object* menuItem){    output->setString("CWBeta started!");}void MenuScene::clickExit(cocos2d::Object* menuItem){    output->setString("CWBeta exited!");}

好了，我们可以运行一下，发现点击exit按钮时，文字发生了改变：

初始场景：

点击exit按钮不放（这时候按钮是第二张图的效果——变色了）

放开按钮Label文字改变

(4)点击按钮调用转场事件

其实到这一步可以不用看我的教程，自己尝试着写写看，这样又巩固了转场事件的调用，又巩固了按钮的使用，一举两得，而且很容易做到。

首先在MenuScene.h中也加上转场动画声明：

void animationEnd();

然后在cpp中定义：

void MenuScene::animationEnd(){    auto scene = HelloWorld::createScene();    auto fade = TransitionFadeBL::create(1.0f, scene);    //auto slide = TransitionSlideInL::create(1.0f, scene);    auto director = Director::getInstance();    director->replaceScene(fade);}

接着如上文所写，按钮事件调用的实现中改为定义转场动画的效果，然后runAction调用转场动画：

void MenuScene::clickStart(cocos2d::Object* menuItem){    auto loadScene1 = CallFunc::create(this, callfunc_selector(MenuScene::animationEnd));    runAction(loadScene1);}

这样就好啦，点击start按钮就会实现转场到HelloWorldScene这个场景：

这就是我这次的学习，大家也学会了吗？O(∩_∩)O