Learning Cocos2d-x for WP8（5）——詳解Menu菜單

本文轉載自查看原文 2013-03-21 15:44 2763 Cocos2d-x/ WP8

C#(wp7)兄弟篇Learning Cocos2d-x for XNA（5）——詳解Menu菜單

菜單是游戲必不可少的元素，菜單的實現，無非就是文字或者圖片。

CCLabel元素更多的時候是實現說明的作用，用於導航性的菜單，更多時候是用CCMenu。

主要的幾個Menu相關的元素的繼承關系。

工程文件：MenuTest.h和MenuTest.cpp

CCMenuItemFont

核心語句

 1     //CCMenuItemFont
 2     CCMenuItemFont::setFontName("American Typewriter");//字體紋理
 3     CCMenuItemFont::setFontSize(30);
 4     CCMenuItemFont* menuItemFont1=CCMenuItemFont::itemFromString("START");
 5     CCMenuItemFont* menuItemFont2=CCMenuItemFont::itemFromString("QUIT");
 6 
 7     CCMenu* menu1=CCMenu::menuWithItems(menuItemFont1,menuItemFont2,NULL);
 8     menu1->alignItemsVertically();//菜單垂直排列
 9     menu1->setPosition(100,400);
10     this->addChild(menu1);

注意menuWithItems(菜單項列表)中參數最后為“NULL”，這是個技術要求，欠缺會編譯錯誤。

CCMenuItemSprite

添加三張圖片至核心語句Assets文件夾下

核心語句

 1     //CCMenuItemSprite
 2     CCSprite* pSpriteNormal1=CCSprite::spriteWithFile("btn-about-normal.png");
 3     CCSprite* pSpriteSelected1=CCSprite::spriteWithFile("btn-about-selected.png");
 4     CCMenuItemSprite* menuItemSprite1=CCMenuItemSprite::itemFromNormalSprite(pSpriteNormal1,pSpriteSelected1,this,menu_selector(MenuTestLayer::btnAboutMenuCallback2));
 5     char imgMenuSprite[]="MenuSpritePlay.png";
 6     CCSprite* pSpriteNormal2=CCSprite::spriteWithFile(imgMenuSprite,CCRectMake(0,0,125,42)); 
 7     CCSprite* pSpriteSelected2=CCSprite::spriteWithFile(imgMenuSprite,CCRectMake(0,42,125,42));
 8     CCMenuItemSprite* menuItemSprite2=CCMenuItemSprite::itemFromNormalSprite(pSpriteNormal2,pSpriteSelected2,this,menu_selector(MenuTestLayer::btnPlayMenuCallback2));
 9 
10     CCMenu* menu2=CCMenu::menuWithItems(menuItemSprite1,menuItemSprite2,NULL);
11     menu2->alignItemsHorizontally();//菜單水平排列
12     menu2->setPosition(400,400);
13     this->addChild(menu2);

Normal狀態：未點擊菜單按鈕時呈現的狀態。

Selected狀態：當點中菜單時選擇的狀態

注意第二種的實現方法，兩個按鈕在同一張圖片中，顯示一個按鈕。

CCRectMake()起到決定性作用，四個參數為x、y、width、high。

x，y為圖片從左上角為（0，0）起始坐標點的二維坐標，width為截取的圖片的寬度，high為高度。

此獲取一張圖片下的部分圖片方法，會在游戲中經常用到。

CCMenuItemImage

CCMenuItemImage與CCMenuItemSprite的實現方法差不多。

核心代碼

1     //CCMenuItemImage
2     CCMenuItemFont* title3=CCMenuItemFont::itemFromString("MenuItemImageTitle");//標題
3     title3->setIsEnabled(false);
4     CCMenuItemImage* pMenuItemImage1=CCMenuItemImage::itemFromNormalImage("btn-about-normal.png","btn-about-selected.png",this,menu_selector(MenuTestLayer::btnAboutMenuCallback3));
5 
6     CCMenu* menu3=CCMenu::menuWithItems(title3,pMenuItemImage1,NULL);
7     menu3->alignItemsVertically();//菜單垂直排列
8     menu3->setPosition(180,280);
9     this->addChild(menu3);

CCMenuItemToggle

開關按鈕，有時候，這種按鈕的實現會使用戶體驗更好

