零基礎學習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

零基礎學習IOS開發（四）- cocos2d-x3.0 使用轉場動畫和按鈕

零基礎學習IOS開發（三）- cocos2d-x3.0 顯示圖像及基本動畫效果

利用 Cocos2dx-3.0 新物理特性模擬彈珠迷宮

十年前，十年後……

一道邏輯題 - 我拿走了哪個數

用Java進行Web開發學習日誌——1.認識J2EE

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結