Cocos2d-x新UI解决方案的使用

参考了几篇文章：

http://io.diveinedu.com/2015/01/13/Cocos2d-3.x%E4%B8%ADButton%E7%9A%84%E4%BD%BF%E7%94%A8.html

http://www.cocos2d-x.org/wiki/UI#Label

说实话，官方文档不是很好，很多库的使用方法都没有提到，从官方示例项目中找的代码也是添加了很多依赖的，稍微不注意一点就踩坑。

使用Button正如第一篇文章所说的那样：

#ifndef __THIRD_SCENE_H__
#define __THIRD_SCENE_H__

#include "cocos2d.h"
#include "ui/CocosGUI.h"

class UIScene : public cocos2d::Layer{
public:
static cocos2d::Scene* createScene();
virtual bool init();
void touchEvent(Ref *pSender, cocos2d::ui::Widget::TouchEventType type);
CREATE_FUNC(UIScene);
};

#endif //__THIRD_SCENE_H__

然后再cpp中就可以：

#include "UIScene.h"
#include "HelloWorldScene.h"

USING_NS_CC;

Scene* UIScene::createScene(){
auto scene = Scene::create();
auto layer = UIScene::create();
scene->addChild(layer);
return scene;
}

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto btn = ui::Button::create("CloseNormal.png", "CloseSelected.png");
btn->setTitleText("TextButton");
btn->setPosition(Vec2(150,100));
btn->addTouchEventListener(CC_CALLBACK_2(UIScene::touchEvent,this));
this->addChild(btn);
return true;
}

void UIScene::touchEvent(Ref *pSender, ui::Widget::TouchEventType type){
Director::getInstance()->end();
}

使用CheckBox的话监听回调函数就需要不一样的参数了：

#include "UIScene.h"

USING_NS_CC;

Scene* UIScene::createScene(){
auto scene = Scene::create();
auto layer = UIScene::create();
scene->addChild(layer);
return scene;
}

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto check = ui::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");
check->setPosition(Vec2(240, 160));
check->addEventListener(CC_CALLBACK_2(UIScene::selectedEvent, this));
this->addChild(check);

return true;
}

void UIScene::selectedEvent(Ref* pSender, ui::CheckBox::EventType type){
//    Director::getInstance()->end();
}

Slider:

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto mySlider = Slider::create();
mySlider->loadBarTexture("background.png");
mySlider->loadSlidBallTextures("sliderThumb.png","sliderThumb.png","sliderThumb.png");
mySlider->loadProgressBarTexture("sliderProgress.png");
mySlider->setPosition(Vec2(240, 160));
this->addChild(mySlider,1);

return true;
}

效果：



LoadingBar：

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto myload = LoadingBar::create();
myload->setName("LoadingBar");
myload->loadTexture("sliderProgress.png");
myload->setPercent(50);
myload->setDirection(LoadingBar::Direction::LEFT);
myload->setPosition(Vec2(240,160));
this->addChild(myload);

return true;
}

使用cocos2d-x定时更新机制制造动态效果：

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto myload = LoadingBar::create();
myload->setName("LoadingBar");
myload->loadTexture("sliderProgress.png");
myload->setPercent(50);
myload->setDirection(LoadingBar::Direction::LEFT);
myload->setPosition(Vec2(240,160));
myload->setTag(0);
this->addChild(myload);

scheduleUpdate();

return true;
}

void UIScene::update(float delta){
if (count > 100){
count = 0;
}
++count;
auto myload = static_cast<LoadingBar*>(this->getChildByTag(0));
myload->setPercent(count);
}

效果：



ImageView的创建和一般的图片精灵一样：

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto imageView = ImageView::create("HelloWorld.png");;
imageView->setPosition(Vec2(240, 160));
this->addChild(imageView);

return true;
}

据传说ImageView是可以使用PLISH图像的，但是没测试。

Text类似Label，但是只是TTF的Label：

bool UIScene::init(){
if (!Layer::init()){
return false;
}

auto text = Text::create("Text UI","fonts/arial.ttf",40);
text->setPosition(Vec2(240, 160));
this->addChild(text);

return true;
}

TextBMFont和TextAtlas没试，但那时看示例和一般的BMFLabel等相同。

RichText和TextField暂时用不上，也没看。