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

标签：cocos2d-x 3.4   文字按钮与图片按钮   

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

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

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

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

>>>图片按钮

通过MenuItemImage来实现

做一些准备工作，

就是先设定一个Label，

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

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

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

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

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

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

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

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

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

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

MenuItemImage *_turnOn,*_turnOff;  

然后是按钮的制作：

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

它的回调函数：

void WelcomeScene::menuSwitchCallback(Ref* pSender)
{
	MenuItemToggle *toggleItem = (CCMenuItemToggle *)pSender;
    Label* label = (Label* )this->getChildByTag(11);
	if (toggleItem->selectedItem() == _turnOn){
        label->setString("Hello World!");
    }
    else if (toggleItem->selectedItem() == _turnOff){
        label->setString("Bye World!");
    }
}

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

>>>接下来是文字按钮

> 简单的文字按钮

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

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

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

> 文字开关按钮

殊途同归，原理差不多

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

回调函数：

void WelcomeScene::menuSwitchCallback1(Ref* pSender)
{
	MenuItemToggle *toggleItem = (CCMenuItemToggle *)pSender;
    Label* label = (Label* )this->getChildByTag(13);
	if (toggleItem->selectedItem() == _turnOn1){
        label->setString("Hello!");
    }
    else if (toggleItem->selectedItem() == _turnOff1){
        label->setString("Bye!");
    }
}

恩，大体就是这样，可以运行运行耍耍啦~

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

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

标签：cocos2d-x 3.4   文字按钮与图片按钮   

原文地址：http://blog.csdn.net/lttree/article/details/44205977