cocosStudio的使用-01-使用UI编辑器导出的文件

cocosStudio还是cocoStudio？

       本菜鸟自学cocos2dx已有半年了，一直从CSDN上扒教程，老大不够意思，现在写下自己的一些心得，希望对别人有帮助。

 

           Cocos Studio这个东西功能不多，对码农来说摸索一下也就会了，也有很多前辈写过这工具的教程了，我们直接从使用导出的文件开始。今天先讲UI编辑器。

      我用的是最新的1.6版本，cocos2dx 是 3.2版本，新版本的资料有点少，总该有人摸索····毕竟新版本有3D骨骼动画了

     

            UI编辑器的全部控件：

       所有的控件都有tag、name两个属性，我们在UI编辑器中编辑好的一些对象，要在代码中进行操作就需要用这两个属性获取他们。

           导出的文件会放入一个文件夹中，我们在画布区域新建的不同画布会导出到不同的文件夹。

画布将NewUi_1导出

文件夹中的内容

大家可以新建一个画布，随便拖几个控件导出文件试下。

下面我们就在cocos2dx中使用这些文件：

新建一个工程，

1.首先添加附加包含目录

这里面有与cocosStudio相关的头文件，使用时还要注意具体路径。

2.添加并引用项目文件：

将这三个项目添加到解决方案，并引用：

3.包含以下头文件 

#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h" 

用到的命名空间：

using namespace cocostudio;
using namespace ui;

 

准备工作完成，可以敲代码了。

直接进init方法，加载UI文件

 //DemoUI
 auto widget= dynamic_cast(GUIReader::getInstance()->widgetFromJsonFile("NewUi_1/NewUi_1.json"));
 auto layer = ui::Layout::create();
 layer->addChild(widget);
 this->addChild(layer);

这段代码就能看出CocosStudio的基本使用方法了

用GUIReader加载文件，使用dynamic转化为ui控件下的控件类对象，再进行使用。

例如，要使用一个Button，可以先为它设置好名字或者tag

//Binding Button
Button * buttonL = dynamic_cast(widget->getChildByName("ButtonL"));
Button * buttonR = dynamic_cast(widget->getChildByName("ButtonR"));

if (buttonL != NULL&&buttonR != NULL)
 {
    buttonL->addTouchEventListener(this, toucheventselector(HelloWorld::DemoCallback));
    buttonR->addTouchEventListener(this, toucheventselector(HelloWorld::DemoCallback));
 }

因为这些对象都是通过dynamic只能转化获得的，使用前最好检测下是否为空。

以下是一些UI控件和对象的对应关系：

按钮 - ui::Button

Panel - ui::Layout

文本框 - ui::Text

图片 - ui::ImageView

滚动视图 - ui::ScrollView

等总结好后，我会整理的，暂时只了解这么多。

运行图：