cocos2d-x 3.0学习一:cocostudio导出UI界面文件的加载及使用的若干问题

前端之家收集整理的这篇文章主要介绍了cocos2d-x 3.0学习一:cocostudio导出UI界面文件的加载及使用的若干问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

cocos2d-x版本:3.x

cocostudio版本:1.6

说一些抱怨的话,cocos2d-x自3.0以后发生的变化可以用翻天覆地来形容都不为过,不但类名与2.x版本的不一样(不仅仅只是体现在去掉2.x版本的类名开头CC),一些类名甚至可以说全改了,对资源的解析也采取了不一样的方式,而网络上的技术贴很多都是2.x版本的,一旦出现问题,官网上的指导有时候都不管用,真是头大,坑特多,不知道为啥需要这么大的变化的,边学边记,碰到问题解决了就赶紧记下来吧,不然以后又被坑了。

闲话不说,开始正题!

第一点,cocostudio到处的UI文件的加载解析问题。

cocos2d-x的英文官网我没有去看,只是看了中文官网的指导,原来想着ui界面的加载,那按照官网指导肯定是最权威,可是,就这样被坑了一下。

以下的内容是官方的指导:

将导出后的项目放到资源文件件中。(假设画布名称为“UIEditorTest_1”)

<div class="dp-Highlighter bg_cpp" style="font-family: Consolas,'Courier New',Courier,mono,serif; font-size: 12px; width: 659.328125px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231,229,220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana,Geneva,Helvetica,sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108,226,108); background-color: rgb(248,248,248);"><strong>[cpp]</strong> <a target=_blank href="http://blog.csdn.net/yangyunchenrt/article/details/39926367#" class="ViewSource" title="view plain" style="color: rgb(160,160,160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/yangyunchenrt/article/details/39926367#" class="CopyToClipboard" title="copy" style="color: rgb(160,160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 851px; top: 847px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-cpp" style="padding: 0px; border: none; color: rgb(92,92,92); margin: 0px 0px 1px 45px !important; background-color: rgb(255,255,255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comment" style="margin: 0px; padding: 0px; border: none; color: rgb(0,130,0); background-color: inherit;">//根据文件创建一个界面</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"></span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">TouchGroup*ul=TouchGroup::create();</span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile(<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"UIEditorTest_1.json"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">));</span></span></li></ol></div><div class="dp-Highlighter bg_cpp" style="font-family: Consolas,160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 851px; top: 952px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-cpp" style="padding: 0px; border: none; color: rgb(92,0); background-color: inherit;">//根据tag获取一个控件</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"></span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">ul->getChildByTag(1);</span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="comment" style="margin: 0px; padding: 0px; border: none; color: rgb(0,0); background-color: inherit;">//播放UI动画</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"></span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">AnimationManager::shareManager()->getAnimationByName(<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"DemoHead_UI.json"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">,</span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"Animation0"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">)->play();</span></span></li></ol></div>
乍一看,TouchGroup的类名风格像是3.x的,心中窃喜,心想这下不坑了(确实被混乱的版本整怕了,我还是小白,囧),继续,咱将导出后的文件放入资源文件夹,然后敲代码,TouchGroup *,不对,头文件,命名空间是什么?赶紧api文档打开,搜索TouchGroup,顿时傻眼...

木有TouchGroup这个类有木有啊!

只有Touch类啊有木有啊!

Touch类不是我们要的有木有啊!!

说多了都是泪啊有木有啊!!!

好吧,没办法了,谁让咱要用人家呢,谁让别人家都是大爷呢!百度打开,Google打开(额,谷歌被墙了,没法用了,555...),只能百度了,TouchGroup不能用了,那用啥呢,有说Helper类,有说UILayer的(UILayer还是2.x时代的好不好撒,呜呜...),各种混乱,最后还是在官网论坛上找到了一点指导,说多了还是泪啊...

以下是解决方法

  1. Node*pNode=GUIReader::getInstance()->widgetFromJsonFile("test.ExportJson");
  2. this->addChild(pNode);
好吧,能导入了,GUIReader全名是这样的cocostudio:GUIReader,命名空间,头文件不要少,引入....然后,要拿子控件了...我又忍不住要去擦一把眼泪的...

当时我的UI界面里头做了个头像跟血条,一说到血条,顺带说一个糗事,血条当时看到有本书上说可以用slider来做,然后我很自然的就:

copy

    Slider*hpbar=(Slider*)(Helper::seekWidgetByName(pNode,"hpbar"));
  1. hpbar->setPercent(90);

然后就糗了,程序崩溃,后来打开Json文件看了下类名(忽然想出来的一招),哟,这玩意不是Slider,而是LoadingBar,好,这下解决了:

copy

    LoadingBar*hpbar=(LoadingBar*)(Helper::seekWidgetByName(pNode,51); font-family:Arial; font-size:14px; line-height:26px">又过了一关,好累!

    然后呢,UI界面里头添加了几个文本框用来显示信息,嘿嘿,这下劳纸会了,打开Json文件,嘿嘿,类名是Label,这下被我抓到了,然后:

    copy

    Label*level=(Label*)(Helper::seekWidgetByName(pNode,"level"));
  1. level->setString("猪猪猪");

然后编译运行,又华丽丽的报错有木有,又被坑了有木有?

一通百度,在某个旮旯角落里发现了,cocos2d-x自3.x以后,把对UI界面的文本框Label解析,交给了Text类负责,Text类是啥,好强大的,有靠山的,不知道的可以百度下...

好吧,改成Text类,终于解决了!

感言:为了导入cocostudio做出来的UI,新手小白博主做了无数奋力的尝试,倍觉艰辛,但最终还是完成了,涉及到版本的变更问题真是麻烦,实在期望后续的cocos2d-x版本不要再做这种改动了,因为api文档的说明也很简陋,真的蛮难的,可能还没找对方向吧,收拾收拾,继续上路,话说,我目前的想法是做一款RPG横版的小游戏出来,一切的东西都是为了这个目标而做的,且做且学吧~~

猜你在找的Cocos2d-x相关文章