ocos2d-x 开发者指南06：UI - 博客详情 - 用户博客

关于UI的综述

Cocos2d-x提供了一套易于使用的UI API，可满足开发者的GUI需求，涵盖了Label（标签）、Menu（菜单）、MenuItems（菜单项）、Buttons（按钮）和Views（视图）等组件。

Label（标签）

Cocos2d-x中的Label对象可用于创建TTF、BMFont和SystemFont文本。

Label BMFont（BMFont标签）

BMFont是使用位图字体的标签类型。位图字体由点或像素矩阵构成，这些点和像素代表了字符图形的外形和大小。其优点是使用方便、简单，但不可伸缩，每个尺寸都需要单独的字体文件。

Label类是SpriteBatchNode的子类，因此Label的每个字符都可看作一个Sprite（精灵），具备旋转、缩放、着色、改变锚点以及其他继承自Node对象的属性。

创建一个BMFont文本需要两个文件：一个.fnt文件和一个显示每一个对象的.png格式的图片。可利用像Glyph Designer这样的工具自动创建该类型的文件。

创建BMFont文本的代码示例如下：

auto myLabel = Label::createWithBMFont("myFont.fnt", "My Label Text");

需要注意的是，字符串内所有的字符都要包含在MyFont.fnt文件中，否则它们将不会被渲染。若要渲染一个缺少字符的Label，需确保这些字符都在MyFont.fnt文件中。

Label TTF（TTF标签）

TTF是True Type Font的标签类型。创建TTF标签时，需要指定一个.ttf格式的字体文件名、文本字符串以及字体大小。与BMFont不同，TTF可以改变字体的显示大小，无需单独的字体。

创建TTF标签的代码示例如下：

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

尽管TTF标签比BMFont更灵活，但它的效率较低，并且修改如字形和大小等属性是一个复杂的操作。

如果需要创建一些具有相同属性的TTF标签，可以通过创建一个TTFConfig对象来管理它们。TTFConfig允许为所有的TTF标签设置共同的属性，示例代码如下：

// 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还可用于显示中文、日文和韩文字符。

Label SystemFont（系统字体标签）

SystemFont是使用系统默认的字体和尺寸的标签类型，意味着开发者不能修改字体的属性。

创建SystemFont标签的代码示例如下：

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

标签效果和排版

标签效果

Label对象具备一些特效，但并非所有的标签类型都支持所有的特效。这些特效包括阴影、轮廓和光晕效果，示例代码如下：

// shadow effect is supported by all Label types
myLabel->enableShadow();
// outline effect is TTF only, specify the outline color desired
label->enableOutline(Color4B(100, 50, 100, 100));
// glow effect is TTF only, specify the glow color desired.
label->enableGlow(Color4B(100, 50, 100, 100));

菜单和菜单项

菜单的作用

Menu是游戏选项的导航，通常包含播放、退出、设置和关于等选项，一般以可点击的按钮形式显示。

菜单的组成

Menu是一个特殊的Node对象，创建一个空Menu的代码如下：

auto myMenu = Menu::create();

菜单选项和添加到菜单

MenuItems是Menu的核心。菜单选项通常有正常状态、被选择的状态以及一个回调，回调通常在MenuItems被选择时触发。

创建包含单个菜单项的菜单示例：

// create a menu item
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创建，示例代码如下：

// 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作为菜单回调

lambda函数是指可以在源代码中编写内联函数的函数。在Cocos2d-x中可以使用lambda函数，甚至可将其作为回调函数。除了Menu回调，lambda函数还可用作多种函数。

简单的lambda函数示例：

auto func = [] () { std::cout << "Hello world"; };
func(); // now call the function

使用lambda作为Action函数：

auto action1 = CallFunc::create([&](){
std::cout << "using a Lambda callback" << std::endl;
});

使用lambda创建一个std::function：

std::function<void()> myFunction = [](){
std::cout << "From myFunction()" << std::endl;
};
auto action2 = CallFunc::create(myFunction);

使用lambda作为MenuItem回调：

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

GUI控件和容器

综述

新的GUI模块是基于GUI控件的框架，最初设计用于Cocos Studio中。新的GUI模块的父类是继承自ProtectedNode的ui::Widget。当从ProtectedNode中添加或者移除子节点时，ProtectedNode用于控制内部Node列表，内部节点列表不会被触发，这对于保持模块内部渲染组件的安全性很有帮助。可以将GUI分成两部分：Widget（控件）和Containers（容器）。

Layout（布局）

Layout类是所有容器的父类，它继承自Widget。Layout类主要用于陈列子控件和剪裁。

LayoutManager、LayoutParameter和Margin类用于陈列元素。HBox、VBox和RelativeBox可以很方便地将子控件水平地、垂直地、相对地陈列。

