Learning Cocos2d-x for WP8（5）——详解Menu菜单

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 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！

posted @ 2013-03-21 15:44 Ghost Soar 阅读(2962) 评论(2) 编辑收藏举报

刷新页面返回顶部

Ghost Soar

<<自嘲>>本是菜鸟，偶做老鸟，略读半卷书，坐井说天阔。大志无所为，海斗量得失，年到老时方恨晚，怒指生不逢时。

Learning Cocos2d-x for WP8（5）——详解Menu菜单

CCMenuItemFont

CCMenuItemSprite

CCMenuItemImage

CCMenuItemToggle

CCLabelBMFont显示中文菜单

公告