【cocos2d-x 每天一学】（5）使用CocoStudio导出的资源

目标： 使用CocoStudio导出资源并调用

cocos2dx 3.0 要发挥其强大的能力，更CocoStudio的使用是分不开的。CocoStudio工具集将ui编辑器、场景编辑器等为开发者提供了不少便利。

现在已经是凌晨了， 我还其他任务没完成， 这边我们就简单的来用cocostudio创建ui，并在游戏中调用。

CocoStudio 下载地址：http://www.cocos2d-x.org/download  目前是 1.4.0.1

CocoStudio在线手册： http://upyun.cocimg.com/CocoStudio/helpdoc/v1.0.0.0/zh/index.html

官网wiki： http://www.cocos2d-x.org/wiki/CocoStudio

安装后图标：

打开后，我们发现有四个工具，具体各个工具的使用我们再接下来的学习中和大家边学边用。

我们点选UI Editor进去，左上角新建项目。从左侧拖一个按钮一个文本框。

布局如右图： 

看下结构：

按钮名字：btn_ok, 按钮的属性里 交互要打勾，不然不会响应点击。

文本框名字： label_show

好了， ui我们就先这么简单的做下， 接下来导出项目， 到出的目录设为我们的游戏工程下的Resouces。点选导出使用大图。

查看resource目录中文件：

 E:\cocos2d-x-3.0\projects\MyCocosTest\Resources 的目录

2014/05/17  01:09    <DIR>          .
2014/05/17  01:09    <DIR>          ..
2014/04/01  18:48             6,311 CloseNormal.png
2014/04/01  18:48             5,499 CloseSelected.png
2014/05/12  21:09    <DIR>          fonts
2014/05/17  01:09    <DIR>          GUI
2014/04/01  18:48           138,777 HelloWorld.png
2014/05/17  01:09             5,570 NewUi_1.ExportJson

接下来我们在cpp中调用刚导出的资源， 3.0正式版刚出来不久，网络上大部分资料都是以前的版本的， 包括官网的文档。我们只能是摸着石头过河了。

还好大神无处不在， 参考 http://blog.csdn.net/fansongy/article/details/18366275

3.0为了支持CocoStudio的开发， 需引入E:\cocos2d-x-3.0\cocos\editor-support ， 里面囊括了各种对资源文件的处理。

1、添加CocoStudio扩展库

 在解决方案上右击-添加-现有项目-选择E:\cocos2d-x-3.0\cocos\editor-support\cocostudio\proj.win32\libCocosStudio.vcxproj ，可看到我们已经将对于CocoStudio资源的处理库导入进来了。

2、添加项目引用

在MyCocosTest项目上右击-引用--添加新引用-点选libCocoStudio-确定。

3、同理导入 libUI 和 libExtension项目， 并添加到引用。

E:\cocos2d-x-3.0\cocos\ui\proj.win32\libGUI.vcxproj 

E:\cocos2d-x-3.0\extensions\proj.win32\libExtensions.vcxproj 

4、添加

在MyCocosTest项目上右击-属性-配置属性-C/C++ - 常规 - 附加包含目录 添加:$(EngineRoot)cocos\editor-support;

5、修改HelloWorldScene.cpp

添加头文件： #include "cocostudio/CocoStudio.h"

删除或注掉 init()  中     // 3. add your codes below... 以下代码。

引入资源：

	// Add resource exported from CocoStudio
	auto uiLayer = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("NewUi_1.ExportJson");
	this->addChild(uiLayer);

此时我们编译运行一下就可以看到刚在UI编辑器里放的那个button了， 由于label为空，所以看不到label。 

明天我们给button加事件。