Cocos2d-x 3.x开发——导入Cocostudio资源

转自--https://segmentfault.com/a/1190000000593010

          http://www.benmutou.com/archives/918

目前正在和实训的小组成员一起做一款手机2D游戏，我们采用了Cocos2d-x进行开发。之前虽然早有耳闻，这次却是第一次认真地学习和使用Cocos2d-x。最开始的几天就是在不停的看文档和爬坑。其中一个坑就是Cocostudio这货。官网的文档滞后而且不够详细，为了弄清楚，借鉴了很多博客，也阅读了示例代码。
本人Cocos2d-x的版本是3.1，Cocostudio的版本是1.5.
Cocostudio目前的功能包括UI编辑器、动画编辑器、场景编辑器和数据编辑器。数据编辑器没有涉及到，就不说了。剩下三者中主要讲下导入UI编辑器的资源。
UI编辑器导出的文件包括一个.ExportJson文件，一个.plist文件和一个.png文件。Cocostudio中文官网中说的是TouchGroup，英文官网中是UILayer，可是都已经不存在了。UILayer变成了Layer，现在也可以不创建Layer，直接加到场景上面。所以代码可以这样：

Node *pNode = GUIReader::getInstance()->widgetFromJsonFile("test.ExportJson");
this->addChild(pNode);

下面就可以用getChildByTag来获取组件了。不过getChildByTag貌似只能按照树的结构一层层照下来，显得很麻烦，而且不能按照名字来取。所以，现在可以用ui中的Helper直接从树中获取组件，用name或者tag。但seekWidgetByTag和seekWidgetByName的第一个参数是Widget类型，需要将pNode转成Widget类型。（从.ExportJson文件可以看出来，pNode本来就是一个Widget类型的树）

Button *button = (Button*)(ui::Helper::seekWidgetByName(pNode, "button"));

顺便附上绑定事件监听的代码，使看到的人免去寻找之苦。

button->addTouchEventListener(CC_CALLBACK_2(MainScene::touchEvent, this));

touchEvent是自己写的方法。这个方法大致是如下用法，注意pSender和type的使用。

    void SingleMenuScene::selectEvent(Ref *pSender, Widget::TouchEventType type)
{
    switch(type)
    {
    case Widget::TouchEventType::ENDED:
        GameSetting::Map map = GameSetting::Map::DEFAULT;
        if(pSender == defaultBtn)
        {
            map = GameSetting::Map::DEFAULT;
        }
        else if(pSender == snowBtn)
        {
            map = GameSetting::Map::SNOW;
        }

        Scene *game = BattleScene::createScene(map);
        TransitionScene *transition = TransitionFade::create(0.5, game);
        Director::getInstance()->replaceScene(transition);

    }
}

导入动画编辑器的动画的代码如下：

CCArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("Animation0.png","Animation0.plist","Animation.ExportJson");
CCArmature *armature = CCArmature::create("Animation");
armature->getAnimation()->playByIndex(0);
armature->setScale(0.5f);
armature->setPosition(ccp(visibleSize.width * 0.5, visibleSize.height * 0.5));
this->addChild(armature);

导入场景编辑器的场景的代码如下：

Node* pNode = SceneReader::getInstance()->createNodeWithSceneFile("scene.ExportJson");
this->addChild(pNode);

这个读出的Node貌似不能转成Widget，因为它不仅包括UI组件还有动画等资源。获取组件和绑定事件监听可以这样写：

ComRender *render = (ComRender*)(pNode->getChildByTag(10010)->getComponent("GUIComponent"));
Widget *widget = (Widget*)(render->getNode());
widget->addTouchEventListener(CC_CALLBACK_2(MainScene::touchEvent, this));

• 2014年07月01日发布 
• 更多

3 推荐 收藏

Cocos2d-x3.0游戏实例之《别救我》第六篇——从代码中获取UI控件

这篇的内容很简单，获取UI控件，然后使用它。

 

还记得我们在UI编辑器中给三个按钮分别命名了吧？

现在要用上了。

 

笨木头花心贡献，啥？花心？不呢，是用心~

转载请注明，原文地址： http://www.benmutou.com/archives/918

文章来源：笨木头与游戏开发

 

根据名字查找控件

