COCOS2D-X UI components

auto myLabel = Label::createWithBMFont("bitmapRed.fnt", "Your Text");

auto myLabel = Label::createWithTTF("Your Text", "Marker Felt.ttf", 24);

// create a TTFConfig files for labels to share
TTFConfig labelConfig;
labelConfig.fontFilePath = "myFont.ttf";
labelConfig.fontSize = 16;
labelConfig.glyphs = GlyphCollection::DYNAMIC;
labelConfig.outlineSize = 0;
labelConfig.customGlyphs = nullptr;
labelConfig.distanceFieldEnabled = false;

/ / create a TTF Label from the TTFConfig file.
auto myLabel = Label::createWithTTF(labelConfig, "My Label Text");

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16);

// shadow effect is supported by all Label types
myLabel->enableShadow();

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16);

// outline effect is TTF only, specify the outline color desired
myLabel->enableOutline(Color4B::WHITE, 1));

auto myLabel = Label::createWithTTF("myFont.ttf", " My Label Text", 16);

// glow effect is TTF only, specify the glow color desired.
myLabel->enableGlow(Color4B::YELLOW);

auto myMenu = Menu::create();

// creating a menu with a single item

// create a menu item by specifying images
auto closeItem = MenuItemImage::create("CloseNormal.png" , "CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

auto menu = Menu::create(closeItem, NULL);
this-> addChild(menu, 1);

// creating a Menu from a Vector of items
Vector MenuItems;

auto closeItem = MenuItemImage::create ("CloseNormal.png", "CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

MenuItems.pushBack(closeItem);

/* repeat for as many menu items as needed */

auto menu = Menu::createWithArray(MenuItems);
this->addChild(menu, 1);

// create a simple Hello World lambda
auto func = [] () {cout << "Hello World"; };

// now call it someplace in code
func();

auto closeItem = MenuItemImage::create("CloseNormal.png", "CloseSelected.png",
[&](Ref* sender) {
 // your code here
});

auto button = Button::create("normal_image.png", "selected_image.png", "disabled_image.png");

button->setTitleText("Button Text ");

button->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 switch (type)
 {
 case ui ::Widget::TouchEventType::BEGAN:
 break;
 case ui::Widget::TouchEventType::ENDED:
 std::cout << "Button 1 clicked" << std ::endl;
 break;
 default:
 break;
 }
});

this->addChild(button); 

#include "ui/CocosGUI.h"

auto checkbox = CheckBox::create("check_box_normal .png",
 "check_box_normal_press.png",
 "check_box_active.png",
 "check_box_normal_disa ble.png",
 "check_box_active_disable.png");

checkbox->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 switch ( type)
 {
 case ui::Widget::TouchEventType::BEGAN:
 break;
 case ui::Widget::TouchEventType::ENDED:
 std ::cout << "checkbox 1 clicked" << std::endl;
 break;
 default:
 break;
 }
});

this->addChild(checkbox);

#include "ui/CocosGUI.h"

auto loadingBar = LoadingBar::create("LoadingBarFile.png");

// set the direction of the loading bars progress
loadingBar->setDirection(LoadingBar::Direction::RIGHT); 

this->addChild(loadingBar);

#include "ui/CocosGUI.h"

auto loadingBar = LoadingBar::create("LoadingB arFile.png");
loadingBar->setDirection(LoadingBar::Direction::RIGHT);

// something happened, change the percentage of the loading bar
loadingBar- >setPercent(25);

// more things happened, change the percentage again.
loadingBar->setPercent(35);

this->addChild( loadingBar);

#include "ui/CocosGUI.h"

auto slider = Slider::create();< br />slider->loadBarTexture("Slider_Back.png"); // what the slider looks like
slider->loadSlidBallTextures("SliderNode_Normal.png", "SliderNode_Press.png", "SliderNode_Disable.png"); 
slider->loadProgressBarTexture("Slider_PressBar.png");

