实例介绍Cocos2d-x精灵菜单和图片菜单

精灵菜单类是MenuItemSprite，图片菜单类是MenuItemImage。因为MenuItemImage继承于MenuItemSprite，因此图片菜单也属于精灵菜单。为何叫精灵菜单呢？那是由于这些菜单项具备精灵的特色，咱们可让精灵动起来，具体使用时候是把一个精灵放置到菜单中做为菜单项。

精灵菜单类MenuItemSprite，它的其中一个建立函数create定义以下：

[html] view plaincopy

1. <span style="font-size:14px;">static MenuItemSprite* create  ( Node * normalSprite,  //菜单项正常显示时候的精灵  

2.  Node *  selectedSprite,                                               //选择菜单项时候的精灵  

3.  Node *  disabledSprite,                                               //菜单项禁用时候的精灵  

4.  const ccMenuCallback & callback                             //菜单操做的回调函数指针  

5.  )</span>  

使用MenuItemSprite比较麻烦，在建立MenuItemSprite以前要先建立三种状态时候的精灵（即normalSprite、selectedSprite和disabledSprite）。MenuItemSprite还有一些create函数，在这些函数中能够省略disabledSprite参数。

若是精灵是由图片构成的，咱们可使用图片菜单MenuItemImage实现与精灵菜单一样的效果。MenuItemImage类的其中一个建立函数create定义以下：

[html] view plaincopy

1. <span style="font-size:14px;">static MenuItemImage* create  ( const std::string &  normalImage, //菜单项正常显示时候的图片  

2.  const std::string & selectedImage,                                                        //选择菜单项时候的图片  

3.  const std::string & disabledImage,                                              //菜单项禁用时候的图片  

4.  const ccMenuCallback & callback                                                        //菜单操做的回调函数指针  

5.  )</span>  

MenuItemImage还有一些create函数，在这些函数中能够省略disabledImage参数。

咱们经过一个实例介绍一下精灵菜单和图片菜单的使用，这个实例以下图所示。

下面咱们看看HelloWorldScene.cpp中init函数以下：

[html] view plaincopy

1. <span style="font-size:14px;">bool HelloWorld::init()  

2. {  

3.    if ( !Layer::init() )  

4.    {  

5.        return false;  

6.    }  

7.      

8.    Size visibleSize = Director::getInstance()->getVisibleSize();  

9.    Point origin = Director::getInstance()->getVisibleOrigin();  

10.    

11.    Sprite *bg = Sprite::create("menu/background.png");     

12.    bg->setPosition(Point(origin.x + visibleSize.width/2,  

13.                              origin.y + visibleSize.height/2));  

14.    this->addChild(bg);  

15.    

16.     //开始精灵  

17.    Sprite *startSpriteNormal =Sprite::create("menu/start-up.png");                                     ①  

18.    Sprite *startSpriteSelected =Sprite::create("menu/start-down.png");                                      ②  

19.    

20.     MenuItemSprite*startMenuItem = MenuItemSprite::create(startSpriteNormal,  

21.                                         startSpriteSelected,  

22.          CC_CALLBACK_1(HelloWorld::menuItemStartCallback,this));                                     ③  

23.     startMenuItem->setPosition(Director::getInstance()->convertToGL(Point(700,170)));             ④  

24.      

25.     //设置图片菜单  

26.   MenuItemImage *settingMenuItem = MenuItemImage::create(  

27.                             "menu/setting-up.png",  

28.                             "menu/setting-down.png",  

29.                              CC_CALLBACK_1(HelloWorld::menuItemSettingCallback,this));             ⑤  

30.     settingMenuItem->setPosition(Director::getInstance()->convertToGL(Point(480,400)));                  ⑥  

31.      

32.     //帮助图片菜单  

33.    MenuItemImage *helpMenuItem = MenuItemImage::create(  

34.                             "menu/help-up.png",  

35.                             "menu/help-down.png",  

36.                                   CC_CALLBACK_1(HelloWorld::menuItemHelpCallback,this));                      ⑦  

37.     helpMenuItem->setPosition(Director::getInstance()->convertToGL(Point(860,480)));            ⑧  

38.    

39.     Menu*mu = Menu::create(startMenuItem, settingMenuItem, helpMenuItem, NULL);                  ⑨  

40.     mu->setPosition(Point::ZERO);                                                                                                    ⑩  

41.     this->addChild(mu);  

42.    

43.    return true;  

44. }</span>  

