Cocos2dx之UI组件 cocos2d

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

Label
Menu
Buttons
Checkbox
Loading Bar
Slider
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);

【Cocos2dx之UI组件】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);