目前正在和实训的小组成员一起做一款手机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));
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,碰到墙是要惩罚的~
惩罚的方式就是加血~