cocos2d-x 3.4 之 文字按钮与图片按钮ZZ

***************************************转载请注明出处：http://blog.csdn.net/lttree********************************************

cocos2d-x 中用按钮地方很多，发现之前也没写过（其实真没什么可写的）。

今天正好用到文字按钮这块，就弄了个Demo耍了下，记录一下。

PS：宿舍现在是真冷啊，手冻得都哆嗦，每每睡觉前我都想到一句诗：布衾多年冷似铁。。。

>>>图片按钮

通过MenuItemImage来实现

做一些准备工作，

就是先设定一个Label，

方便展现按钮实现的动作：

[cpp] view plaincopyprint?

1. // 为普通按钮设置的Label  
2.     auto label1 = Label::create("Go!","fonts/Marker Felt.ttf", 24);  
3.     label1->setPosition(Vec2(visibleSize.width/2,visibleSize.height-label1->getContentSize().height*2));  
4.     label1->setTag(10);  
5.     this->addChild(label1);  

[cpp] view plaincopyprint?

1. // 为图片开关按钮设置个Label  
2.     auto label = Label::createWithTTF("Hello World!", "fonts/Marker Felt.ttf", 24);  
3.     label->setPosition(Vec2(visibleSize.width/2+_turnOn->getContentSize().width,visibleSize.height/2));  
4.     label->setTag(11);  
5.     this->addChild(label);  

[cpp] view plaincopyprint?

1. // 为文字开关按钮设置个Label  
2.     auto label2 = Label::createWithTTF("Hello!", "fonts/Marker Felt.ttf", 24);  
3.     label2->setPosition(Vec2(visibleSize.width/2+_turnOn->getContentSize().width,visibleSize.height/2-imageItem->getContentSize().height));  
4.     label2->setTag(13);  
5.     this->addChild(label2);  

Tag的设定，是为了在回调函数得到相应Label，从而好对它实施操作。

>首先是一个简单的按钮（就是按的时候有点小变化，通过回调函数来实现动作）

[cpp] view plaincopyprint?

1. void WelcomeScene::menuImgCallback(Ref* pSender)  
2. {  
3.     Label* label = (Label* )this->getChildByTag(10);  
4.     auto actionBy = MoveBy::create(1, Vec2(80,0));  
5.     auto actionByBack = actionBy->reverse();  
6.     label->runAction( Sequence::create(actionBy, actionByBack, NULL));    
7. }  

回调函数实现的动作就是，将Label在1秒内向右移动80单位，并移动回来。

>然后是开关按钮（这个就不需要解释了。。）

为了简单，就直接在头文件定义：

[cpp] view plaincopyprint?

1. MenuItemImage *_turnOn,*_turnOff;    

然后是按钮的制作：

[cpp] view plaincopyprint?

1. // 开关按钮  
2.     _turnOn = MenuItemImage::create(    
3.         "btn_musOn.png",    
4.         "btn_musOn.png");    
5.     _turnOff = MenuItemImage::create(    
6.         "btn_musOff.png",    
7.         "btn_musOff.png");    
8.     MenuItemToggle *switchItem = MenuItemToggle::createWithCallback(CC_CALLBACK_1(WelcomeScene::menuSwitchCallback, this), _turnOn,_turnOff, NULL);         
9.     switchItem->setPosition(Vec2(visibleSize.width/2,visibleSize.height/2));   

它的回调函数：

[cpp] view plaincopyprint?

1. void WelcomeScene::menuSwitchCallback(Ref* pSender)  
2. {  
3.     MenuItemToggle *toggleItem = (CCMenuItemToggle *)pSender;  
4.     Label* label = (Label* )this->getChildByTag(11);  
5.     if (toggleItem->selectedItem() == _turnOn){  
6.         label->setString("Hello World!");  
7.     }  
8.     else if (toggleItem->selectedItem() == _turnOff){  
9.         label->setString("Bye World!");  
10.     }  
11. }  

回调函数就是在 “Hello World！”和“Bye World！”之间切换。

>>>接下来是文字按钮

> 简单的文字按钮

其实和图片按钮差不多，只不过，图片按钮用MenuItemImage，而文字按钮是用MenuItemFont

[cpp] view plaincopyprint?

