跨平台版本Cocos Studio制作与使用案例--《武尊》熔炉系统标签页实现教程
触控科技代理的ARPG手游《武尊》拥有众多忠实玩家。作为一款页游，《武尊》取得了相当不错的成绩，堪称手游领域的一次重大突破。
在开发此类游戏时，常面临一个难题：界面繁多，但手机屏幕尺寸有限，难以进行良好的UI布局。然而，《武尊》却出色地解决了这一问题，其UI布局合理，界面直观简洁。熔炉系统便是其中的特色系统之一，它运用“标签”对UI进行分区处理，例如在界面左右两侧均设有标签栏，玩家通过点击标签即可实现多个UI的有序切换。下面，让我们一同学习如何使用Cocos Studio完成这一功能。
一、制作游戏所需的UI
我们采用的是Cocos Studio for Mac 1.0 Beta版，该Mac版本将UI、动画、场景编辑器整合为一体，在游戏开发过程中，可根据实际需求灵活选择和使用资源。本次要制作的UI界面大致可分为三部分：标签栏、背景层以及每个标签对应的功能层。
标签组作为一个独立的层，每个标签对应的熔炉玩法分别对应单独的层，即标签组内相互关联，而玩法容器层则各自独立。每个熔炉均为单独的panel，为了便于查看，在制作时我们将其背景色设置为蓝色半透明。
完成UI单元的编辑后，可利用Cocos Studio迅速拼出初始界面效果。具体而言，就是将一些在初始状态下需要显示的控件摆放至合适位置，例如图中的熔炉和标签组。最后，只需将层容器的背景色透明度设置为0，便可在模拟器（截图中的小窗口）中看到真实效果。
二、在项目中运用
本次我们使用的是Cocos2dx 3.2 RC0版本，通过Cocos2d - Console的cocos.py脚本创建工程，命令如下：
“你的Cocos2d - x 3.2 RC0路径”+\\tools\\cocos2d - console\\bin>cocos.py new -d ../../../projects -l cpp -p com.cocosstudio.wuzhunui WuzhunUITest
若使用cpp项目，可参考《给新建的Cocos2d - x 3.0rc0的Win32工程添加Cocos Studio库》来引入对Cocos Studio相关库的引用。
完成类库的引用后，我们直接在默认的HelloWorldScene类中实现所有功能。
1. 头文件引用及命名空间添加
首先，在头文件中添加以下引用及命名空间：
#include "CocoStudio.h"
#include "ui\\CocosGUI.h"
using namespace ui;
2. 全局变量及方法定义
创建一个全局变量以及方法定义：
private:
Node* rootNode;
void touchEvent(Ref* pSender, Widget::TouchEventType type);
3. 将编辑器画面显示到游戏画面
这是关键步骤之一，具体代码如下：
// 添加一个游戏背景
auto sprite = Sprite::create("background.png");
// 定位精灵到屏幕中心
sprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
// 将精灵添加到当前层
this->addChild(sprite, 0);
// 读取导出的json文件，并将编辑器中的画面添加到游戏界面
rootNode = cocostudio::timeline::NodeReader::getInstance()->createNode("wzui_1/wzui_1.json");
this->addChild(rootNode, 0);
4. 为标签组按钮添加事件响应
// 遍历node下的节点
for (int i = 0; i < rootNode->getChildrenCount(); i++)
{
Node* child = rootNode->getChildren().at(i);
Button * childeBtn;
// 因为getChildren获取的都是子节点，不会遍历，所以先要找到负责管理按钮的层容器
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根节点，就可像以前一样使用。
5. 按钮响应处理
if (type == Widget::TouchEventType::ENDED)
{
// 获取button的tag是18到25
Button * senderBtn = (Button*)pSender;
int btnTag = 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);
}
}
}
至此，所有功能已实现，你可以亲自动手尝试一下。
Lua版本实现
local function creatMainUI()
local rootNode = ccs.NodeReader:getInstance():createNode("res/wzui_1/wzui_1.json")
-- 点击处理方法
local children = rootNode:getChildren()
local function touchEvent(sender, eventType)
if eventType == ccui.TouchEventType.ended then
for i = 1, tonumber(rootNode:getChildrenCount()) do
local child = children[i]
for j = 0, 6 do
if child:getTag() == j + 31 then
child:setPosition(-500, 64)
end
end
if child:getTag() == sender:getTag() - 18 + 31 then
child:setPosition(159, 64)
end
end
end
end
-- 添加事件
for i = 1, tonumber(rootNode:getChildrenCount()) do
local child = children[i]
if child:getTag() == 176 then
for j = 0, 6 do
local childBtn = ccui.Helper:seekWidgetByTag(child, j + 18)
if childBtn ~= nil then
childBtn:addTouchEventListener(touchEvent)
end
end
end
end
return rootNode
end