ScrolView、ListView和PageView是针对某些场景使用的指定容器，将在另一章节中详细讲解。

Widgets（组件）

Widgets是GUI对象，使用组件可以轻松创建用户界面。以下是一些常用组件的介绍：

Buttons（按钮）

按钮用来拦截触摸事件，点击按钮会调用一个预定义的回调函数。它继承自ui::Widget，该类提供了设置按钮标题、图像以及其他属性的方法。每个按钮都有正常状态和被选择的状态，其外观会根据状态而改变。

创建Button的代码示例如下：

auto button = Button::create("animationbuttonnormal.png", "animationbuttonpressed.png");
button->setTitleText("Text Button");
button->setPosition(Vec2(0,0));
button->addTouchEventListener(CC_CALLBACK_2(UIButtonTest::touchEvent, this));
this->addChild(button);

CheckBox（复选框）

CheckBox允许用户进行多重选择，有正常、被选择、不可选三种状态。

创建CheckBox的代码示例如下：

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->setPosition(Vec2(0,0));
checkBox->addEventListener(CC_CALLBACK_2(UICheckBoxTest::selectedEvent, this));
this->addChild(checkBox);

LoadingBar（进度条）

LoadingBar可用于显示操作的进程，例如下载、文件传输等，也可称为状态条。

创建LoadingBar的代码示例如下：

auto loadingBar = LoadingBar::create("sliderProgress.png");
loadingBar->setDirection(LoadingBar::Direction::RIGHT);
loadingBar->setPosition(Vec2(0,0));
this->addChild(loadingBar);

Slider（滑动条）

滑动条允许用户通过移动一个指标来设定值。

创建Slider的代码示例如下：

auto slider = Slider::create();
slider->loadBarTexture("sliderTrack.png");
slider->loadSlidBallTextures("sliderThumb.png", "sliderThumb.png", "");
slider->loadProgressBarTexture("sliderProgress.png");
slider->setPosition(Vec2(0,0));
slider->addEventListener(CC_CALLBACK_2(UISliderTest::sliderEvent, this));
this->addChild(slider);

ImageView（图像显示控件）

ImageView是一个展示图片的占位符，支持触摸事件、对焦、百分比定位和内容大小百分比。

创建ImageView的代码示例如下：

auto imageView = ImageView::create("ccicon.png");
imageView->setPosition(Vec2(0,0));
this->addChild(imageView);

还可以通过SpriteFrame创建一个ImageView：

auto imageView = ImageView::create("ccicon.png", TextureResType::PLIST);
imageView->setPosition(Vec2(0,0));
this->addChild(imageView);

Text（文本）

Text控件用于展示文本，也可将其用作一个写了字的按钮。Text支持系统默认字体和TTF字体。

创建Text控件的代码示例如下：

auto text = Text::create("Text","fonts/MyTTF.ttf",30);
text->setPosition(Vec2(0,0));
this->addChild(text);

与其他Label对象一样，可以给文本添加阴影、光晕、轮廓等特效。

TextBMFont

TextBMFont控件用于显示BMFont文本，支持触摸事件、对焦、百分比定位和内容大小百分比。

创建TextBMFont的代码示例如下：

auto textBMFont = TextBMFont::create("BMFont", "bitmapFontTest2.fnt");
textBMFont->setPosition(Vec2(0,0));
this->addChild(textBMFont);

TextAtlas

TextAtlas控件用于将文本显示为Atlas字体，支持触摸事件、对焦、百分比定位和内容大小百分比。

创建TextAtlas的代码示例如下：

auto textAtlas = TextAtlas::create("1234567890", "labelatlas.png", 17, 22, "0");
textAtlas->setPosition(Vec2(0,0));
this->addChild(textAtlas);

RichText（富文本）

RichText控件用于显示文本、图像和常用节点，支持触摸事件、对焦、百分比定位和内容大小百分比。当接收到一个触摸事件时，整个RichText控件都接收这个事件。

创建RichText控件的代码示例如下：

auto richText = RichText::create();
richText->ignoreContentAdaptWithSize(false);
richText->setContentSize(Size(100, 100));
auto re1 = RichElementText::create(1, Color3B::WHITE, 255, str1, "Marker Felt", 10);
richText->pushBackElement(re1);
richText->setPosition(Vec2(0,0));
richText->setLocalZOrder(10);
this->addChild(richText);

TextField

TextField控件用于输入文本，支持触摸事件、对焦、百分比定位和内容大小百分比。

创建TextField控件的代码示例如下：

auto textField = TextField::create("input words here","Arial",30);
textField->setPosition(Vec2(0,0));
textField->addEventListener(CC_CALLBACK_2(UITextFieldTest::textFieldEvent, this));
this->addChild(textField);