slider->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 switch ( type)
 {
 case ui::Widget::TouchEventType::BEGAN:
 break;
 case ui::Widget::TouchEventType::ENDED:
 std ::cout << "slider moved" << std::endl;
 break;
 default:
 break;
 }
});

this ->addChild(slider);

#include "ui/CocosGUI.h"

auto textField = TextField::create ("","Arial",30);

textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 std::cout << " editing a TextField" << std::endl;
});

this->addChild(textField);

#include "ui/CocosGUI.h"

auto textField = TextField::create("","Arial",30);

 // make this TextField password enabled
textField->setPasswordEnabled(true);

// set the maximum number of characters the user can enter for this TextField
textField->setMaxLength (10);

textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 std::cout << "editing a TextField" << std ::endl;
});

this->addChild(textField);

Label< /h3>

Use the Label object to create labels using bitmap fonts, TrueType fonts, and system fonts. This single class can handle all labeling requirements.

BMFont

BMFont is a label type created with a bitmap font, and the characters in the bitmap font are composed of dot matrix. The performance of using this font label is very good, but it is not suitable for scaling. Each character in the label is a separate Sprite, which means that the attribute control of the sprite applies to each character here.

Two files are needed to create a BMFont tag: .fnt file and .png file.

auto myLabel = Label::createWithBMFont("bitmapRed.fnt", "Your Text");

All the characters in the label should be able to provide the .fnt file, if If not found, the character will not be rendered. If you render a Label and it has missing characters, remember to check whether a .fnt file is complete.

TTF

TrueType fonts do not require separate font files for each size and color, and will not be distorted when blooming. To create this kind of label, you need to specify the .ttf font file name, text string, and font size.

auto myLabel = Label::createWithTTF("Your Text", "Marker Felt.ttf", 24);

Although using TrueType fonts is more flexible than using bitmap fonts, Its rendering speed is slow, and changing the label’s attributes (font, size) is a very performance-consuming operation.

If you need multiple Label objects with the same properties, you can create a TTFConfig object for unified configuration. The TTFConfig object allows you to set the common properties of all labels.

// create a TTFConfig files for labels to share
TTFConfig labelConfig;
labelConfig.fontFilePath = "myFont.ttf";
labelConfig.fontSize = 16;
labelConfig.glyphs = GlyphCollection::DYNAMIC;
labelConfig.outlineSize = 0;
labelConfig.customGlyphs = nullptr;
labelConfig.distanceFieldEnabled = false;

/ / create a TTF Label from the TTFConfig file.
auto myLabel = Label::createWithTTF(labelConfig, "My Label Text");

TTFConfig can also be used to display Chinese, Japanese, and Korean character.

SystemFont

Don’t change the attributes of such a tag, it will use system rules.

Label effects

When there are labels on the screen, they may look ordinary. At this time, you want to make them beautiful. The Label object can apply effects to the labels, including shadows, Stroke, glow.

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16);

// shadow effect is supported by all Label types
myLabel->enableShadow();

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16);

// outline effect is TTF only, specify the outline color desired
myLabel->enableOutline(Color4B::WHITE, 1));

auto myLabel = Label::createWithTTF("myFont.ttf", " My Label Text", 16);

// glow effect is TTF only, specify the glow color desired.
myLabel->enableGlow(Color4B::YELLOW);

< h3>Menu

The Menu object is a special Node object.

auto myMenu = Menu::create();

Menu items generally have a normal state and a selection state. The menu item is displayed in a normal state, and when you click it, it becomes a selection Status, and clicking the menu at the same time will trigger a callback function.

// creating a menu with a single item

