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正如第一篇文章所说的那样：

 1 #ifndef __THIRD_SCENE_H__
 2 #define __THIRD_SCENE_H__
 3
 4 #include "cocos2d.h"
 5 #include "ui/CocosGUI.h"
 6
 7 class UIScene : public cocos2d::Layer{
 8 public:
 9     static cocos2d::Scene* createScene();
10     virtual bool init();
11     void touchEvent(Ref *pSender, cocos2d::ui::Widget::TouchEventType type);
12     CREATE_FUNC(UIScene);
13 };
14
15 #endif //__THIRD_SCENE_H__

然后再cpp中就可以：

 1 #include "UIScene.h"
 2 #include "HelloWorldScene.h"
 3
 4 USING_NS_CC;
 5
 6 Scene* UIScene::createScene(){
 7     auto scene = Scene::create();
 8     auto layer = UIScene::create();
 9     scene->addChild(layer);
10     return scene;
11 }
12
13 bool UIScene::init(){
14     if (!Layer::init()){
15         return false;
16     }
17
18     auto btn = ui::Button::create("CloseNormal.png", "CloseSelected.png");
19     btn->setTitleText("TextButton");
20     btn->setPosition(Vec2(150,100));
21     btn->addTouchEventListener(CC_CALLBACK_2(UIScene::touchEvent,this));
22     this->addChild(btn);
23     return true;
24 }
25
26 void UIScene::touchEvent(Ref *pSender, ui::Widget::TouchEventType type){
27     Director::getInstance()->end();
28 }

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

 1 #include "UIScene.h"
 2
 3 USING_NS_CC;
 4
 5 Scene* UIScene::createScene(){
 6     auto scene = Scene::create();
 7     auto layer = UIScene::create();
 8     scene->addChild(layer);
 9     return scene;
10 }
11
12 bool UIScene::init(){
13     if (!Layer::init()){
14         return false;
15     }
16
17     auto check = ui::CheckBox::create("check_box_normal.png",
18         "check_box_normal_press.png",
19         "check_box_active.png",
20         "check_box_normal_disable.png",
21         "check_box_active_disable.png");
22     check->setPosition(Vec2(240, 160));
23     check->addEventListener(CC_CALLBACK_2(UIScene::selectedEvent, this));
24     this->addChild(check);
25
26     return true;
27 }
28
29 void UIScene::selectedEvent(Ref* pSender, ui::CheckBox::EventType type){
30 //    Director::getInstance()->end();
31 }

Slider和LoadingBar都没做出来，就是看不出效果，看来文档也不靠谱。

 1 #include "UIScene.h"
 2
 3 USING_NS_CC;
 4 using namespace cocos2d::ui;
 5
 6 Scene* UIScene::createScene(){
 7     auto scene = Scene::create();
 8     auto layer = UIScene::create();
 9     scene->addChild(layer);
10     return scene;
11 }
12
13 bool UIScene::init(){
14     if (!Layer::init()){
15         return false;
16     }
17
18     auto slider = Slider::create();
19     slider->loadBarTexture("sliderTrack.png");
20     slider->loadSlidBallTextures("sliderThumb.png", "sliderThumb.png", "");
21     slider->loadProgressBarTexture("sliderProgress.png");
22     slider->setPosition(Vec2(240, 160));
23     slider->addEventListener(CC_CALLBACK_2(UIScene::sliderEvent, this));
24     this->addChild(slider);
25
26     return true;
27 }
28
29 void UIScene::sliderEvent(Ref *pSender, Slider::EventType type){
30 }

LoadingBar连显示都显示不出来，就不贴了。

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

 1 bool UIScene::init(){
 2     if (!Layer::init()){
 3         return false;
 4     }
 5
 6     auto imageView = ImageView::create("HelloWorld.png");;
 7     imageView->setPosition(Vec2(240, 160));
 8     this->addChild(imageView);
 9
10     return true;
11 }

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

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

 1 bool UIScene::init(){
 2     if (!Layer::init()){
 3         return false;
 4     }
 5
 6     auto text = Text::create("Text UI","fonts/arial.ttf",40);
 7     text->setPosition(Vec2(240, 160));
 8     this->addChild(text);
 9
10     return true;
11 }

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

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