cocos2d-x学习 之三

在上一节中已经完成了开始界面的编写，我们从菜单的最下面开始写，我们先完成点下About按钮时所执行的动作。点下About按钮时执行的动作如下：

void WelcomeLayer::aboutGameCallback(CCObject *sender )
{
#ifdef DEBUG
    CCLog("aboutGame");
#endif

    CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, AboutLayer::scene() ));
}

当我们点下About按钮时将会完成游戏场景的切换，会由菜单场景切换到About场景。在这里切换时我们加了一个淡入淡出的动画效果，如果不加上动画，直接切换场景也是可以的，但是如果我们不加动画直接切换会显得太突兀了。在这里我们为了更好看一点我们还是加上动画吧。接着我们看看AboutLayer的实现。

aboutlayer.h

 #ifndef ABOUT_LAYER_H
 #define ABOUT_LAYER_H
 
 #include "cocos2d.h"
 #include "BaserLayer.h"
 
 USING_NS_CC;
 
 class AboutLayer : public BaserLayer
 {
     public:
         AboutLayer();
         ~AboutLayer();
 
         virtual bool init();
 
         static CCScene* scene();
 
         CREATE_FUNC(AboutLayer);
 
         void setViews();
 
         void backCallback(CCObject *sender );
 };
 
 #endif

这个里面的代码想必大家都熟悉了，就不在详细讲述了。接着我们看看他的实现文件，在这里我们只看看它初始化界面的函数setViews,代码如下：

void AboutLayer::setViews()
{
    setBackGroundImage("loading.png");

    CCSprite *title = CCSprite::create("menuTitle.png",CCRectMake(0,38,138,30));
    title->setAnchorPoint(ccp(0.5,1));
    title->setPosition(ccp(getWinSize().width/2,getWinSize().height-20));

    this->addChild(title);

    CCLabelBMFont *des = CCLabelBMFont::create("this Gmae is recorded by Study","arial-14.fnt");
    des->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));

    this->addChild(des);

    CCLabelBMFont *back = CCLabelBMFont::create("back","arial-14.fnt");

    back->setScale(1.25f);
    CCMenuItemLabel *backLable =  CCMenuItemLabel::create(back,this,menu_selector(AboutLayer::backCallback));
    backLable->setAnchorPoint(ccp(0.5,1));
    backLable->setPosition(ccp(getWinSize().width/2,30));

    CCMenu *menu = CCMenu::create(backLable,NULL);
    menu->setPosition(CCPointZero);

    this->addChild(menu);


}

在这里我们看到了有新的元素出现：CCLabelBMFont 看这个控件的名字我们就知道他是用来显示文字的。具体的代码如下：

CCLabelBMFont *des = CCLabelBMFont::create("this Gmae is recorded by Study","arial-14.fnt");

其第一个参数为要显示的文字，第二个参数为要加载的字体，这个字体文件是游戏开发者提供的。

在这里我们又创建了一个菜单用来实现返回的功能，在这里我们不能直接创建一个Label用来返回，因为CCLabelBMFont没有处理按下的信号，我们需要把他加入到CCMenu中实现该效果。我们注意到我们调用了CCLabelBMFont的setScale方法，这个方法主要实现当我们按下back Label是会有一个缩放的效果。其他的功能就和上一讲的差不多，在此处就不详细讲述了，我们主要看一下back的回调函数：

 void AboutLayer::backCallback(CCObject *sender )
 {
     CCLog("stratGame");
 
     CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, WelcomeLayer::scene() ));
 
 }

在这个函数里我们完成了游戏场景的切换。接下来我们看看aboutlayer.cpp文件的完整实现

aboutlayer.cpp

 #include "aboutlayer.h"
 #include "welcomelayer.h"
 #include "config.h"
 
 AboutLayer::AboutLayer()
 {
 }
 
 AboutLayer::~AboutLayer()
 {
 }
 
 /**
  *初始化方法
  */
 bool AboutLayer::init()
 {
     bool sRect = false;
 
     do
     {
         CC_BREAK_IF(!BaserLayer::init());
 
         setViews();
 
         sRect = true;
 
     }while(0);
 
     return sRect;
 }
 
 void AboutLayer::setViews()
 {
     setBackGroundImage("loading.png");
 
     CCSprite *title = CCSprite::create("menuTitle.png",CCRectMake(0,38,138,30));
     title->setAnchorPoint(ccp(0.5,1));
     title->setPosition(ccp(getWinSize().width/2,getWinSize().height-20));
 
     this->addChild(title);
 
     CCLabelBMFont *des = CCLabelBMFont::create("this Gmae is recorded by Study","arial-14.fnt");
     des->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
 
     this->addChild(des);
 
     CCLabelBMFont *back = CCLabelBMFont::create("back","arial-14.fnt");
 
     back->setScale(1.25f);
     CCMenuItemLabel *backLable =  CCMenuItemLabel::create(back,this,menu_selector(AboutLayer::backCallback));
     backLable->setAnchorPoint(ccp(0.5,1));
     backLable->setPosition(ccp(getWinSize().width/2,30));
 
     CCMenu *menu = CCMenu::create(backLable,NULL);
     menu->setPosition(CCPointZero);
 
     this->addChild(menu);
 }
 
 CCScene * AboutLayer::scene()
 {
     CCScene *scene = NULL;
 
     do
     {
         scene = CCScene::create();
         CC_BREAK_IF(!scene);
 
         AboutLayer *layer = AboutLayer::create();
         CC_BREAK_IF(!layer);
 
         scene->addChild(layer);
 
     }while(0);
 
     return scene;
 }
 
 void AboutLayer::backCallback(CCObject *sender )
 {
 #ifdef DEBUG
     CCLog("stratGame");
 #endif
 
     CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, WelcomeLayer::scene() ));
 
 }
 

最后附上游戏的截图：

最后上传一张gif的动态图吧

顺便记录一下linux下生成动态图的命令：

convert -delay 50 1.png -delay 100 2.png -delay 150 3.png -loop 0   animated.gif