添加兩張圖片至Assets文件夾

常規的Toggle是文字，但也可用圖片，點擊切換哦。

核心代碼

 1     //CCMenuItemToggle
 2     CCMenuItemFont::setFontName("American Typewriter");
 3     CCMenuItemFont::setFontSize(30);
 4     CCMenuItemFont* titleSound = CCMenuItemFont::itemFromString("Sound");
 5     titleSound->setIsEnabled(false);
 6     CCMenuItemToggle* menuItemToggle1=CCMenuItemToggle::itemWithTarget(this,
 7         menu_selector(MenuTestLayer::menuItemToggle1Callback),
 8         CCMenuItemFont::itemFromString("On"),
 9         CCMenuItemFont::itemFromString("Off"),
10         NULL);
11     //圖片Toggle
12     CCMenuItemFont* titleBackground = CCMenuItemFont::itemFromString("Background");
13     titleBackground->setIsEnabled(false);
14     CCMenuItemToggle* menuItemToggle2=CCMenuItemToggle::itemWithTarget(this,
15         menu_selector(MenuTestLayer::menuItemToggle2Callback),
16         CCMenuItemSprite::itemFromNormalSprite(CCSprite::spriteWithFile("bg_Sea1Mini.png"),CCSprite::spriteWithFile("bg_Sea1Mini.png")),
17         CCMenuItemSprite::itemFromNormalSprite(CCSprite::spriteWithFile("bg_Sea2Mini.jpg"),CCSprite::spriteWithFile("bg_Sea2Mini.jpg")),
18         NULL);
19 
20     CCMenu* menu4=CCMenu::menuWithItems(titleSound,menuItemToggle1,titleBackground,menuItemToggle2,NULL);
21     menu4->alignItemsInColumns(2,2,NULL);
22     menu4->setPosition(580,280);
23     this->addChild(menu4);

CCLabelBMFont顯示中文菜單

注意將.cpp源文件“高級保存選項”編碼為“Unicode（UTF-8無簽名）-代碼頁65001”

核心代碼

 1     //CCLabelBMFont顯示中文菜單（注意“高級保存選項”編碼為“Unicode（UTF-8無簽名）-代碼頁65001”）
 2     CCLabelBMFont* pLabelBMFFont1=CCLabelBMFont::labelWithString("國強", "fonts/YaHeiChinese.fnt", CCTextAlignmentRight, 32);
 3     CCMenuItemLabel* menuItemLabel1=CCMenuItemLabel::itemWithLabel(pLabelBMFFont1,this,menu_selector(MenuTestLayer::menuItemLabel1Callback));
 4 
 5     CCLabelBMFont* pLabelBMFFont2=CCLabelBMFont::labelWithString("菜單","fonts/YaHeiChinese.fnt");
 6     CCMenuItemLabel* menuItemLabel2=CCMenuItemLabel::itemWithLabel(pLabelBMFFont2,this,menu_selector(MenuTestLayer::menuItemLabel2Callback));
 7 
 8     CCMenu* menu5=CCMenu::menuWithItems(menuItemLabel1,menuItemLabel2,NULL);
 9     menu5->alignItemsVertically();
10     menu5->setPosition(400,150);
11     this->addChild(menu5);

其他部分代碼為菜單點擊事件Callbac函數

完整代碼

MenuTest.h

 1 #ifndef _MENU_TEST_H_
 2 #define _MENU_TEST_H_
 3 
 4 #include "cocos2d.h"
 5 
 6 using namespace cocos2d;
 7 
 8 class MenuTestScene:public CCScene
 9 {
10 public:
11     MenuTestScene();
12     ~MenuTestScene();
13     virtual void onEnter();
14 };
15 
16 class MenuTestLayer:public CCLayer
17 {
18 public:
19      
20     MenuTestLayer();
21     ~MenuTestLayer();
22 
23 public:
24     //CCMenuItemSprite
25     void btnAboutMenuCallback2(CCObject* pSender);
26     void btnPlayMenuCallback2(CCObject* pSender);
27 
28     //CCMenuItemImage
29     void btnAboutMenuCallback3(CCObject* pSender);
30 
31     //menuItemToggle1
32     void menuItemToggle1Callback(CCObject* pSender);
33     void menuItemToggle2Callback(CCObject* pSender);
34 
35     //CCMenuItemLabel
36     void menuItemLabel1Callback(CCObject* pSender);
37     void menuItemLabel2Callback(CCObject* pSender);
38 };
39 
40 #endif

