Cocos2dx之UI组件
Cocos2d-x提供了一套UI组件。包括
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");
- 1
Label TTF
如果不需要为每一个分隔开的字体指定的大小和颜色等，那么使用这个将会十分方便。创建Label TTF需要.ttf 字体文件、文本、字本大小：
auto myLabel = Label::createWithTTF("Your Text", "Marker Felt.ttf", 24);
- 1
不像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");
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Label SystemFont
SystemFont使用默认的系统字体和大小。
auto myLabel = Label::createWithSystemFont("My Label Text", "Arial", 16);
- 1
Label 效果
（１）阴影效果：
auto myLabel = Label::createWithTTF("My Label Text", "myFont.ttf", 16);
// shadow effect is supported by all Label types
myLabel->enableShadow();
- 1
- 2
- 3
- 4
（２）轮廓效果：
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));
- 1
- 2
- 3
- 4
（３）发光效果：
auto myLabel = Label::createWithTTF("My Label Text", "myFont.ttf", 16);
// glow effect is TTF only, specify the glow color desired.
myLabel->enableGlow(Color4B::YELLOW);
- 1
- 2
- 3
- 4
Menu and Menu Items
在我们的游戏，我们可能会使用Menu（菜单）对象来导航选项。菜单中可能会包含按钮，如：Play， Quit，Settings ， About。但也可以嵌套其他菜单对象。Menu（菜单）对象是一个特殊的Node（节点）对象类型 。
可以创建一个空的Menu对象，作为菜单项的占位符：
auto myMenu = Menu::create();
- 1
上面提到的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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
通过 MenuItem对象的向量来创建：
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
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();
- 1
- 2
- 3
- 4
- 5
使用lambda函数作为MenuItem的回调函数：
auto closeItem = MenuItemImage::create("CloseNormal.png", "CloseSelected.png",
[&](Ref* sender){ // your code here
});
- 1
- 2
- 3
- 4
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
我们还可以改变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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/104440201
- 点赞
- 收藏
- 关注作者
评论（0）