【cocos2d-x从c++到js】22:使用非侵入方式扩展UI系统接口的举例-阿里云开发者社区

开发者社区> 开发与运维> 正文

【cocos2d-x从c++到js】22:使用非侵入方式扩展UI系统接口的举例

简介:

如何较好的运用脚本语言,使用他的动态性是关键。使用动态性来扩展代码,可以保证非侵入方式。这种方式,把原先的引擎代码和当前自己的二次开发代码隔离开了,便于后续的升级维护。而且,又不像继承那么重量级。


下面就如何用动态添加的扩展方式,使用非侵入来完善和增强CocoStudio的UI功能,做一举例:


零、入口函数


一开始,我们需要加载ui到游戏中,然后我们访问这个ui,在上面执行一系列操作,把结果对象返回出来。这个代码的主干就是这个样子。


1
2
3
4
5
6
7
var loadUI = function(filepath,owner){
    ui = ccs.GUIReader.getInstance().widgetFromJsonFile(filepath)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
    //一系列操作
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
    return ui;
}



在每次加载控件的时候,要使用这个额外扩展的函数,而不是那个引擎里的自带函数。这样在ui加载完成之后,里面所有的东西都已经自动处理好了,直接拿来用就行了。




一、改进子控件访问方式


getChildByName 和 getChildById实在是很罗嗦的方式。因为UI控件本身就是个node,也是按照节点树来组织的。所以,我们可以使用类似JSON的方式,首先递归把所有控件名字都绑定。然后逐个处理。伪代码如下:


1
2
3
4
5
6
7
8
绑定名字(node,owner){
  子节点数组 = node.getChildren()
  遍历子节点数组:{
     名字key = childNode.getName()
     node[名字key]=childNode
     绑定名字(childNode)
  
}


这样就可以通过非常自然的"."方式访问控件了,例如:


1
曾祖父控件.祖父控件.父控件.子控件.xxxxx函数()


二、动态添加接口


动态添加接口,已经说过很多了,继续伪码:


首先,跟上面一样,递归访问所有子节点。


然后用分支代码,判断类型,为了严格包装类型对应,我们使用JavaScript的构造器来判断:


1
2
3
4
5
if(child.constructor == 按钮)
    按钮节点的扩展函数(child)
else if(child.constructor == 文本框)
    文本框节点的扩展函数(child)
//……其他节点类型


然后我在扩展函数里直接,对相应的child进行操作:


1
2
3
4
5
按钮节点的扩展函数(child){
    child.log=function(){
        log("调用log函数成功")
    }
}


三、回调函数自动绑定


为了让UI系统支持自动绑定回调函数,我们可以使用一种特殊的方法。还记得CocosBuilder里面的owner么。


我们在owner上预制几个方法,然后根据节点名字和回调函数类型,直接拼出来。以按钮举例:


1
2
3
4
5
6
7
8
9
10
11
12
owner.touchEventListener_按钮名字 = function(sender, type){
    switch(type){
        case ccui.Widget.TOUCH_BAGAN:
            log("按钮名字 TOUCH_BAGAN")
        case ccui.Widget.TOUCH_MOVED:
            log("按钮名字 TOUCH_MOVED")
        case ccui.Widget.TOUCH_ENDED:
            log("按钮名字 TOUCH_ENDED")
        case ccui.Widget.TOUCH_CANCELED:
            log("按钮名字 TOUCH_CANCELED")
    }
}


因为JavaScript的缺陷,不能拿到当前控件的类型名。还好CocoStudio提供了一个getDescription()接口,里面能够返回一个可用的类型名。然后我们使用拼接方式绑定他:


1
2
3
按钮名字 = child.getName()
fnName = "touchEventListener_" + 按钮名字
child["addEventListener"+child.getDescription()](owner[fnName],owner)


另外,owner最好使用代码生成器做出来,这样可以做到全自动化了。


最后


上面这些写法,适用于任何脚本语言,JS能用,lua也没有问题。






 本文转自 老G 51CTO博客,原文链接:http://blog.51cto.com/goldlion/1401261,如需转载请自行联系原作者


版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章