一、制作游戏所需的UI。
我们使用的是Cocos Studio forMac 1.0 Beta版，Mac版本将UI、动画、场景编辑器合而为一，在游戏开发时根据需要选择资源，灵活使用。本次我们所做的UI界面大致分为三部分：标签栏、背景层、每个标签对应的功能层。
标签组是独立的层，而每一个标签对应的熔炉玩法分别对应单独层，即标签组内相互关联，玩法容器层各自独立。每个熔炉都是单独的panel，为了方便查看，制作时我们将背景色设置为蓝色半透明。
当编辑完UI单元后，我们可以用Cocos Studio很快拼出初始界面效果。也就是将一些在初始状态下需要显示的控件摆放到位，如图中的熔炉以及标签组。最后只需将层容器的背景色透明度改为0，就可以在模拟器（截图中的小窗口）里看到真实效果，如下图：
二、在项目中运用：
本次我们使用的Cocos2d-x 3.2 RC0版本， 通过cocos2d-console的cocos.py脚本创建工程：”你的cocos2d-x-3.2rc0路径”+\tools\cocos2d-console\bin>cocos.pynew -d ../../../projects -l cpp -p com.cocosstudio.wuzhunui WuzhunUITest，如果使用cpp项目，可以参考http://www.cocoachina.com/bbs/read.php?tid=194668来加入对Cocos Studio相关库的引用。
完成类库的引用后，我们直接在默认的HelloWorldScene类里实现所有的内容。
首先在头文件中添加以下引用及命名空间：
#include "CocoStudio.h"
#include "ui\CocosGUI.h"
using namespace ui;
创建一个全局变量以及方法定义：
private:
Node* rooNode;
void touchEvent(Ref*pSender, Widget::TouchEventType type);
接下来就是最关键的工作了：
第一步是将编辑器中编辑的画面显示到游戏画面中
//添加一个游戏背景
auto sprite =Sprite::create("background.png");
// position the sprite on thecenter of the screen
sprite->setPosition(Vec2(visibleSize.width/2+ origin.x, visibleSize.height/2 + origin.y));
// add the sprite as a child tothis layer
this->addChild(sprite, 0);
//读取导出的json文件，并将编辑器中的画面添加到游戏界面
rootNode =cocostudio::timeline::NodeReader::getInstance()->createNode("wzui_1/wzui_1.json");
this->addChild(rootNode,0);
第二步需要为标签组里的每一个button添加事件响应：
//遍历node下的节点
for (int i = 0; i <rootNode->getChildrenCount(); i++)
{
Node* child = rootNode->getChildren().at(i);
Button * childeBtn ;
//因为getchilden获取的都是子节点，不会遍历，所以先要找到负责管理按钮的层容器
if (child->getTag()==176)
{
Widget * btnGroup =(Widget*)child;
//遍历查找button并添加事件
for (int j = 0; j < 7; j++)
{
Button * childeBtn=(Button*)Helper::seekWidgetByTag(btnGroup,j+18);
childeBtn->addTouchEventListener(CC_CALLBACK_2(HelloWorld::touchEvent,this));
}
}
}
需要注意的是，目前新版本的编辑器的根节点还是Node*对象，且所有的控件均是直接添加到根节点的，所以查找的时候需要先遍历根节点去查找对应的层。有个很简便的解决方法：编辑时添加一个层容器作为根节点，这样每次使用时只需通过rootNode->getChildren().at(0)取出这个UI根节点就可以像以前一样使用了。
下面是对按钮的响应
if (type ==Widget::TouchEventType::ENDED)
{
//获取button 的tag 是18到25
Button *senderBtn =(Button*)pSender;
intbtnTag=senderBtn->getTag();
//panel层是tag=31开始到37
//遍历所有的子节点
for (int i = 0; i <rootNode->getChildrenCount(); i++)
{
Node* child = rootNode->getChildren().at(i);
//移出屏幕
for (int j = 0; j < 7; j++)
{
if (child->getTag()==j+31)
{
child->setPosition(-500,64);
}
}
//移动对应的layer，如果不能看到效果，要注意渲染层级是否正确
if (child->getTag()==btnTag-18+31)
{
child->setPosition(159,64);
}
}
}
自此已经完成了所有的功能，赶快自己动手试试吧！