MenuTest.cpp

  1 #include "pch.h"
  2 #include "Classes\MenuTest.h"
  3 
  4 //---------------------------------------
  5 //
  6 //MenuTsetLayer
  7 //
  8 //---------------------------------------
  9 MenuTestLayer::MenuTestLayer()
 10 {
 11     //CCMenuItemFont
 12     CCMenuItemFont::setFontName("American Typewriter");//字體紋理
 13     CCMenuItemFont::setFontSize(30);
 14     CCMenuItemFont* menuItemFont1=CCMenuItemFont::itemFromString("START");
 15     CCMenuItemFont* menuItemFont2=CCMenuItemFont::itemFromString("QUIT");
 16 
 17     CCMenu* menu1=CCMenu::menuWithItems(menuItemFont1,menuItemFont2,NULL);
 18     menu1->alignItemsVertically();//菜單垂直排列
 19     menu1->setPosition(100,400);
 20     this->addChild(menu1);
 21 
 22     //CCMenuItemSprite
 23     CCSprite* pSpriteNormal1=CCSprite::spriteWithFile("btn-about-normal.png");
 24     CCSprite* pSpriteSelected1=CCSprite::spriteWithFile("btn-about-selected.png");
 25     CCMenuItemSprite* menuItemSprite1=CCMenuItemSprite::itemFromNormalSprite(pSpriteNormal1,pSpriteSelected1,this,menu_selector(MenuTestLayer::btnAboutMenuCallback2));
 26     char imgMenuSprite[]="MenuSpritePlay.png";
 27     CCSprite* pSpriteNormal2=CCSprite::spriteWithFile(imgMenuSprite,CCRectMake(0,0,125,42)); 
 28     CCSprite* pSpriteSelected2=CCSprite::spriteWithFile(imgMenuSprite,CCRectMake(0,42,125,42));
 29     CCMenuItemSprite* menuItemSprite2=CCMenuItemSprite::itemFromNormalSprite(pSpriteNormal2,pSpriteSelected2,this,menu_selector(MenuTestLayer::btnPlayMenuCallback2));
 30 
 31     CCMenu* menu2=CCMenu::menuWithItems(menuItemSprite1,menuItemSprite2,NULL);
 32     menu2->alignItemsHorizontally();//菜單水平排列
 33     menu2->setPosition(400,400);
 34     this->addChild(menu2);
 35 
 36     //CCMenuItemImage
 37     CCMenuItemFont* title3=CCMenuItemFont::itemFromString("MenuItemImageTitle");//標題
 38     title3->setIsEnabled(false);
 39     CCMenuItemImage* pMenuItemImage1=CCMenuItemImage::itemFromNormalImage("btn-about-normal.png","btn-about-selected.png",this,menu_selector(MenuTestLayer::btnAboutMenuCallback3));
 40 
 41     CCMenu* menu3=CCMenu::menuWithItems(title3,pMenuItemImage1,NULL);
 42     menu3->alignItemsVertically();//菜單垂直排列
 43     menu3->setPosition(180,280);
 44     this->addChild(menu3);
 45 
 46     //CCMenuItemToggle
 47     CCMenuItemFont::setFontName("American Typewriter");
 48     CCMenuItemFont::setFontSize(30);
 49     CCMenuItemFont* titleSound = CCMenuItemFont::itemFromString("Sound");
 50     titleSound->setIsEnabled(false);
 51     CCMenuItemToggle* menuItemToggle1=CCMenuItemToggle::itemWithTarget(this,
 52         menu_selector(MenuTestLayer::menuItemToggle1Callback),
 53         CCMenuItemFont::itemFromString("On"),
 54         CCMenuItemFont::itemFromString("Off"),
 55         NULL);
 56     //圖片Toggle
 57     CCMenuItemFont* titleBackground = CCMenuItemFont::itemFromString("Background");
 58     titleBackground->setIsEnabled(false);
 59     CCMenuItemToggle* menuItemToggle2=CCMenuItemToggle::itemWithTarget(this,
 60         menu_selector(MenuTestLayer::menuItemToggle2Callback),
 61         CCMenuItemSprite::itemFromNormalSprite(CCSprite::spriteWithFile("bg_Sea1Mini.png"),CCSprite::spriteWithFile("bg_Sea1Mini.png")),
 62         CCMenuItemSprite::itemFromNormalSprite(CCSprite::spriteWithFile("bg_Sea2Mini.jpg"),CCSprite::spriteWithFile("bg_Sea2Mini.jpg")),
 63         NULL);
 64 
 65     CCMenu* menu4=CCMenu::menuWithItems(titleSound,menuItemToggle1,titleBackground,menuItemToggle2,NULL);
 66     menu4->alignItemsInColumns(2,2,NULL);
 67     menu4->setPosition(580,280);
 68     this->addChild(menu4);
 69 
 70     //CCLabelBMFont顯示中文菜單（注意“高級保存選項”編碼為“Unicode（UTF-8無簽名）-代碼頁65001”）
 71     CCLabelBMFont* pLabelBMFFont1=CCLabelBMFont::labelWithString("國強", "fonts/YaHeiChinese.fnt", CCTextAlignmentRight, 32);
 72     CCMenuItemLabel* menuItemLabel1=CCMenuItemLabel::itemWithLabel(pLabelBMFFont1,this,menu_selector(MenuTestLayer::menuItemLabel1Callback));
 73 
 74     CCLabelBMFont* pLabelBMFFont2=CCLabelBMFont::labelWithString("菜單","fonts/YaHeiChinese.fnt");
 75     CCMenuItemLabel* menuItemLabel2=CCMenuItemLabel::itemWithLabel(pLabelBMFFont2,this,menu_selector(MenuTestLayer::menuItemLabel2Callback));
 76 
 77     CCMenu* menu5=CCMenu::menuWithItems(menuItemLabel1,menuItemLabel2,NULL);
 78     menu5->alignItemsVertically();
 79     menu5->setPosition(400,150);
 80     this->addChild(menu5);
 81 }
 82 
 83 MenuTestLayer::~MenuTestLayer()
 84 {}
 85 
 86 //CCMenuItemSprite
 87 void MenuTestLayer::btnAboutMenuCallback2(CCObject* sender)
 88 {}
 89 
 90 void MenuTestLayer::btnPlayMenuCallback2(CCObject* sender)
 91 {}
 92 
 93 //CCMenuItemImage
 94 void MenuTestLayer::btnAboutMenuCallback3(CCObject* sender)
 95 {}
 96 
 97 //CCMenuItemToggle
 98 void MenuTestLayer::menuItemToggle1Callback(CCObject* sender)
 99 {}
