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

1 void WelcomeLayer::aboutGameCallback(CCObject *sender )
2 {
3 #ifdef DEBUG
4     CCLog("aboutGame");
5 #endif
6 
7     CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, AboutLayer::scene() ));
8 }

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

aboutlayer.h

 1  #ifndef ABOUT_LAYER_H
 2  #define ABOUT_LAYER_H
 3  
 4  #include "cocos2d.h"
 5  #include "BaserLayer.h"
 6  
 7  USING_NS_CC;
 8  
 9  class AboutLayer : public BaserLayer
10  {
11      public:
12          AboutLayer();
13          ~AboutLayer();
14  
15          virtual bool init();
16  
17          static CCScene* scene();
18  
19          CREATE_FUNC(AboutLayer);
20  
21          void setViews();
22  
23          void backCallback(CCObject *sender );
24  };
25  
26  #endif

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

 1 void AboutLayer::setViews()
 2 {
 3     setBackGroundImage("loading.png");
 4 
 5     CCSprite *title = CCSprite::create("menuTitle.png",CCRectMake(0,38,138,30));
 6     title->setAnchorPoint(ccp(0.5,1));
 7     title->setPosition(ccp(getWinSize().width/2,getWinSize().height-20));
 8 
 9     this->addChild(title);
10 
11     CCLabelBMFont *des = CCLabelBMFont::create("this Gmae is recorded by Study","arial-14.fnt");
12     des->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
13 
14     this->addChild(des);
15 
16     CCLabelBMFont *back = CCLabelBMFont::create("back","arial-14.fnt");
17 
18     back->setScale(1.25f);
19     CCMenuItemLabel *backLable =  CCMenuItemLabel::create(back,this,menu_selector(AboutLayer::backCallback));
20     backLable->setAnchorPoint(ccp(0.5,1));
21     backLable->setPosition(ccp(getWinSize().width/2,30));
22 
23     CCMenu *menu = CCMenu::create(backLable,NULL);
24     menu->setPosition(CCPointZero);
25 
26     this->addChild(menu);
27 
28 
29 }

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

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

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

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

1  void AboutLayer::backCallback(CCObject *sender )
2  {
3      CCLog("stratGame");
4  
5      CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, WelcomeLayer::scene() ));
6  
7  }

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

aboutlayer.cpp

 1  #include "aboutlayer.h"
 2  #include "welcomelayer.h"
 3  #include "config.h"
 4  
 5  AboutLayer::AboutLayer()
 6  {
 7  }
 8  
 9  AboutLayer::~AboutLayer()
10  {
11  }
12  
13  /**
14   *初始化方法
15   */
16  bool AboutLayer::init()
17  {
18      bool sRect = false;
19  
20      do
21      {
22          CC_BREAK_IF(!BaserLayer::init());
23  
24          setViews();
25  
26          sRect = true;
27  
28      }while(0);
29  
30      return sRect;
31  }
32  
33  void AboutLayer::setViews()
34  {
35      setBackGroundImage("loading.png");
36  
37      CCSprite *title = CCSprite::create("menuTitle.png",CCRectMake(0,38,138,30));
38      title->setAnchorPoint(ccp(0.5,1));
39      title->setPosition(ccp(getWinSize().width/2,getWinSize().height-20));
40  
41      this->addChild(title);
42  
43      CCLabelBMFont *des = CCLabelBMFont::create("this Gmae is recorded by Study","arial-14.fnt");
44      des->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
45  
46      this->addChild(des);
47  
48      CCLabelBMFont *back = CCLabelBMFont::create("back","arial-14.fnt");
49  
50      back->setScale(1.25f);
51      CCMenuItemLabel *backLable =  CCMenuItemLabel::create(back,this,menu_selector(AboutLayer::backCallback));
52      backLable->setAnchorPoint(ccp(0.5,1));
53      backLable->setPosition(ccp(getWinSize().width/2,30));
54  
55      CCMenu *menu = CCMenu::create(backLable,NULL);
56      menu->setPosition(CCPointZero);
57  
58      this->addChild(menu);
59  }
60  
61  CCScene * AboutLayer::scene()
62  {
63      CCScene *scene = NULL;
64  
65      do
66      {
67          scene = CCScene::create();
68          CC_BREAK_IF(!scene);
69  
70          AboutLayer *layer = AboutLayer::create();
71          CC_BREAK_IF(!layer);
72  
73          scene->addChild(layer);
74  
75      }while(0);
76  
77      return scene;
78  }
79  
80  void AboutLayer::backCallback(CCObject *sender )
81  {
82  #ifdef DEBUG
83      CCLog("stratGame");
84  #endif
85  
86      CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, WelcomeLayer::scene() ));
87  
88  }
89

最后附上游戏的截图：

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

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

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