實例介紹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)代碼。