Label inside button

Label inside button
0.0 0

#1

Hi,
I’m having problems with the action coordinations between a button and a label.
This is my code:

cocos2d::ui::Button *bPlay = cocos2d::ui::Button::create("button.png");
bPlay->setPosition(Vec2(xButton, yButton));
bPlay->addTouchEventListener(CC_CALLBACK_1(EventHandler::onTouchButtonPlay, EventHandler::getInstance())); 
bPlay->setScale(buttonScaleX, buttonScaleY);
    
RepeatForever *effectButtonPlay = RepeatForever::create(Sequence::create(ScaleTo::create(buttonScaleX, buttonScaleY), ScaleBy::create(1, 1.05f), NULL));
   
Label *labelPlay = Label::createWithTTF("Play", "fonts/calibrib.ttf", 12); 
labelPlay->setPosition(bPlay->getPosition());
labelPlay->setScale(scaleLabel);

RepeatForever *effectLabelPlay = RepeatForever::create(Sequence::create(ScaleTo::create(labelPlay->getScaleX(), labelPlay->getScaleY()), ScaleBy::create(1, 1.05f), NULL));

labelPlay->runAction(effectLabelPlay);
bPlay->runAction(effectButtonPlay);
    
scene->addChild(bPlay);
scene->addChild(labelPlay);

The problem in this code, is that the action of the button is not coordinated with the action of the label. Both actions make an effect of enlarge and reduce the button and the label, but I need them to go hand in hand. Currently, while the button is enlarged, the label is reducing. How can I solve it?

I read about 2 options:
1- Use the method setTitleText in Button class, instead of Label. It works fine, but I can’t customize the text of the string, I would like scale it and set a font.

2- Do: bPlay->addChild(labelPlay) instead of scene->addChild(labelPlay)
It works fine, but label’s position and scale is different from the one I’m setting up in labelPlay->setPosition and labelPlay->setScale. Maybe there is some inheritance problem between father and son?

Thanks


#2

Label should be a child of button

Also there are plenty of examples in cpp-tests


#3

@slackmoehrle thanks for the answer. Can you post an example? As I mentioned before, I’ve problems with position and scale.

Thanks.


#4

Why this code don’t work fine?

cocos2d::ui::Button *bPlay = cocos2d::ui::Button::create("button.png");
bPlay->setPosition(Vec2(xButton, yButton));
bPlay->addTouchEventListener(CC_CALLBACK_1(EventHandler::onTouchButtonPlay, EventHandler::getInstance())); 
bPlay->setScale(buttonScaleX, buttonScaleY);
    
RepeatForever *effectButtonPlay = RepeatForever::create(Sequence::create(ScaleTo::create(buttonScaleX, buttonScaleY), ScaleBy::create(1, 1.05f), NULL));
   
Label *labelPlay = Label::createWithTTF("Play", "fonts/calibrib.ttf", 12); 
labelPlay->setPosition(bPlay->getPosition());
labelPlay->setScale(scaleLabel);

 bPlay->runAction(effectButtonPlay);
  
 scene->addChild(bPlay);
 bPlay->addChild(labelPlay);

The Label is not in the same position that the button. And the label is not scaled.
However, both makes the effect.


#5

Can you post a screenshot or 2 so I can see what is happening? Perhaps I mis-understand the situation.


#6

This is what happen.

play

The label “Play” is in different position to the blue button.
I don’t understand why, if I’m doing it:
labelPlay->setPosition(bPlay->getPosition());

It is in a different position.
If I add the label to the scene instead of button, the position is ok.

As I mentioned before, it inherited only the Action, but the position and scale not work.Even, If I not set position and scale of the label, the label inherits a incorrect position and scale. It not inherits the button’s scale and position.

I don’t understand what’s my error, for this reason I would like to see an example working.


#7

2 things.

  1. button->addChild(label);

this means that labels position is now relative to button.

  1. label->setPosition(cocos2d::Vec2(0.5, 0.5));

centered in button.


#8

Using this: label->setPosition(cocos2d::Vec2(0.5, 0.5));
In my case, the label does not center in the button. It continue outside the button, closer, but outside…


#9

Why are you set the position to (0.5, 0.5), why not (0, 0)?


#10

It would be nice to have a screenshot.


#11

Use setPositionNormalized


#12

ui::button already has a label inside it… @slackmoehrle
@TankorSmash
bPlay->setTitleText(“Play”);


#13

you can customize the text by calling bPlay->getTitleLabel()…
or you can set a new label inside a button by using

button->setTitleLabel(lbl);

#14

Thanks @bilalmirza !
This setTitleLabel, is the method that I was looking for.
I imagine that the Scale is depending the boundingBox of the button. Something like label->setScale( button->getBoundingBox.size.width * 0.50f / label->getContentSize().width ); represents 50% inside the button.

Thanks


#15

I think you typo’d his name with mine


#16

my bad! @TankorSmash


#17

Yeah, sure. It just seemed like OP was using a separate label object.

Good mention of the built in label.