跨平台版本Cocos Studio制作与使用——《武尊》熔炉系统标签页实现

Studio
#1

此前由触控科技代理的ARPG手游《武尊》取得了很好的成绩，24小时内便跻身付费榜TOP3。作为页游，武尊已经取得很不错的成绩，本次在手游上的尝试又是一次重大突破。此类游戏在开发时经常遇到一个问题：界面多，手机屏幕小，无法很好的布局UI。但是《武尊》却处理的很好，UI布局合理，界面直观简洁。熔炉系统是其中的特色系统之一，它用到了“标签”对UI进行分区处理，如图左右两侧均有标签栏，通过点击标签实现多UI有序切换。下面就跟小编一起学习如何用Cocos Studio完成这项工作吧！

1.png1107×830

一、制作游戏所需的UI。
我们使用的是Cocos Studio forMac 1.0 Beta版，Mac版本将UI、动画、场景编辑器合而为一，在游戏开发时根据需要选择资源，灵活使用。本次我们所做的UI界面大致分为三部分：标签栏、背景层、每个标签对应的功能层。

4.png656×593

标签组是独立的层，而每一个标签对应的熔炉玩法分别对应单独层，即标签组内相互关联，玩法容器层各自独立。每个熔炉都是单独的panel，为了方便查看，制作时我们将背景色设置为蓝色半透明。当编辑完UI单元后，我们可以用Cocos Studio很快拼出初始界面效果。也就是将一些在初始状态下需要显示的控件摆放到位，如图中的熔炉以及标签组。最后只需将层容器的背景色透明度改为0，就可以在模拟器（截图中的小窗口）里看到真实效果，如下图：

5.png1151×898

二、在项目中运用：本次我们使用的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(RefpSender, 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 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 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); } } }
自此已经完成了所有的功能，赶快自己动手试试吧！
run.gif960×635

工程文件： WuzhunUITest.zip (2122 KB)
编辑器文件： wzui.zip (3386 KB)

#2 
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*
                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*
        if child:getTag() == 176 then
            for j =0,6 do
                local childBtn = ccui.Helper:seekWidgetByTag(child,j+18)
                if childBtn~= nill then
                    childBtn:addTouchEventListener(touchEvent)
                end
            end
        end
    end
    return rootNode
end

**
**
**
**
**
----------------------
*
*
源文件： main.zip (1 KB)

#3

目前使用Cocos2d-x 3.2rc0版本会有控件坐标出错的问题，请参考这个pr修改您的代码

https://github.com/cocos2d/cocos2d-x/pull/7519/files

下个发布版本将会修复该问题

#4

大哥，xcode编译时出错，
说CocoStudio.h file not found
#include "ui\CocosGUI.h"这文件也找不到，咋解决？我加上相对路径#include "editor-support\cocostudio\CocoStudio.h"也找不到，大哥请指教，我是xcode neweer。。。。。。

#5

:12: 周一帮你看看吧，现在木有Mac

#6

因为使用了mac版的cocostudio，从2.2.2的项目移植到2.2.4，从json能加载widget了，从层容器取不到按钮，从widget取不到层容器，给的代码有点出入

#7

不知道你的项目进行度如何，但是推荐你优先采用3.2版本（如果可以的话）。

Mac版本目前还是较早期，功能不够完善，如果你有任何问题都欢迎向我们反馈。

#8

2.2.4当然是不行的，
我就下3.2，然后开始改代码，
现在还有bug就是，所有ui上的子节点全部跑到（0，0）去了
详见：http://www.cocoachina.com/bbs/job.php?action=topost&tid=214966&pid=1009246

#9

我在2楼不是发了那个解决办法么···
→_→

#10

Windows上的Cocostudio有没有标签页的功能？

#11

任意版本都是没有的，现在的Cocos 2d-x只包含基础型控件，不会添加扩展型控件。

#12

那就是需要自己添加了

#13

有问题, NodeReader 得到的 node, 如何作为 ListView的item使用. 运行就报错

CCNode *node = (NodeReader::getInstance()->createNode("R/ListCell.ExportJson"));
listroot = static_cast<Layout*>(node->getChildren()->objectAtIndex(0));

listView->setItemModel(listroot);

for (int i = 0; i < 5; ++i)
{
    listView->pushBackDefaultItem();
}
#14

有问题, NodeReader 得到的 node, 如何作为 ListView的item使用. 运行就报错

CCNode *node = (NodeReader::getInstance()->createNode("R/ListCell.ExportJson")); 
listroot = static_cast<Layout*>(node->getChildren()->objectAtIndex(0)); 
 
listView->setItemModel(listroot); 
 
for (int i = 0; i < 5; ++i) 
{ 
    listView->pushBackDefaultItem(); 
}
#15

这个非常不错的说，赞:14:

#16

能否提供下报错信息呢？你使用的版本是什么呢

#17

版主能否帮忙解答下问题。http://www.cocoachina.com/bbs/read.php?tid=218427 多谢多谢

#18

rootNode = cocostudio::timeline::NodeReader::getInstance()->createNode(“wzui_1/wzui_1.json”); //运行到这里就报错

RAPIDJSON_ASSERT(IsObject()); //报错的内容是这个

#19

你的资源是用什么做的啊？教程里用的是Mac版本

#20

— Begin quote from ____

引用第3楼ahatest于2014-07-19 09:14发表的 回 楼主(hanrea) 的帖子 :
大哥，xcode编译时出错，
说CocoStudio.h file not found
#include "ui\CocosGUI.h"这文件也找不到，咋解决？我加上相对路径#include "editor-support\cocostudio\CocoStudio.h"也找不到，大哥请指教，我是xcode neweer。。。。。。 http://www.cocoachina.com/bbs/job.php?action=topost&tid=215055&pid=1007704

— End quote

我也出现这个问题，求解