COCOS學習筆記--Menu菜單系統

Cocos2d-x中有一個Menu菜單系統，你可以在遊戲開發中創建菜單。菜單是什麼呢？我們使用各種軟件都會接觸到菜單，比如VS上的菜單欄：

 

我對菜單的理解是：菜單由一系列菜單項組成（當然也可以只有一個），每個菜單項都可以顯示文字，並且像按鈕一樣具備交互性，點擊可以觸發其相關功能。就拿上面的VS的菜單欄來說，這個菜單欄就是一個菜單，FILE、EDIT、VIEW這些都是菜單上的菜單項，我們點擊它們就會觸發其各自的相關邏輯功能。

在cocos中，菜單類CCMenu是CCLayer的子類，但其本身並不具備菜單屬性，而是作爲一個容器，將一些具體類型的MenuItem菜單項添加進去來實現菜單功能的。在開發中，如果我們想要使用菜單，一般的步驟是：

1. 創建Menu，設置Menu的位置等屬性；
2. 創建MenuItem，設置MenuItem的位置等屬性；
3. MenuItem加入到Menu；
4. Menu加入到層。

關係圖如下：

 

MenuItem一共有4種創建方式：

• 通過Label創建MenuItem
• 通過文字創建MenuItem
• 通過Sprite創建MenuItem
• 通過圖片名稱創建MenuItem

我們分別來實現這幾種創建MenuItem的方式：

一.通過Label創建MenuItem

此方法我們要先創建出個Label，然後在通過Label來創建MenuItemLabel。

新建一個cocos工程，還是在HelloWorldScene類init()方法中進行修改：

//創建Menu
auto _menu = Menu::create( );
//設置Menu位置屬性
_menu->setPosition(Vec2::ZERO);

//創建Label
auto _label = Label::createWithSystemFont("MenuItemLabel","Arial",30);

//通過Label創建MenuItem
//參數：1.label 2.回調函數
auto _menuItemLabel = MenuItemLabel::create(_label,CC_CALLBACK_1(HelloWorld::menuItemCallback,this));
//設置MenuItem位置屬性
_menuItemLabel->setPosition(Vec2(480,320));

//將MenuItem添加到Menu上
_menu->addChild(_menuItemLabel);

//將Menu添加到父節點層上
this->addChild(_menu);

此外，我們需要聲明和實現MenuItem的回調函數，這裏只做個打印：

//聲明 menuItem回調函數
//void menuItemCallback(cocos2d::Ref * ref);

//實現 menuItem回調函數
void HelloWorld::menuItemCallback(cocos2d::Ref * ref)
{
	log("menuItemCallback!");
}

運行效果：

 

當我們點擊菜單項時，會執行其綁定的回調函數，可以看到以下打印輸出：

 

二.通過文字創建MenuItem

我們在以上工程中修改代碼：

我們直接調用MenuItemFont類的create()方法即可：

//創建Menu
auto _menu = Menu::create( );
//設置Menu位置屬性
_menu->setPosition(Vec2::ZERO);

//創建menuItemFont
//參數：1.文字 2.回調函數
*auto _menuItemFont = MenuItemFont::create("MenuItemFont", CC_CALLBACK_1(HelloWorld::menuItemCallback, this));
//設置menuItemFont位置屬性
_menuItemFont->setPosition(Vec2(480, 200));

//將menuItemFont添加到Menu上
_menu->addChild(_menuItemFont);

//將Menu添加到父節點層上
this->addChild(_menu);

運行效果：

點擊菜單項同樣會調用回調函數有打印輸出。

三.通過Sprite創建MenuItem

此方法需要先創建2個精靈，分別爲菜單項點擊態和非點擊態，然後通過創建的精靈來創建MenuItemSprite。

代碼如下：

//創建Menu
auto _menu = Menu::create();
//設置Menu位置屬性
_menu->setPosition(Vec2::ZERO);

//創建精靈，分別爲正常和按下時顯示
auto _spriteNormal = Sprite::create("Button_Normal.png");
auto _spritePress = Sprite::create("Button_Press.png");

//創建menuItemSprite
auto _menuItemSprite = MenuItemSprite::create(_spriteNormal, _spritePress, CC_CALLBACK_1(HelloWorld::menuItemCallback, this));
//設置menuItemSprite位置屬性
_menuItemSprite->setPosition(Vec2(300, 320));

//將menuItemSprite添加到Menu上
_menu->addChild(_menuItemSprite);

//將Menu添加到父節點層上
this->addChild(_menu);

運行效果：

非點擊態：

 

點擊態（此時執行回調函數有打印輸出）：

 

四．通過圖片名稱創建MenuItem

此方法同樣需要兩張圖片分別用於菜單項的正常和按下時顯示，與前一種方法的不同之處在於不用創建精靈，而是通過圖片名稱直接創建menuItemImage。

//創建Menu
auto _menu = Menu::create();
//設置Menu位置屬性
_menu->setPosition(Vec2::ZERO);

///通過圖片名直接創建MenuItem
auto _menuItemImage = MenuItemImage::create("Button_Normal.png", "Button_Press.png", CC_CALLBACK_1(HelloWorld::menuItemCallback, this));
_menuItemImage->setPosition(Vec2(700, 320));

//將menuItemImage添加到Menu上
_menu->addChild(_menuItemImage);

//將Menu添加到父節點層上
this->addChild(_menu);

運行效果與前一種一樣，這裏就不贅述了。

 

好了，以上便是MenuItem的4種創建方法，我們需要注意的是這裏分別調用了MenuItemLabel、MenuItemFont、MenuItemSprite和MenuItemImage4個類的create()方法來創建的menuItem。

 

 

 

以上。