Cocos2d-x不仅是有框架，还提供了一个编辑器，可以对动画、UI、和场景编辑的功能。使用这些工具，大大缩短了用Cocos2d-x开发周期。

下载地址：， 现在MAC的版本也出来了。

下图是界面

然后启动，新建一个项目：

这样就完成项目的创建。

在编辑之前，需要先给项目提供资源，一种是把资源拖到右边的资源列表或都在资源列表打开选择资源对话框。

插入结果

其它资源依此类推。

项目创建会默认创建一个画布和一个容器panel：

在正式编辑UI之前，需要先设置画面大小，这个跟据你项目的要求设置。

下面在画面中，填加一个图片。很不幸，你不能从资源列表直接拖到中间的画布上只，只能在画布或对象列表使用右键，弹出右键菜单，添加图片对象。

然后，用鼠标选这个对象。在画面的右边，会有一个对象的属性面板。

属性面版有尺寸和模式、常规、控件布局、特性。大家可以尝试设置，就知道他的作用了。添加完成后，把具体的图片资源拖到属性面版->特性->文件框内，就可以了。

结果

这样就OK了。

在属性面板有一个Tag属性和名子属性要注意一下，我面在加载UI后，可以通过这两个属性取得UI中的这个对象。

可能调整渲染层级达到调整显示次序的效果。

按照上面的步骤，就可以很快的做出UI了。

做完后，就需要导出UI了，Cocos2d-x是不能直接使用UI工程的，需要使用导出的。

在导出资源这块，要注意一下，使用大图，会把用到的资源拼成一个大图，可以提高效率。使用小图，则把资源的图原样复制过去。这个看你的取舍了。

导出完成后，把导出的目录复制到cocos2dx工程的Resource这个目录下面，就可以在项目中使用了。

最后在需要使用这个UI的场景

cocostudio如何在cocos2dx中跑起来了呢？看下面。

1、在cocostudio下创建完项目，记得每个控件对应的name，因为程序中是通过这个name来获取该控件的；

2、导出项目，可以直接导入到cocos2dx项目的Resourses目录下，导出的文件包括项目用到的资源，最重要的还是.json / .ExportJson文件；

3、打开cocos2dx项目文件（VS2012以上版本），将libCocostudio，libExtensions,libGUI三个库文件导入到解决方案中，导入方法也就是选中“解决方案”，右键，添加现有项目，然后自己到Cocos2dx根目录的cocos目录下找吧（不同版本位置不一样，对应着相应版本目录找一下吧，如下图）。

4、包含头文件

#include "cocostudio/cocostudio.h"//.ExportJson需要它的支持#include "ui/CocosGUI.h"//从 .ExportJson获取各种ui控件 需要它的支持using namespace cocostudio;using namespace ui;

如果不出意外的话， 上面两条代码写完编辑器是会报错的，因为找不到该头文件。原因在于IDE只能在默认的那些目录下寻找头文件。所以接下来就是要设置默认目录，方法如下：

选中自己创建的项目，如HelloWorld，右键，在弹出的菜单中选择最下方的项目属性 ，在出现的窗口里选择C/C++,选择附加包含目录，然后将添加下面几行  ：

$(EngineRoot)cocos  
$(EngineRoot)cocos\extensions  
$(EngineRoot)cocos\editor-support\  
$(EngineRoot)cocos\editor-support\cocostudio 

5、编译下项目，报错！因为没有添加引用，方法如下：

选中自己创建的项目，如HelloWorld，右键，在弹出的菜单中选择最下方的项目属性 ，在出现的窗口里选择 通用属性 -- 框架和引用 -- 添加新引用 --之后会出现一堆lib**，将libCocostudio,libExtenstions,libGUI都选中添加进去。

6、最后要做的肯定就是将Cocostudio制作出来的工程显示在程序窗口中，调用以下代码：

auto uiLayer = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1/HelloUI_1.ExportJson");this->addChild(uiLayer );

7、再次编译，画面太美我敢看。

来源网址：