Cocos2d-x how to create image button with title and font - ios

Question

Hi i am converting my game from Corona SDK to Cocos2d-x 3.0 alpha.
I need to create an image button with text on it. It was very simple in Corona SDK with widget.newButton, which takes all x, y, size, font, image etc in single function.
Now i couldn't find any alternate to this in Cocos2d-x. The closest thing i have found in it is MenuItemImage
auto closeItem = MenuItemImage::create(
"blank.png",
"blank-selected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 , origin.y + closeItem->getContentSize().height/2));
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Point::ZERO);
this->addChild(menu, 1);
It takes the images and event, but i cannot set title and font on it. Anyone has idea how to set title and font on it?

Answer 1

You can use MenuItemFont or MenuItemLabel.
For example:
MenuItemFont::setFontName( "Marker Felt" );
MenuItemFont::setFontSize( 34 );
auto label = LabelBMFont::create( "go back", "fonts/bitmapFontTest3.fnt" );
auto back = MenuItemLabel::create(label, CC_CALLBACK_1(MenuLayer4::backCallback, this) );
or
MenuItemFont::setFontSize( 34 );
MenuItemFont::setFontName("Marker Felt");
auto item6 = MenuItemFont::create("Bugs", CC_CALLBACK_1(MenuLayerMainMenu::menuCallbackBugsTest, this));
For more information, see MenuTest.ccp
update
You can simply new a Label, and add it to you MenuItemImage, such as:
LabelTTF* closeLabel = LabelTTF::create("close", "Marker Felt", 28);
closeItem->addChild(closeLabel);
And you may need to adjust the label's position.

Answer 2

It's fairly simple, this works in at least cocos2d-x 3.10 and 3.16, but if you're looking to make a button with cocos2d, use the built in cocos2d::ui namespace for Button.
cocos2d::ui::Button* button = cocos2d::ui::Button::create();
//button textures
button->loadTextures(
"<your default texture>.png",
"<your pressed texture>.png",
"<your disabled texture>.png",
cocos2d::ui::Widget::TextureResType::PLIST
);
//text content, font, and size
button->setTitleText("Touch me!");
button->setTitleFontName("arial");
button->setTitleFontSize(24.0f);
//bind a callback with a lambda
auto touch_handler = [](cocos2d::Ref* ref, cocos2d::ui::Widget::TouchEventType evt)
{
if (evt == cocos2d::ui::Widget::TouchEventType::ENDED)
{
//do your callback logic here, ie play a sound or vibrate
}
};
button->addTouchEventListener(touch_handler);
//then finally, like a Nodes, add it to your scene
my_scene->addChild(button);
The textures you'll load are ideally packed into a texture with something like TexturePacker, otherwise you'll change it to LOCAL instead of PLIST. The textures will be used when the button is default, or when there's a touch, or when the button is disabled.