實例介紹Cocos2d-x精靈菜單和圖片菜單

精靈菜單類是MenuItemSprite圖片菜單類是MenuItemImage。由於MenuItemImage繼承於MenuItemSprite所以圖片菜單也屬於精靈菜單。為什麼叫精靈菜單呢那是因為這些菜單項具有精靈的特點我們可以讓精靈動起來具體使用時候是把一個精靈放置到菜單中作為菜單項。

精靈菜單類MenuItemSprite它的其中一個創建函數create定義如下

static MenuItemSprite* create  ( Node * normalSprite,  //菜單項正常顯示時候的精靈
 Node *  selectedSprite,                                               //選擇菜單項時候的精靈
 Node *  disabledSprite,                                               //菜單項禁用時候的精靈
 const ccMenuCallback & callback                             //菜單操作的回調函數指針
 )

使用MenuItemSprite比較麻煩在創建MenuItemSprite之前要先創建三種狀態時候的精靈即normalSprite、selectedSprite和disabledSprite。MenuItemSprite還有一些create函數在這些函數中可以省略disabledSprite參數。

如果精靈是由圖片構成的我們可以使用圖片菜單MenuItemImage實現與精靈菜單同樣的效果。MenuItemImage類的其中一個創建函數create定義如下

static MenuItemImage* create  ( const std::string &  normalImage, //菜單項正常顯示時候的圖片
 const std::string & selectedImage,                                                        //選擇菜單項時候的圖片
 const std::string & disabledImage,                                              //菜單項禁用時候的圖片
 const ccMenuCallback & callback                                                        //菜單操作的回調函數指針
 )

MenuItemImage還有一些create函數在這些函數中可以省略disabledImage參數。

我們通過一個實例介紹一下精靈菜單和圖片菜單的使用這個實例如下圖所示。

下麵我們看看HelloWorldScene.cpp中init函數如下

bool HelloWorld::init()
{
   if ( !Layer::init() )
   {
       return false;
   }
   
   Size visibleSize = Director::getInstance()->getVisibleSize();
   Point origin = Director::getInstance()->getVisibleOrigin();
 
   Sprite *bg = Sprite::create("menu/background.png");   
   bg->setPosition(Point(origin.x + visibleSize.width/2,
                             origin.y + visibleSize.height/2));
   this->addChild(bg);
 
    //開始精靈
   Sprite *startSpriteNormal =Sprite::create("menu/start-up.png");                                     ①
   Sprite *startSpriteSelected =Sprite::create("menu/start-down.png");                                      ②
 
    MenuItemSprite*startMenuItem = MenuItemSprite::create(startSpriteNormal,
                                        startSpriteSelected,
         CC_CALLBACK_1(HelloWorld::menuItemStartCallback,this));                                     ③
    startMenuItem->setPosition(Director::getInstance()->convertToGL(Point(700,170)));             ④
   
    //設置圖片菜單
  MenuItemImage *settingMenuItem = MenuItemImage::create(
                            "menu/setting-up.png",
                            "menu/setting-down.png",
                             CC_CALLBACK_1(HelloWorld::menuItemSettingCallback,this));             ⑤
    settingMenuItem->setPosition(Director::getInstance()->convertToGL(Point(480,400)));                  ⑥
   
    //幫助圖片菜單
   MenuItemImage *helpMenuItem = MenuItemImage::create(
                            "menu/help-up.png",
                            "menu/help-down.png",
                                  CC_CALLBACK_1(HelloWorld::menuItemHelpCallback,this));                      ⑦
    helpMenuItem->setPosition(Director::getInstance()->convertToGL(Point(860,480)));            ⑧
 
    Menu*mu = Menu::create(startMenuItem, settingMenuItem, helpMenuItem, NULL);                  ⑨
    mu->setPosition(Point::ZERO);                                                                                                    ⑩
    this->addChild(mu);
 
   return true;
}

在上麵的代碼中第①②行是創建兩種不同狀態的精靈第③行代碼是創建精靈菜單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代碼如下

bool HelloWorld::init()
{
   if ( !Layer::init() )
   {
       return false;
   }
   
   Size visibleSize = Director::getInstance()->getVisibleSize();
   Point origin = Director::getInstance()->getVisibleOrigin();
 
   Sprite *bg = Sprite::create("menu/background.png");   
   bg->setPosition(Point(origin.x + visibleSize.width/2,
                             origin.y + visibleSize.height/2));
   this->addChild(bg);
 
    //開始精靈
   Sprite *startSpriteNormal =Sprite::create("menu/start-up.png");                                     ①
   Sprite *startSpriteSelected =Sprite::create("menu/start-down.png");                                      ②
 
    MenuItemSprite*startMenuItem = MenuItemSprite::create(startSpriteNormal,
                                        startSpriteSelected,
         CC_CALLBACK_1(HelloWorld::menuItemStartCallback,this));                                     ③
    startMenuItem->setPosition(Director::getInstance()->convertToGL(Point(700,170)));             ④
   
    //設置圖片菜單
  MenuItemImage *settingMenuItem = MenuItemImage::create(
                            "menu/setting-up.png",
                            "menu/setting-down.png",
                             CC_CALLBACK_1(HelloWorld::menuItemSettingCallback,this));             ⑤
    settingMenuItem->setPosition(Director::getInstance()->convertToGL(Point(480,400)));                  ⑥
   
    //幫助圖片菜單
   MenuItemImage *helpMenuItem = MenuItemImage::create(
                            "menu/help-up.png",
                            "menu/help-down.png",
                                  CC_CALLBACK_1(HelloWorld::menuItemHelpCallback,this));                      ⑦
    helpMenuItem->setPosition(Director::getInstance()->convertToGL(Point(860,480)));            ⑧
 
    Menu*mu = Menu::create(startMenuItem, settingMenuItem, helpMenuItem, NULL);                  ⑨
    mu->setPosition(Point::ZERO);                                                                                                    ⑩
    this->addChild(mu);
 
   return true;
}

還有由於背景圖片大小是1136 x 640而Win32默認窗口大小是960 x 640我們需要重新設置大小修改AppDelegate.cpp代碼如下

boolAppDelegate::applicationDidFinishLaunching() {
   // initialize director
   auto director = Director::getInstance();
   auto glview = director->getOpenGLView();
   if(!glview) {
       glview = GLView::create("My Game");
             glview->setFrameSize(1136, 640);                                                                              ①
       director->setOpenGLView(glview);
   }
 
… …
}

我們需要在第①行添加glview->setFrameSize(1136, 640)代碼。

上述代碼中的第①行定義的函數menuOkCallback是在用戶在設置場景點擊“OK”菜單時候回調。第②行代碼是使用popScene函數返回HelloWorld場景。

更多內容請關注最新Cocos圖書《Cocos2d-x實戰 C++卷》

本書交流討論網站https://www.cocoagame.net

更多精彩視頻課程請關注智捷課堂Cocos課程https://v.51work6.com

歡迎加入Cocos2d-x技術討論群257760386

《Cocos2d-x實戰 C++卷》現已上線各大商店均已開售

京東https://item.jd.com/11584534.html

亞馬遜https://www.amazon.cn/Cocos2d-x%E5%AE%9E%E6%88%98-C-%E5%8D%B7-%E5%85%B3%E4%B8%9C%E5%8D%87/dp/B00PTYWTLU

當當https://product.dangdang.com/23606265.html

互動出版網https://product.china-pub.com/3770734

《Cocos2d-x實戰 C++卷》源碼及樣章下載地址