【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,如需转载请自行联系原作者


相关文章
|
28天前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
261 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
4月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
23天前
|
监控 算法 JavaScript
基于 Node.js Socket 算法搭建局域网屏幕监控系统
在数字化办公环境中,局域网屏幕监控系统至关重要。基于Node.js的Socket算法实现高效、稳定的实时屏幕数据传输,助力企业保障信息安全、监督工作状态和远程技术支持。通过Socket建立监控端与被监控端的数据桥梁,确保实时画面呈现。实际部署需合理分配带宽并加密传输,确保信息安全。企业在使用时应权衡利弊,遵循法规,保障员工权益。
38 7
|
2月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
40 2
2024年5月node.js安装(winmac系统)保姆级教程
|
1月前
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
56 8
|
1月前
|
前端开发 JavaScript 应用服务中间件
Nginx 支持 JavaScript:前所未有的扩展
Nginx 是全球领先的高性能 Web 服务器,以其高效的反向代理和负载均衡功能著称。近期,Nginx 正式支持 JavaScript(通过 NJS 模块),基于 V8 引擎,允许在配置中嵌入 JS 代码,极大提升了灵活性和扩展性。开发者可以使用 JavaScript 实现动态请求处理、自定义认证、复杂响应处理、中间件编写及流量控制等功能,显著降低开发和维护难度,同时保持高性能。NJS 模块的引入为 Nginx 带来了前所未有的扩展能力,适应快速变化的业务需求。
41 0
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
53 2
|
3月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
123 2
|
3月前
|
缓存 JSON JavaScript
Node.js模块系统
10月更文挑战第4天
56 2
|
3月前
|
C++
【C++】实现日期类相关接口(三)
【C++】实现日期类相关接口

热门文章

最新文章