写在前面——
如果转载请注明出处,谢谢大家支持
同步更新51CTO博客
——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* p_w_picpathView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));
p_w_picpathView->addPushDownEvent(this, coco_pushselector(HelloWorld::ScaleTo2Size));
p_w_picpathView->addReleaseEvent(this, coco_releaseselector(HelloWorld::ScaleResume));
好的,现在我们就需要再添加两个函数ScaleTo2Size和ScaleResume即可,然后这两个函数中分别对这个控件做扩大和还原处理——
voidHelloWorld::ScaleTo2Size(CCObject* pSender)
{
cs::CocoImageView* p_w_picpathView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));
p_w_picpathView->setScale(2.0f);
}
voidHelloWorld::ScaleResume(CCObject* pSender)
{
cs::CocoImageView* p_w_picpathView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));
p_w_picpathView->setScale(1.0f);
}
如上所示,头像控件的名称Forward已经在UI编辑器中修改为“ImageView_Header”,否会找不到的。
看看效果吧~~
原始头像大小如下:
图4
图5
确实按照我们的预期进行了……
在这篇博客中,我们已经解决了在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客末尾提出的两个问题。至此我么可以说是已经做到了“知其然”,但是到底整个CocoGUILIB是如何工作的呢?从文件解析到控件创建,其中的Touch事件又是如何接收与处理呢?CocoGUILIB的结构是什么样子呢?我们现在只是管中窥豹,见其一角,未尽全貌,要是解决了以上提及的问题,或许才可以说“知其所以然”。
对于以上问题,Forward会在《【Cocos2dx工具——Cocostudio界面编辑器】三》中做进一步深入学习与分享~~
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。