cocos2d-x里的UI

2019-05-18 原文

综述

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

如果你需要一些具有相同属性的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,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 desired 
        
        label->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); 
       
        ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-size:1em!important; min-height:inherit!important; color:rgb(0,1); 
       
 Lambda作为菜单回调 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); 
       
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。