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 效果

(1)阴影效果:

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

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

(2)轮廓效果:

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

(3)发光效果:

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有5个不同的状态,分三类: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);

Cocos2dx之UI组件_第1张图片

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

你可能感兴趣的:(cocos2d)