标签(Label)
使用Label对象可以使用位图字体、TrueType字体、系统字体创建标签。这个单一个类能处理所有标签需求。
BMFont
BMFont是一个使用位图字体创建的标签类型,位图字体中的字符由点阵组成。使用这种字体标签性能非常好,但是不适合缩放。标签中的每一个字符都是一个单独的Sprite,也就是说精灵的属性控制都适用于这里的每个字符。
创建BMFont标签需要两个文件:.fnt文件和.png文件。
- auto myLabel = Label::createWithBMFont("bitmapRed.fnt","Your Text");
所有标签中出出的字符都应该能提供.fnt文件,如果找不到,字符就不会被渲染。如果你渲染了一个Label,同时它有丢失字符,记得去查看一个.fnt文件是否完备。
TTF
TrueType字体不需要为每种尺寸的和颜色单独使用字体文件,在绽放时不会失真。要创建这种标签,需要指定.ttf字体文件名,文本字符串和字体大小。
- auto myLabel = Label::createWithTTF("Your Text","Marker Felt.ttf",24);
虽然使用TrueType字体比使用位图字体更灵活,但是它渲染速度较慢,并且更改标签的属性(字体,大小)是一项非常消耗性能的操作。
如果你需要具有相同属性的多个Label对象,那可以创建一个TTFConfig对象来统一配置,TTFConfig对象允许你设置所有标签的共同属性。
- // 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也能用于展示中文、日文、韩文的字符。
SystemFont
标签效果
在屏幕上有标签后,它们可能看起来很普通,这时你希望让他们变漂亮,Label对象可以对标签应用效果,包括阴影、描边、发光。
- auto myLabel = Label::createWithTTF("myFont.ttf","My Label Text",16);
- // shadow effect is supported by all Label types
- myLabel->enableShadow();
- auto myLabel = Label::createWithTTF("myFont.ttf",16);
- // outline effect is TTF only,specify the outline color desired
- myLabel->enableOutline(Color4B::WHITE,1));
- auto myLabel = Label::createWithTTF("myFont.ttf",16);
- // glow effect is TTF only,specify the glow color desired.
- myLabel->enableGlow(Color4B::YELLOW);
菜单
Menu对象是一种特殊的Node对象。
- auto myMenu = Menu::create();
菜单项一般有正常状态和选择状态,菜单项显示时是正常状态,当你点击它时变为选择状态,同时点击菜单还会触发一个回调函数。
- // 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);
- // creating a Menu from a Vector of items
- Vector<MenuItem*> MenuItems;
- auto closeItem = MenuItemImage::create("CloseNormal.png",this));
- MenuItems.pushBack(closeItem);
- /* repeat for as many menu items as needed */
- auto menu = Menu::createWithArray(MenuItems);
- this->addChild(menu,1);
使用Lambda表达式
C++11支持Lambda表达式,lambda表达式是匿名函数,使用lambda表达式,能让代码看起来更简洁,同时不会有额外的性能开销。
- // create a simple Hello World lambda
- auto func = [] () { cout << "Hello World"; };
- // now call it someplace in code
- func();
- auto closeItem = MenuItemImage::create("CloseNormal.png",[&](Ref* sender){
- // your code here
- });
按钮(Button)
按钮有一个正常状态,一个选择状态,还有一个不可点击状态,按钮外观可以根据这三个状态而改变。创建一个按钮并定义一个回调函数很简单,记得在操作的时候要有头文件包含:#include "ui/CocosGUI.hs"。
- 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)
- #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);
进度条(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);
- #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);
从上例可以看出,实现一个滑动条需要提供5张图像,对应滑动条的不同部分不同状态,分别为:滑动条背景、上层进度条、正常显示的滑动端点、滑动时的滑动端点、不可用时的滑动端点。
文本框(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);
提供的文本框架对象,是多功能的,能满足所有的输入需求,比如用户密码的输入,限制用户可以输入的字符数等等。
- #include "ui/CocosGUI.h"
- auto textField = TextField::create("",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);