cocos2d-x裏的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創建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, "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被選擇的時候。


//
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創建：


//
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 函數，你甚至可以將 lambda 函數作爲回調函數。除了Menu回調， lambda 函數可用作多種函數。

一個簡單的lambda函數：


auto
func = [] () { 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的外觀根據狀態而改變。創建一個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可以有正常、被選擇、不可選三種狀態。創建一個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可用於顯示操作的進程，例如下載、文件傳輸等，也可以稱其爲狀態條。創建一個LaodingBar：


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與創建Text控件一樣：


auto
textBMFont = TextBMFont::create("BMFont",
"bitmapFontTest2.fnt");

textBMFont->setPosition(Vec2(0,0));

this->addChild(textBMFont);

TextAtlas

TextAtlas控件用於將文本顯示爲Atlas字體。支持觸摸事件、對焦、百分比定位和內容大小百分比。


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);

綜述