// create a menu item by specifying images
auto closeItem = MenuItemImage::create("CloseNormal.png" , "CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

auto menu = Menu::create(closeItem, NULL);
this-> addChild(menu, 1);

// creating a Menu from a Vector of items
Vector MenuItems;

auto closeItem = MenuItemImage::create ("CloseNormal.png", "CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

MenuItems.pushBack(closeItem);

/* repeat for as many menu items as needed */

auto menu = Menu::createWithArray(MenuItems);
this->addChild(menu, 1);

Use Lambda expressions

C++11 supports Lambda expressions. Lambda expressions are anonymous functions. Using lambda expressions can make the code look more concise without additional performance. Overhead.

// create a simple Hello World lambda
auto func = [] () {cout << "Hello World"; };

// now call it someplace in code
func();

auto closeItem = MenuItemImage::create("CloseNormal.png", "CloseSelected.png",
[&](Ref* sender) {
 // your code here
});

Button

The button has a normal state, a selected state, and A non-clickable state, the appearance of the button can be changed according to these three states. It is very simple to create a button and define a callback function. Remember to include the header file when operating it: #include “ui/CocosGUI.hs”.

auto button = Button::create("normal_image.png", "selected_image.png", "disabled_image.png");

button->setTitleText("Button Text ");

button->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 switch (type)
 {
 case ui ::Widget::TouchEventType::BEGAN:
 break;
 case ui::Widget::TouchEventType::ENDED:
 std::cout << "Button 1 clicked" << std ::endl;
 break;
 default:
 break;
 }
});

this->addChild(button); 

CheckBox (CheckBox)

#include "ui/CocosGUI.h"

auto checkbox = CheckBox::create("check_box_normal .png",
 "check_box_normal_press.png",
 "check_box_active.png",
 "check_box_normal_disable .png",
 "check_box_active_disable.png");

checkbox->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 switch (type )
 {
 case ui::Widget::TouchEventType::BEGAN:
 break;
 case ui::Widget::TouchEventType::ENDED:
 std: :cout << "checkbox 1 clicked" << std::endl;
 break;
 default:
 break;
 }
});
 
this->addChild(checkbox);

Progress Bar (LoadingBar)

#include "ui/CocosGUI.h"

auto loadingBar = LoadingBar::create("LoadingBarFile.png");

// set the direction of the loading bars progress
loadingBar->setDirection(LoadingBar::Direction::RIGHT);< br />
this->addChild(loadingBar);

#include "ui/CocosGUI.h"

auto loadingBar = LoadingBar::create("LoadingBarFile .png");
loadingBar->setDirection(LoadingBar::Direction::RIGHT);

// something happened, change the percentage of the loading bar
loadingBar-> setPercent(25);

// more things happened, change the percentage again.
loadingBar->setPercent(35);

this->addChild(loadingBar );

Slider

#include "ui/CocosGUI.h"

auto slider = Slider::create();
slider->loadBarTexture("Slider_Back.png"); // what the slider looks like
slider->loadSlidBallTextures("SliderNode_Normal.png", "SliderNode_Press.png", "SliderNode_Disable.png");< br />slider->loadProgressBarTexture("Slider_PressBar.png");

slider->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 switch (type )
 {
 case ui::Widget::TouchEventType::BEGAN:
 break;
 case ui::Widget::TouchEventType::ENDED:
 std: :cout << "slider moved" << std::endl;
 break;
 default:
 break;
 }
});

this-> addChild(slider);

As can be seen from the above example, to realize a slider bar needs to provide 5 images, corresponding to different states of different parts of the slider bar, namely: slider background, upper progress bar, normal The displayed sliding endpoint, the sliding endpoint when sliding, and the sliding endpoint when not available.

TextField

#include "ui/CocosGUI.h"

auto textField = TextField::create ("","Arial",30);

textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 std::cout << " editing a TextField" << std::endl;
});

this->addChild(textField);

The provided text frame object is multifunctional Yes, it can meet all input requirements, such as inputting user passwords, limiting the number of characters that users can input, and so on.

#include "ui/CocosGUI.h"

auto textField = TextField::create("","Arial",30);

 // make this TextField password enabled
textField->setPasswordEnabled(true);

// set the maximum number of characters the user can enter for this TextField
textField->setMaxLength (10);

textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
 std::cout << "editing a TextField" << std ::endl;
});

this->addChild(textField);