首先给TollgateScene再include一些头文件，不然等会编译又报错了：

    
    

     
     

      
      
#include "editor-support/cocostudio/CCSGUIReader.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h"
using namespace cocos2d::ui;
using namespace cocostudio;
     
     
    
    


    
    

 

上面就是比较完整的使用UI所需要用到的头文件了。

 

然后，获取UI控件的方法如下，继续修改createOprUI函数：

    
    

     
     

      
      
void TollgateScene::createOprUI()
{
    auto UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("OprUI_1.ExportJson");
    this->addChild(UI);
 
    /* 获取按钮对象 */
    Button* rightBtn = (Button*)Helper::seekWidgetByName(UI, "rightBtn");
    Button* quickMoveBtn = (Button*)Helper::seekWidgetByName(UI, "quickMoveBtn");
    Button* leftBtn = (Button*)Helper::seekWidgetByName(UI, "leftBtn");
}
     
     
    
    


    
    

Helper::seekWidgetByName函数会从UI里面找控件，一层层的找，父控件找不到，就找子控件，如此递归，最后找的名字相符的控件，返回这个控件对象。

 

很简单，不多解释喇~

 

添加按钮回调事件

OK，最后一步了，现在按钮摆在那里什么都做不了，我们给按钮添加回调事件~

 

先给TollgateScene添加三个函数声明：

    
    

     
     

      
      
    void moveToLeft(Ref* sender, TouchEventType type);
    void moveToRight(Ref* sender, TouchEventType type);
    void quickMove(Ref* sender, TouchEventType type);
     
     
    
    


    
    

这是Button点击事件回调时所需要的函数格式。

 

然后，继续修改createOprUI函数：

    
    

     
     

      
      
void TollgateScene::createOprUI()
{
    auto UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("OprUI_1.ExportJson");
    this->addChild(UI);
 
    /* 获取按钮对象 */
    Button* rightBtn = (Button*)Helper::seekWidgetByName(UI, "rightBtn");
    Button* quickMoveBtn = (Button*)Helper::seekWidgetByName(UI, "quickMoveBtn");
    Button* leftBtn = (Button*)Helper::seekWidgetByName(UI, "leftBtn");
 
    /* 添加按钮回调事件 */
    leftBtn->addTouchEventListener(this, toucheventselector(TollgateScene::moveToLeft));
    rightBtn->addTouchEventListener(this, toucheventselector(TollgateScene::moveToRight));
    quickMoveBtn->addTouchEventListener(this, toucheventselector(TollgateScene::quickMove));
}
     
     
    
    


    
    

 

利用addTouchEventListener函数就可以绑定按钮的回调事件了~

 

最后了，看看三个回调函数的实现：

    
    

     
     

      
      
void TollgateScene::moveToLeft(Ref* sender, TouchEventType type)
{
    switch (type)
    {
    case TOUCH_EVENT_ENDED:
        m_player->moveToLeft();
        break;
 
    }
}
 
void TollgateScene::moveToRight(Ref* sender, TouchEventType type)
{
    switch (type)
    {
    case TOUCH_EVENT_ENDED:
        m_player->moveToRight();
        break;
 
    }
}
 
void TollgateScene::quickMove(Ref* sender, TouchEventType type)
{
    switch (type)
    {
    case TOUCH_EVENT_ENDED:
        m_player->quickMove();
        break;
 
    }
}
     
     
    
    


    
    

是不是感觉有点小复杂？

应该说，有点小麻烦，因为按钮事件绑定的时候，是没有区分“按下”、“移动”、“松开”的，所以我们要自己判断一下，TOUCH_EVENT_ENDED就是按钮点击，然后松开的时候的事件。

如果大家觉得麻烦，可以自己改源码，添加一些函数，在绑定按钮事件的时候，可以指定绑定哪种事件。以及可以使用std::function来作为参数，这样很方便，当然，跑题了。为了避免大家混乱，这里就不介绍了。

 

运行测试

OK，现在大家运行游戏，然后点击这三个操作按钮，看看主角是不是能左右移动以及放屁（向下冲）吧~

 

 

下一篇，添加碰撞检测，让主角碰到墙壁之后，进行加血。

没错，就是加血，不是扣血~因为《别救我》胜利的条件是血量为0，碰到墙是要惩罚的~

惩罚的方式就是加血~