跨平台版本Cocos Studio制作与使用(转)

其实我一直不是很喜欢cocos2d-x的。之前的2.x版本说真的，是没有cocos2d-iphone的Objective-C好用。但自从版本升级到了现在的cocos2d-x 3.x之后，主要是真对UI编辑器和精灵的骨骼动画的完美支持让我开始对cocos2d-x有了一些好感。现在的cocos2d-x 3.2版本作一些游戏界面真的是非常不错。而且骨骼动画也作的非常完美了，不但骨骼动画可以作的很逼真，还加入了骨格动画的帧事件。可以说在2D游戏方面，cocos2d-x是越来越接近flash的简单易用的级别了。相信再要不了多久，这个引擎会越来越好用。这些好用的特性我在新的cocos2d-iphone的开源编辑器SpriteBuilder中没有看到，这个编辑器现在已经不支持最新的cocos2d-x了，骨骼动画也不错，场景编辑也不错，但觉得没有cocos studio好用。但真对苹果的Objective-C语言的cocos2d-iphone的编辑器还是SpriteBuilder好用一些。因为苹果的新语言swift是可以和Objective-C完美结合的。所以，如果以后大家开发游戏都用swift那可能会转向使用SpriteBuilder来作。

如果之后加入的3D级别的引擎非常完美，那cocos2d-x就有可能成为历史上最好的开源游戏引擎了。之所以这么说是因为这个引擎夸平台特性非常好。不但支持C++,而且支持html5,可以说使用这个游戏引擎已经可以开发几乎所有主流操作系统上的游戏了，linux,windows,mac,ios,android，开发这些系统上的2D游戏现在已经不在话下了。3D话可能还有一段路要走。3D游戏目前Unity3D还是主流，但是U3D不开源，而且收费。下边转了一个关于cocos2d-x有UI编辑器作的UI导入到项目的例子。大家一起来学习。

转自： http://www.cocoachina.com/bbs/read.php?tid=215055

此前由触控科技代理的ARPG 手游《武尊》取得了很好的成绩，24 小时内便跻身付费榜TOP3 。作为页游，武尊已经取得很不错的成绩，本次在手游上的尝试又是一次重大突破。

此类游戏在开发时经常遇到一个问题：界面多，手机屏幕小，无法很好的布局UI 。但是《武尊》却处理的很好，UI 布局合理，界面直观简洁。熔炉系统是其中的特色系统之一，它用到了“标签”对UI 进行分区处理，如图左右两侧均有标签栏，通过点击标签实现多UI 有序切换。下面就跟小编一起学习如何用Cocos Studio 完成这项工作吧！

  

一、制作游戏所需的 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);

             }

         }

    }

 

自此已经完成了所有的功能，赶快自己动手试试吧！

 

原文上有工程文件，大家去那里下载吧，这里就不写那个下载地址了。