cocos2d-x UI组件

标签（Label）

使用Label对象可以使用位图字体、TrueType字体、系统字体创建标签。这个单一个类能处理所有标签需求。

BMFont

BMFont是一个使用位图字体创建的标签类型，位图字体中的字符由点阵组成。使用这种字体标签性能非常好，但是不适合缩放。标签中的每一个字符都是一个单独的Sprite，也就是说精灵的属性控制都适用于这里的每个字符。

创建BMFont标签需要两个文件：.fnt文件和.png文件。

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

所有标签中出出的字符都应该能提供.fnt文件，如果找不到，字符就不会被渲染。如果你渲染了一个Label，同时它有丢失字符，记得去查看一个.fnt文件是否完备。

TTF

TrueType字体不需要为每种尺寸的和颜色单独使用字体文件，在绽放时不会失真。要创建这种标签，需要指定.ttf字体文件名，文本字符串和字体大小。

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

虽然使用TrueType字体比使用位图字体更灵活，但是它渲染速度较慢，并且更改标签的属性（字体，大小）是一项非常消耗性能的操作。

如果你需要具有相同属性的多个Label对象，那可以创建一个TTFConfig对象来统一配置，TTFConfig对象允许你设置所有标签的共同属性。

// 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也能用于展示中文、日文、韩文的字符。

SystemFont

这样的标签不要改他的属性，它会使用系统的规则。

标签效果

在屏幕上有标签后，它们可能看起来很普通，这时你希望让他们变漂亮，Label对象可以对标签应用效果，包括阴影、描边、发光。

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);

菜单

Menu对象是一种特殊的Node对象。

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<MenuItem*> 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);

使用Lambda表达式

C++11支持Lambda表达式，lambda表达式是匿名函数，使用lambda表达式，能让代码看起来更简洁，同时不会有额外的性能开销。

// 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）

 

按钮有一个正常状态，一个选择状态，还有一个不可点击状态，按钮外观可以根据这三个状态而改变。创建一个按钮并定义一个回调函数很简单，记得在操作的时候要有头文件包含：#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）

#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);

进度条（LoadingBar）

#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("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");
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);

从上例可以看出，实现一个滑动条需要提供5张图像，对应滑动条的不同部分不同状态，分别为：滑动条背景、上层进度条、正常显示的滑动端点、滑动时的滑动端点、不可用时的滑动端点。

文本框（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);

提供的文本框架对象，是多功能的，能满足所有的输入需求，比如用户密码的输入，限制用户可以输入的字符数等等。

#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);

 

最后欢迎大家访问我的个人网站：1024s​​​​​​​