在上面的代码中第①～②行是建立两种不一样状态的精灵，第③行代码是建立精灵菜单MenuItemSprite对象，第④行代码是设置开始菜单项（startMenuItem）位置，注意这个坐标是(700,170)，因为(700, 170)的坐标是UI坐标，须要转换为OpenGL坐标。

第⑤和⑦行代码是建立图片菜单MenuItemImage对象，第⑥和⑧行代码是设置图片菜单位置。第⑨行代码是菜单Menu对象，第⑩行代码是菜单的位置mu->setPosition(Point::ZERO)，设置的位置是Point::ZERO，它等价于Point(0.0f,0.0f)。

还有因为背景图片大小是1136 x 640，而Win32默认窗口大小是960 x 640，咱们须要从新设置大小，修改AppDelegate.cpp代码以下：

[html] view plaincopy

1. bool HelloWorld::init()  

2. {  

3.    if ( !Layer::init() )  

4.    {  

5.        return false;  

6.    }  

7.      

8.    Size visibleSize = Director::getInstance()->getVisibleSize();  

9.    Point origin = Director::getInstance()->getVisibleOrigin();  

10.    

11.    Sprite *bg = Sprite::create("menu/background.png");     

12.    bg->setPosition(Point(origin.x + visibleSize.width/2,  

13.                              origin.y + visibleSize.height/2));  

14.    this->addChild(bg);  

15.    

16.     //开始精灵  

17.    Sprite *startSpriteNormal =Sprite::create("menu/start-up.png");                                     ①  

18.    Sprite *startSpriteSelected =Sprite::create("menu/start-down.png");                                      ②  

19.    

20.     MenuItemSprite*startMenuItem = MenuItemSprite::create(startSpriteNormal,  

21.                                         startSpriteSelected,  

22.          CC_CALLBACK_1(HelloWorld::menuItemStartCallback,this));                                     ③  

23.     startMenuItem->setPosition(Director::getInstance()->convertToGL(Point(700,170)));             ④  

24.      

25.     //设置图片菜单  

26.   MenuItemImage *settingMenuItem = MenuItemImage::create(  

27.                             "menu/setting-up.png",  

28.                             "menu/setting-down.png",  

29.                              CC_CALLBACK_1(HelloWorld::menuItemSettingCallback,this));             ⑤  

30.     settingMenuItem->setPosition(Director::getInstance()->convertToGL(Point(480,400)));                  ⑥  

31.      

32.     //帮助图片菜单  

33.    MenuItemImage *helpMenuItem = MenuItemImage::create(  

34.                             "menu/help-up.png",  

35.                             "menu/help-down.png",  

36.                                   CC_CALLBACK_1(HelloWorld::menuItemHelpCallback,this));                      ⑦  

37.     helpMenuItem->setPosition(Director::getInstance()->convertToGL(Point(860,480)));            ⑧  

38.    

39.     Menu*mu = Menu::create(startMenuItem, settingMenuItem, helpMenuItem, NULL);                  ⑨  

40.     mu->setPosition(Point::ZERO);                                                                                                    ⑩  

41.     this->addChild(mu);  

42.    

43.    return true;  

44. }  

在上面的代码中第①～②行是建立两种不一样状态的精灵，第③行代码是建立精灵菜单MenuItemSprite对象，第④行代码是设置开始菜单项（startMenuItem）位置，注意这个坐标是(700,170)，因为(700, 170)的坐标是UI坐标，须要转换为OpenGL坐标。

第⑤和⑦行代码是建立图片菜单MenuItemImage对象，第⑥和⑧行代码是设置图片菜单位置。第⑨行代码是菜单Menu对象，第⑩行代码是菜单的位置mu->setPosition(Point::ZERO)，设置的位置是Point::ZERO，它等价于Point(0.0f,0.0f)。

还有因为背景图片大小是1136 x 640，而Win32默认窗口大小是960 x 640，咱们须要从新设置大小，修改AppDelegate.cpp代码以下：

[html] view plaincopy

1. <pre code_snippet_id="340364" snippet_file_name="blog_20140512_5_4431376" name="code" class="html">boolAppDelegate::applicationDidFinishLaunching() {  

2.    // initialize director  

3.    auto director = Director::getInstance();  

4.    auto glview = director->getOpenGLView();  

5.    if(!glview) {  

6.        glview = GLView::create("My Game");  

7.              glview->setFrameSize(1136, 640);                                                                              ①  

8.        director->setOpenGLView(glview);  

9.    }  

10.    

11. … …  

12. }</pre>  

[html] view plaincopy

1.   

咱们须要在第①行添加glview->setFrameSize(1136, 640)代码。