1. // 文字按钮  
2.     auto wordItem = MenuItemFont::create("Start",CC_CALLBACK_1(WelcomeScene::menuImgCallback,this));  
3.     wordItem->setPosition(Vec2(visibleSize.width/2,visibleSize.height/2+imageItem->getContentSize().height*2));  

回调函数和图片按钮共用一个

> 文字开关按钮

殊途同归，原理差不多

[cpp] view plaincopyprint?

1. _turnOn1 = MenuItemFont::create("On");  
2.     _turnOff1 = MenuItemFont::create("Off");  
3.     MenuItemToggle *switchItem1 = MenuItemToggle::createWithCallback(CC_CALLBACK_1(WelcomeScene::menuSwitchCallback1,this),_turnOn1,_turnOff1,NULL);  
4.     switchItem1->setPosition(Vec2(visibleSize.width/2,visibleSize.height/2-imageItem->getContentSize().height));  

回调函数：

[cpp] view plaincopyprint?

1. void WelcomeScene::menuSwitchCallback1(Ref* pSender)  
2. {  
3.     MenuItemToggle *toggleItem = (CCMenuItemToggle *)pSender;  
4.     Label* label = (Label* )this->getChildByTag(13);  
5.     if (toggleItem->selectedItem() == _turnOn1){  
6.         label->setString("Hello!");  
7.     }  
8.     else if (toggleItem->selectedItem() == _turnOff1){  
9.         label->setString("Bye!");  
10.     }  
11. }  

-------------------------------------------------------------更新---------------------------------------------------------------------------------------

这里主要是对于文字开关按钮的改动，

有时候为了一个无用的按钮，还要在全局设置一个变量，比较麻烦切不爽的，

所以可以用下面这种方法生成 On and Off的开关按钮：

[cpp] view plaincopyprint?

1. MenuItemFont::setFontName("fonts/Marker Felt.ttf");  
2. MenuItemFont::setFontSize(34);  
3. MenuItemToggle *switchItem1 = MenuItemToggle::createWithCallback(CC_CALLBACK_1(WelcomeScene::menuSwitchCallback1,this),  
4.     MenuItemFont::create("On"),  
5.     MenuItemFont::create("Off"),  
6.     NULL );  
7. switchItem1->setPosition(Vec2(visibleSize.width/2,visibleSize.height/2-imageItem->getContentSize().height));  

这样就不需要额外的设置两个MenuItemFont的全局变量了，

但如果这样，我们回调函数就会出问题了，

原来回调函数是这样的：

[cpp] view plaincopyprint?

1. void WelcomeScene::menuSwitchCallback1(Ref* pSender)  
2. {  
3.     MenuItemToggle *toggleItem = (CCMenuItemToggle *)pSender;  
4.     Label* label = (Label* )this->getChildByTag(13);  
5.     if (toggleItem->selectedItem() == _turnOn1){  
6.         label->setString("Hello!");  
7.     }  
8.     else if (toggleItem->selectedItem() == _turnOff1){  
9.         label->setString("Bye!");  
10.     }  
11. }  

没有了全局变量_turnOn1 和 _turnOff1 如何判断当前的按钮是哪个呢?

——这里有个新函数——getSelectedIndex

对于MenuItemToogle::createWithCallback，追踪到定义，可以发现：

[cpp] view plaincopyprint?

1. static MenuItemToggle * createWithCallback(const ccMenuCallback& callback, const Vector<MenuItem*>& menuItems);  

它的最后一个参数是一个集合，所以按钮可以是多个的，既然是Vector，就会有个Index

这个getSelectedIndex函数就是获取当前被选中的MenuItem序号，

所以，我们回调函数可以这么写：

[cpp] view plaincopyprint?

1. void WelcomeScene::menuSwitchCallback1(Ref* pSender)  
2. {  
3.     MenuItemToggle *toggleItem = (CCMenuItemToggle *)pSender;  
4.     Label* label = (Label* )this->getChildByTag(13);  
5.     switch ( toggleItem->getSelectedIndex() )  
6.     {  
7.     case 0: label->setString("Hello!");  
8.         break;  
9.     case 1: label->setString("Bye!");  
10.         break;  
11.     default:  
12.         break;  
13.     }  
14. }  

就是这样了~O(∩_∩)O~

***************************************转载请注明出处：http://blog.csdn.net/lttree********************************************