Cocos2dx之UI组件

Cocos2d-x提供了一套UI组件。包括

1. Label
2. Menu
3. Buttons
4. Checkbox
5. Loading Bar
6. Slider
7. TextField

Label

Cocos2d-x提供Label对象，可以用真值类型、bitmap（位图）或内置系统字体来创建。
Label BMFont

BMFont是一种Label类型，它使用bitmap（位图）字体。位图中的字符由点的矩阵组成。在Label中的每个字符都是一个分隔开的Sprite（精灵），所以每个字符都可以旋转、放大、着色，有不同的锚点或其他属性的改变。
创建BMFont标签需要两个文件： .fnt 文件和.png格式的文字图片。工具Glyph Designer可以自动创建这些文件。从bitmap字体创建Label对象：

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

Label TTF
如果不需要为每一个分隔开的字体指定的大小和颜色等，那么使用这个将会十分方便。创建Label TTF需要.ttf 字体文件、文本、字本大小：

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

不像BMFont，TTF 可以渲染大小的改变，而不需要不需要单独的字体文件。
如果我们多个Label对象，并且它们都有相同的属性设置，那么我们可以通过TTFConfig对象来管理，再通过TTFConfig 对象来创建Label对象：

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

Label SystemFont
SystemFont使用默认的系统字体和大小。

auto myLabel = Label::createWithSystemFont("My Label Text", "Arial", 16);

Label 效果

（１）阴影效果：

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

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

（２）轮廓效果：

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

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

（３）发光效果：

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

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

Menu and Menu Items

在我们的游戏，我们可能会使用Menu（菜单）对象来导航选项。菜单中可能会包含按钮，如：Play， Quit，Settings ， About。但也可以嵌套其他菜单对象。Menu（菜单）对象是一个特殊的Node（节点）对象类型 。
可以创建一个空的Menu对象，作为菜单项的占位符：

auto myMenu = Menu::create();

上面提到的Play、Quit,、Settings 、 About等按钮就是menu items。Cocos2d-x 提供了多种方式来创建menu items，包括使用Label对象、或指定图片来展示。Menu items 通常有两种可能的状态：normal（普通）、selected（选中）。当你点击menu item时，callback（回调）就会被触发。所以我们可以点击menu item，然后运行我们指定的代码。

通过指定图片来创建menu item：

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

通过 MenuItem对象的向量来创建：

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

Lambda函数作为Menu的回调函数

从前面的知识，我们知道当点击menu item时会触发回调函数。C++11提供了lambda函数，Cocos2d-x充分利用了lambda函数。lambda函数是在源代码中内联编写的函数。 lambda函数在运行时计算，而不是编译时。
lambda函数示例:

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

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

使用lambda函数作为MenuItem的回调函数：

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

Buttons

button 会拦截touch事件，当点击时会调用预定义的回调。Button有normal（普通）和selected（选中）两种状态。按钮的外观可以基于它的状态进行改变。创建Button和定义它的回调时，一定要加入#include "ui/CocosGUI.h"

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有５个不同的状态，分三类：normal、selected、disabled：

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

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

this->addChild(loadingBar);

我们还可以改变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);

TextField

如果你想游戏玩家为自己的角色起一个名字，那么可以用TextField来完成输入。TextField控件就是用于输入文本的。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);

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