【分享】Cocos2dx工具之Cocostudio界面编辑器二

桑莱特 发布于 2013/06/05 15:07
阅读 4K+
收藏 5

技术人有1说1,云栖大会热门话题,技术人把酒言欢,马上预约看直播!>>>

 (作者:forward)在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客结束的时候,Forward提出两个问题——1、有了编辑好的UI界面之后,我们如何把它们加载到程序中去呢?2、如何使对应的控件具有对应的功能呢?

         带着上面这两个问题,我们开始今天的博客之旅——《【Cocos2dx工具——Cocostudio界面编辑器】二》

 

 

一、UI界面的加载

 OK,在上一篇博客结束的时候,我们已经用编辑器完成了一个自己的UI,如下图所示:

 1

首先我们创建一个新的工程——UIEditorDemo

         从上一节的说明中我们看到,通过Cocostudio的界面编辑器编辑导出我们得出了一个如下图所示的文件结构:



 2

         好的,下面我们需要的正式这个些资源,将他们拷贝到资源目录下。

         问题来了,有了这些资源与UI界面文件,难道要我们自己去实现解析、UI层级管理、事件响应实现?Cocostudio开发者怎么会这样对我们呢(^_^)?他们已经为我们完成了上述提到问题的解决方案,在Cocostudio官网上,可以找到对应代码下载(CocoGUILIB.zip

         将对应该的UI层级相关的代码导入我们上面创建的UIEditorDemo工程中,(并按照编译报告添加对应的头文件路径即可)

         完成上面的工作之后,在我们的源文件中添加如下代码:

                   COCOUISYSTEM->resetSystem(this);

 

                   COCOUISYSTEM->replaceUISceneWithFile(this, "NewProject.json", 1, true, true,true);

         包含对应头文件即可。

         下面就是见证奇迹的时刻——




 3

         运行程序,我们看到如上图3的运行结果,这不就是我们前天编辑的UI界面吗。不错,加载就是这么简单。

 

二、UI事件的响应:

加载出我们编辑好的UI界面只是第一步,一个不能响应事件的界面是毫无意义的,接下来我们就需要知道如何让这个界面能够响应我们的操作,来完成玩家的交互。

好的,我们这就进入主题

首先我们需要理解UI层面控件的操作流程——只需要获取UI层面这个控件,给它绑定一个事件的回调,然后在回调函数中实现我们的功能即可

这里我们拿ImageView的点击放大与还原效果来做一次演示,其他类似。

操作ImageView(上面的头像就是使用了ImageView)很简单,代码如下:

           cs::CocoImageView* imageView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));

           imageView->addPushDownEvent(this, coco_pushselector(HelloWorld::ScaleTo2Size));

           imageView->addReleaseEvent(this, coco_releaseselector(HelloWorld::ScaleResume));

好的,现在我们就需要再添加两个函数ScaleTo2SizeScaleResume即可,然后这两个函数中分别对这个控件做扩大和还原处理——

voidHelloWorld::ScaleTo2Size(CCObject* pSender)

{

      cs::CocoImageView* imageView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));

      imageView->setScale(2.0f);

}

 

voidHelloWorld::ScaleResume(CCObject* pSender)

{

      cs::CocoImageView* imageView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));

      imageView->setScale(1.0f);

}

如上所示,头像控件的名称Forward已经在UI编辑器中修改为“ImageView_Header”,否会找不到的。

看看效果吧~~

原始头像大小如下:




 4




 5

确实按照我们的预期进行了……

在这篇博客中,我们已经解决了在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客末尾提出的两个问题。至此我么可以说是已经做到了“知其然”,但是到底整个CocoGUILIB是如何工作的呢?从文件解析到控件创建,其中的Touch事件又是如何接收与处理呢?CocoGUILIB的结构是什么样子呢?我们现在只是管中窥豹,见其一角,未尽全貌,要是解决了以上提及的问题,或许才可以说“知其所以然”。

对于以上问题,Forward会在《【Cocos2dx工具——Cocostudio界面编辑器】三》中做进一步深入学习与分享~~


加载中
0
艾戈恋家
嗯,很不错的文章
0
桑莱特
不错呢,顶下
0
桑莱特
顶呀,嘿嘿
返回顶部
顶部