随着 Cocos2d-x 的发展,Cocos2d-html5 也日益完善,相比纯 C++ 的开发方式,它开发效率更为高效,而另一个显而易见的好处便是 JS 端的 API 可以作为 Cocos2d-x Javascript Bindings (JSB) 的接口封装。一套 API,两种解决方案,这让用 JS 快速开发游戏,通过 JSB 以接近原生代码的速度来运行游戏成为可能。
这里使用当前稳定版 Cocos2d-x-2.1.4,Xcode JSB 项目模板创建项目,如果是用其它 IDE ,注意配置好不同环境的依赖关系,本文的示例源码可以在【这里】看到。
JSB 手动绑定的实现步骤
要实现 C++ 到 JS 的手动绑定,首先我们需要定义一个待绑定的类,为了这里的解说简单,创建了一个非常简单的类,也只定义了些简单的方法,如下:
// Leafsoar.h 文件定义 namespace@H_403_62@ ls {@H_403_62@ class@H_403_62@ Leafsoar:@H_403_62@ public@H_403_62@ cocos2d::CCObject@H_403_62@ public static@H_403_62@CCScene*@H_403_62@ scene();virtualbool@H_403_62@ init CREATE_FUNC();void@H_403_62@ functionTest};@H_403_62@ }@H_403_62@ // Leafsoar.cpp 实现@H_403_62@ ls::@H_403_62@init(){@H_403_62@ bRef =false;do@H_403_62@ cocos2dCCLog("leafsoar init ..." bRef truewhile@H_403_62@(0return@H_403_62@ bReffunctionTest cocos2d"function Test"}
以上是我们定义的一个类,在ls命名空间里面,它很简单,继承自 CCObject,定义实现了functionTest方法,我们下面要做的就是将它绑定到 JS ,最终达到通过 JS 来创建对象,并且调用方法。如果不知道从何下手,那么下面是一种实现思路。
为了使代码风格统一 (这样的好处是任何人都能相对容易的读懂代码并修改之),我们将参照 Cocos2d-x 现有的 JSB 实现,如从AppDelegate的applicationDidFinishLaunching方法开始,里面实现了 JSB 环境的初始化等操作,其中我们看到类似sc->addRegisterCallback(register_all_cocos2dx);
这样的代码,而我们将创建register_all_ls方法,来完成我们自有ls命名空间下需要绑定的代码。
编写jsb_ls_auto.h文件,定义如下:
#include@H_403_62@ "jsapi.h"@H_403_62@ "jsfriendapi.h""ScriptingCore.h"@H_403_62@ register_all_lsJSContext cx,@H_403_62@JSObject obj);
完成了以上register_all_ls方法定义,它作为自定义 JSB 手动绑定函数的入口,内中实现绑定我么的命名空间,我们的类和方法等 ~ 所以js_ls_auto.cpp的实现需要根据自己的需要实现,以下是当前的实现步骤,:
"jsb_ls_auto.h""cocos2d.h""Leafsoar.h""cocos2d_specifics.hpp"// 定义 js 端的类型@H_403_62@ JSClass@H_403_62@ jsb_LsLeafsoar_classJSObject@H_403_62@jsb_LsLeafsoar_prototype// 实现 ls 命名空间下的类绑定@H_403_62@)@H_403_62@ jsval nsval ns JS_GetProperty(@H_403_62@cx"ls"&@H_403_62@nsvalif@H_403_62@nsval ==@H_403_62@ JSVAL_VOID ns JS_NewObject NULL nsval OBJECT_TO_JSVAL JS_SetPropertyelse@H_403_62@ JS_ValueToObject nsval obj ns // 实现绑定 Leafsoar 类,它的定义后文给出@H_403_62@ js_register_ls_Leafsoar}
为了实现思路的清晰,所以文章内容以register_all_ls为入口,一步步实现,需要什么,我们就去实现什么,看到上面绑定了命名空间(在 js 中并没有明确的命名空间的机制,但 js 能实现类似命名空间的效果),并调用了js_register_ls_Leafsoar(cx,obj);方法来实现具体的绑定,下面是它的实现:
// 绑定 Leafsoar 类的实现@H_403_62@ js_register_ls_LeafsoarJSContext@H_403_62@*global // 创建一个 JS 类型的对象@H_403_62@ jsb_LsLeafsoar_class *)@H_403_62@calloc1sizeofJSClass));// 类型名称为 **Leafsoar** 正式绑定到 js 由 js 调用的名称@H_403_62@ jsb_LsLeafsoar_class->@H_403_62@name "Leafsoar"addProperty JS_PropertyStubdelProperty getProperty setProperty JS_StrictPropertyStubenumerate JS_EnumerateStubresolve JS_ResolveStubconvert JS_ConvertStub// Leafsoar 类型的析构函数绑定@H_403_62@finalize js_ls_Leafsoar_finalizeflags JSCLASS_HAS_RESERVED_SLOTS2 JSPropertySpec@H_403_62@ properties[]@H_403_62@ { JSOP_NULLWRAPPER// 为 Leafsoar 设定绑定函数,函数名 "functionTest",绑定函数 "js_ls_Leafsoar_functionTest"// 后面可以添加其它函数绑定,如果需要,之后以 "JS_FS_END" 结尾@H_403_62@JSFunctionSpec@H_403_62@ funcs JS_FN"functionTest" js_ls_Leafsoar_functionTest JSPROP_PERMANENT |@H_403_62@ JSPROP_ENUMERATE),255)"> JS_FS_END // 这里定义并且绑定了静态函数(static),包括方法名 "create" 和对应的绑定实现 "js_ls_Leafsoar_create"@H_403_62@ st_funcs"create" js_ls_Leafsoar_create// 初始化类型属性@H_403_62@ jsb_LsLeafsoar_prototype JS_InitClass cx NULL // parent proto@H_403_62@ jsb_LsLeafsoar_class js_ls_Leafsoar_constructor// 这里绑定的是构造函数的实现,也就是用 js new 操作符创建的对象@H_403_62@ properties funcs // 函数绑定// no static properties@H_403_62@ st_funcs// 静态函数绑定@H_403_62@ JSBool@H_403_62@ found JS_SetPropertyAttributes JSPROP_ENUMERATE JSPROP_READONLYfoundTypeTest<@H_403_62@ls>@H_403_62@ tjs_type_class_t@H_403_62@puint32_t@H_403_62@ typeId .@H_403_62@s_id HASH_FIND_INT_js_global_type_httypeId p(!@H_403_62@ p malloc(js_type_class_t ptype typeIdjsclass jsb_LsLeafsoar_classproto jsb_LsLeafsoar_prototypeparentProto HASH_ADD_INT type}
写到这里,类型的绑定已经基本完成,但是可以看见,其中所用到的如js_ls_Leafsoar_functionTest、js_ls_Leafsoar_finalize、js_ls_Leafsoar_create和js_ls_Leafsoar_constructor并没有实现,它们是在绑定 Leafosar 类型的时候去绑定了,所以需要在调用前去实现它们,下面是它们的实现:
// js 端 functionTest 所绑定的方法调用@H_403_62@ argc jsval vp ok JS_TRUEobj ls cobj // 定义以获取真实类型@H_403_62@ JS_THIS_OBJECT vpjs_proxy_t@H_403_62@proxy jsb_get_js_proxyobj// 获取 js 绑定的实际对象 通过 proxy->ptr@H_403_62@ cobj Leafsoar@H_403_62@*)(@H_403_62@?@H_403_62@ proxyptr JSB_PRECONDITION2 cobj JS_FALSE"Invalid Native Object"argc // 调用实际的方法@H_403_62@ cobj JS_SET_RVAL ok JS_ReportError"wrong number of arguments"// js 构造函数实现@H_403_62@ js_ls_Leafsoar_constructor"js ls lsleafsoar constructor .."// 调用 C++ 构造函数@H_403_62@ lsnew@H_403_62@CCObject _ccobj dynamic_castcocos2d*>(@H_403_62@cobj// 默认使用原有的内存管理方式@H_403_62@_ccobj){@H_403_62@ _ccobjautorelease typeClass HASH_FIND_INT typeClassassertjsclassprotoparentProto// 构造 js 端对象,将 cobj 实际对象存入@H_403_62@js_proxy_t p jsb_new_proxy JS_AddNamedObjectRoot"ls::Leafsoar" "wrong number of arguments: %d,was expecting %d"// 静态函数 create 的具体实现"js ls lsleafsoar create .."// 创建 Leafsoar 对象@H_403_62@ ret create jsval jsret ret js_get_or_create_proxy>(@H_403_62@ ret jsret proxy JSVAL_NULL jsret JS_ReportErrorJSFreeOp@H_403_62@fop// 析构函数实现,如果在构造函数做了什么,如开辟内存空间,那么需要在这里做些收尾工作// CCLOGINFO("jsbindings: finalizing JS object %p (LsLeafsoar)",obj);@H_403_62@}
通过以上的步骤,我们实现了 C++ 类 Leafosar 到 JS 端的绑定。在 JS 中我们可以通过以下调试测试:
怎样实现 C++ 回调 JS
在上文,完成了 C++ 到 js 的手动绑定,但有时我们还需要其它一些功能,比如想在 C++ 开一个多线程以加载资源,或者一个网络异步请求,再如要实现一个 delegate 以实现接口回调,然这些都归为同一个问题,实现 C++ 到 js 的回调。我们在 js 端定义了一个 Leafsoar 对象,并且新实现了一个方法,等待 C++ 端的回调,如下:
// 创建一个对象// 定义回调函数 callback@H_403_62@callback functioni j log"ls.callback "@H_403_62@+@H_403_62@ i ();
我们想通过调用functionTest之后回调在 js 端定义的 callback 方法。那么我们需要重新实现 C++ 端的 functionTest 方法:
jsb_get_native_proxythis jsval retval jc ScriptingCoregetInstance()->@H_403_62@getGlobalContext// 定义参数,由两个参数@H_403_62@ jsval v v[]@H_403_62@ int32_to_jsvaljc32UINT_TO_JSVAL88// 通过 ScriptingCore 封装好的方法实现回调,可以帮助我们节省很多细节上的研究@H_403_62@executeFunctionWithOwnerOBJECT_TO_JSVAL"callback" vretval}
JSB 的内存管理
了解 Cocos2d-x 的朋友知道,它的内存管理方式,如果对此有疑问,可以参见Cocos2d-x 内存管理浅说和深入理解 Cocos2d-x 内存管理这两篇文章,那么在 JSB 我们如何来管理内存呢?在 C++ 需要通过retain和release来实现引用计数的管理(源码示例也给出它的绑定实现,但仅仅作为参考),在绑定 js 时,如果不做相应处理,那么可能会出现 js 正在运行着的代码,所绑定的实际 C++ 对象已经释放。虽然我们能通过 绑定实现 retain 和 release 方法,来实现 js 端的此方法调用,但这显然不符合 js 代码边的习惯,它是自动回收的,所以这里推荐始终由 SpiderMonkey 来保持一份对象引用,以使它更像 JS 的使用方式,当 js 垃圾回收自动执行时,在去释放 SpiderMonkey 对对象的引用。
要做到这一点,我们需要只要修改上文的代码实现,在 构造函数,create 静态方法,实现对 C++ 类型对象的引用,在 析构绑定的析构函数中解除对其的引用以完成 C++ 到 JS 端绑定的内存管理方案。