100 
101 void MenuTestLayer::menuItemToggle2Callback(CCObject* sender)
102 {}
103 
104 //CCMenuItemLabel
105 void MenuTestLayer::menuItemLabel1Callback(CCObject* sender)
106 {}
107 
108 void MenuTestLayer::menuItemLabel2Callback(CCObject* sender)
109 {}
110 
111 //---------------------------------------
112 //
113 //MenuTestScene
114 //
115 //---------------------------------------
116 MenuTestScene::MenuTestScene()
117 {}
118 
119 MenuTestScene::~MenuTestScene()
120 {}
121 
122 void MenuTestScene::onEnter()
123 {
124     CCScene::onEnter();
125     CCLayer* pMenuTestLayer=new MenuTestLayer();
126     this->addChild(pMenuTestLayer);
127     pMenuTestLayer->release();
128 }

完整代碼運行效果

著作權聲明：本文由http://www.cnblogs.com/suguoqiang 原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [Cocos2d-x For WP8]MotionStreak拖尾效果

使用cocos2d-x制作基於Tile地圖的游戲：碰撞檢測和收集物品（二）

Cocos2d-x中的CC_CALLBACK_X詳解 cocos2d-x CCTableView cocos2d-x ClippingNode Cocos2d-x和lua 詳解Cocos2d-X中宏CC_DLL Cocos2d-x 3.2 的內存管理詳解

使用cocos2d-x制作基於Tile地圖的游戲：不一樣的戰斗（回合制戰斗）（四）

cocos2d-x 基於windows xp + vs2008配置詳解&&新建cocos2d-x項目(Hello World)