投稿
  1. 首页
  2. app

cocos2d-x里的UI

黑醋 • 2022-5-24 • app • 阅读 16

cocos2d-x里的UI,第1张

概述综述 Cocos2d-x提供了一套易于使用的UI API来满足你的GUI需求，其中包括：Label、Menu、MenuItems、Buttons和Views。 Label（标签） Cocos2d-x中提供了Label(标签)对象来创建TTF、BMFont和SystemFont文本。 Label BMFont（BMFont标签） BMFont是使用位图字体的标签类型。位图字体是由点或像素矩阵所组成， 综述

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文本：

1 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创建Label的示例：

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

1 2 3 4 5 6 7 8 9 10 11
// 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,serif"> TTFConfig还可以用于显示中文、日文和韩文字符。

Label SystemFont（系统字体标签）

SystemFont是一个使用系统默认的字体和尺寸的标签类型。意思就是说我们不能修改字体的属性，你可以理解为是一种系统字体，系统规则。创建一个SystemFont标签：

1
auto myLabel = Label::createWithSystemFont( "My Label Text" , "Arial" ,16);
标签效果和排版 标签效果

Label对象有一些实话它们的特效效果。当然，不是所有的标签类型都支持所有的特效。这些特效包括阴影、轮廓和光晕效果。

2
// shadow effect is supported by all Label types myLabel->enableShadow();
// outline effect is TTF only,specify the outline color desiredlabel->enableOutline(color4B(100,50,100,100));
// glow effect is TTF only,specify the glow color desired.label->enableGlow(color4B(100,100));
菜单和菜单项

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

菜单由什么组成

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

auto myMenu = Menu::create();
菜单选项和添加到菜单

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

7
// creating a menu with a single item // 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创建：

11 12
// creating a Menu from a Vector of items Vector<MenuItem*> MenuItems; auto closeItem = MenuItemImage::create( "Closenormal.png" , CC_CALLBACK_1(HelloWorld::menuCloseCallback,153)!important; background:none!important">this )); MenuItems.pushBack(closeItem); /* repeat for as many menu items as needed */ auto menu = Menu::createWithArray(MenuItems); lambda函数是指可以在源代码中编写内联函数的函数。Cocos2d-x中可以使用lambda函数，你甚至可以将lambda函数作为回调函数。除了Menu回调，lambda函数可用作多种函数。

一个简单的lambda函数：

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

使用lambda作为Action函数：

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

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

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

使用lambda作为MenuItem回调：

4
auto closeItem = MenuItemImage::create( "Closenormal.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的外观根据状态而改变。创建一个button很简单：

6
auto button = button::create( "animationbuttonnormal.png" , "animationbuttonpressed.png" ); button->setTitleText( "Text button" ); button->setposition(Vec2(0,0)); button->addtouchEventListener(CC_CALLBACK_2(UIbuttonTest::touchEvent,153)!important; background:none!important">this )); this ->addChild(button);
CheckBox（复选框）

CheckBox允许用户可以做多重选择。CheckBox可以有正常、被选择、不可选三种状态。创建一个CheckBox很简单：

9
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,153)!important; background:none!important">this )); this ->addChild(checkBox);
Loadingbar（进度条）

Loadingbar可用于显示 *** 作的进程，例如下载、文件传输等，也可以称其为状态条。创建一个Laodingbar：

4
auto loadingbar = Loadingbar::create( "slIDerProgress.png" ); loadingbar->setDirection(Loadingbar::Direction::RIGHT); loadingbar->setposition(Vec2(0,0)); this ->addChild(loadingbar);
SlIDer（滑动条）

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

7
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,153)!important; background:none!important">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,153)!important; background:none!important">this->addChild(imageVIEw);
Text（文本）

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

auto text = Text::create("Text","Fonts/MyTTF.ttf",30);text->setposition(Vec2(0,153)!important; background:none!important">this->addChild(text);

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

TextBMFont

TextBMFont控件用于显示BMFont文本。支持触摸事件、对焦、百分比定位和内容大小百分比。创建一个TextBMFont与创建Text控件一样：

auto textBMFont = TextBMFont::create("BMFont","bitmapFontTest2.fnt");textBMFont->setposition(Vec2(0,153)!important; background:none!important">this->addChild(textBMFont);
TextAtlas

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

3
auto textAtlas = TextAtlas::create( "1234567890" , "labelatlas.png" ,17,22, "0" ); textAtlas->setposition(Vec2(0,153)!important; background:none!important">this ->addChild(textAtlas);
RichText（富文本）

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

10
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控件：

4
auto textFIEld = TextFIEld::create( "input words here" ,30); textFIEld->setposition(Vec2(0,0)); textFIEld->addEventListener(CC_CALLBACK_2(UITextFIEldTest::textFIEldEvent,153)!important; background:none!important">this )); this ->addChild(textFIEld);
总结

以上是内存溢出为你收集整理的cocos2d-x里的UI全部内容，希望文章能够帮你解决cocos2d-x里的UI所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1043765.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
黑醋 黑醋 一级用户组
0 0
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表（0条）

Copyright © 2022 内存溢出 版权所有 湘ICP备2022025235号 Powered by outofmemory.cn

保存