03. WebApp2.0时代启程:Cocos2d-JS让C++代码支持JS脚本(三)

简介: 紧接上文,JS在单线程下,性能不会比Java差,注意场景是单线程。Java的优势不仅是高级语言的特性,还具备了丰富的系统内核资源,如多线程、网络等支持,要比JS灵活的多很多,这里暂时不在讨论这些问题。 回到主题,如果我们把一个完整的C++图形引擎注入到SpiderMonkey中,把复杂的预算放到C/C++内核中,而JS只作为业务处理和内存管理,是否可以获得C/C++的运行能力,有获得了良好的

紧接上文,JS在单线程下,性能不会比Java差,注意场景是单线程。Java的优势不仅是高级语言的特性,还具备了丰富的系统内核资源,如多线程、网络等支持,要比JS灵活的多很多,这里暂时不在讨论这些问题。

回到主题,如果我们把一个完整的C++图形引擎注入到SpiderMonkey中,把复杂的预算放到C/C++内核中,而JS只作为业务处理和内存管理,是否可以获得C/C++的运行能力,有获得了良好的逻辑处理呢?

答案是肯定的!我们直入主题,我们使用最新的SpiderMonkeyV1.8.5,一起解析一下cocos2d-js的代码,下一步,我们会将SpiderMonkey集成到iOS工程中,与JSPatch结合,打造一个跨平台的JS引擎:

1. 理解SpiderMonkey

网上有一些文章,只是用了一些皮毛,若要构建一个完整的JS引擎,要经常去看国外的SpiderMonkey论坛,如果想看中文,直接看Cocos2d-x的代码好了。今天,我们从Cocos2d-JS的入口类《ScriptingCore.cpp》开始

a) 启动JS虚拟机:ScriptingCore::start()

_rt = JS_NewRuntime(8L * 1024L * 1024L); // 开辟8M内存,作为JS运行控件
JS_SetGCParameter(_rt, JSGC_MAX_BYTES, 0xffffffff); // 设置GC的条件
JS_SetTrustedPrincipals(_rt, &shellTrustedPrincipals);  // 权限控制函数
JS_SetSecurityCallbacks(_rt, &securityCallbacks); // 权限回调函数
JS_SetNativeStackQuota(_rt, JSB_MAX_STACK_QUOTA); // 设置堆栈大小
_cx = JS_NewContext(_rt, 8192); // 创建当前上下文,一个Runtime可以支持多个上下文
JS::RuntimeOptionsRef(_rt).setIon(true); 
JS::RuntimeOptionsRef(_rt).setBaseline(true);
JS_SetErrorReporter(_cx, ScriptingCore::reportError); // 设置异常回调函数

b) 就这么简单,一个JS的运行环境就启动了,我们写个小脚本测试一下《test.js》

var a = 0, b = 1, c = 2;
a = b + c;

c) 执行

RootedValue rval(_context); // 定义返回值
JSAutoCompartment ac(_context, _global); // 启动隔离区,类似mutex
string filename = pathfile.substr(pathfile.find_last_of("/") + 1); // 查找文件名称
bool success = JS_EvaluateScript(_context, RootedObject(_context, _global), file.bytes, file.size, filename.c_str(), linecount, &rval); // 执行JS文件
free(file.bytes);
string result = JS_EncodeStringToUTF8(_context, RootedString(_context, rval.toString()));
JS_MaybeGC(_context);

d) 打印result的value,可以看到值为3

2. 注入C++函数到SpiderMonkey

a) 先回顾一下cocos2d-JS注入了那些C++对象和类

在启动函数中,我们找到如下函数:AppDelegate::applicationDidFinishLaunching

ScriptingCore* sc = ScriptingCore::getInstance();
sc->addRegisterCallback(register_all_cocos2dx);
sc->addRegisterCallback(register_cocos2dx_js_core);
sc->addRegisterCallback(jsb_register_system);

sc->addRegisterCallback(register_all_cocos2dx_extension);
sc->addRegisterCallback(register_all_cocos2dx_extension_manual);

sc->addRegisterCallback(jsb_register_chipmunk);
sc->addRegisterCallback(JSB_register_opengl);

sc->addRegisterCallback(MinXmlHttpRequest::_js_register);
sc->addRegisterCallback(register_jsb_websocket);
sc->addRegisterCallback(register_jsb_socketio);

sc->addRegisterCallback(register_all_cocos2dx_builder);
sc->addRegisterCallback(register_CCBuilderReader);

sc->addRegisterCallback(register_all_cocos2dx_ui);
sc->addRegisterCallback(register_all_cocos2dx_ui_manual);
sc->addRegisterCallback(register_all_cocos2dx_studio);
sc->addRegisterCallback(register_all_cocos2dx_studio_manual);

sc->addRegisterCallback(register_all_cocos2dx_spine);
sc->addRegisterCallback(register_all_cocos2dx_spine_manual);

sc->addRegisterCallback(register_all_cocos2dx_3d);
sc->addRegisterCallback(register_all_cocos2dx_3d_manual);

sc->addRegisterCallback(register_all_cocos2dx_3d_extension);

b) 定义JS类成员函数和属性(eg. CCNode)

声明 Node的JS类模板JSClass

jsb_cocos2d_Node_class = (JSClass *)calloc(1, sizeof(JSClass));
jsb_cocos2d_Node_class->name = "Node"; // JS中ClassName
jsb_cocos2d_Node_class->addProperty = JS_PropertyStub;// 添加属性回调函数(默认就好)
jsb_cocos2d_Node_class->delProperty = JS_DeletePropertyStub;// 删除属性回调函数(默认就好)
jsb_cocos2d_Node_class->getProperty = JS_PropertyStub; // 获取属性回调函数(默认就好)
jsb_cocos2d_Node_class->setProperty = JS_StrictPropertyStub; //设置属性回调函数(默认就好)
jsb_cocos2d_Node_class->enumerate = JS_EnumerateStub; // 遍历属性回调函数(默认就好)
jsb_cocos2d_Node_class->resolve = JS_ResolveStub; // 解析属性回调函数(默认就好)
jsb_cocos2d_Node_class->convert = JS_ConvertStub;// 转换属性回调函数(默认就好)
jsb_cocos2d_Node_class->finalize = js_cocos2d_Node_finalize;// 析构函数的回调函数,最好用自己的
jsb_cocos2d_Node_class->flags = JSCLASS_HAS_RESERVED_SLOTS(2);// 拥有2个临时持有对象的槽位,方便持有回调函数的引用,比如点击事件

b) 声明类成员属性

static JSPropertySpec properties[] = {
    JS_PSG("__nativeObj", js_is_native_obj, JSPROP_PERMANENT | JSPROP_ENUMERATE),
    JS_PS_END
};

JS_PSG(属性名称,属性回调函数,不可删除| 可以遍历); // 用于只声明只读的属性
JS_PSGS(属性名称,get属性回调函数, set属性回调函数,不可删除| 可以遍历);// 用于声明读写的属性

c) 声明类成员函数

static JSFunctionSpec funcs[] = {
    JS_FN("addChild", js_cocos2dx_Node_addChild, 1, JSPROP_PERMANENT | JSPROP_ENUMERATE),
    ....
    JS_FN_END
};

JS_FN定义JS函数声明
JS_FN(函数在JS中得名称,函数的Native回调函数,参数个数,不可以删除|可以遍历);

d) 有了函数和属性的声明后,我们把属性和函数注入到a)中声明的JSClass中吧

jsb_cocos2d_Node_prototype = JS_InitClass(
    cx, global, // 上下文,全局对象,上篇文章已经讲过
    JS::NullPtr(), // 没有父类
    jsb_cocos2d_Node_class, // 当前类(Node)模板
    js_cocos2dx_Node_constructor, 0, // native构造函数和参数个数
    properties,// 上面定义的属性字段列表
    funcs,// 上面定义的函数属性列表
    NULL, // 没有静态属性
    st_funcs // 有静态函数
);

好了这样就可以在JS中直接调用这个JS类对象了:

var parent = new Node();
var child   =  new Node();
parent.addChild(child);

然后再C++代码中添加断点,看看是否断点成功进入。

(总结)

a) cocos2d-JS引入了Cocos2d-x图形引擎作为JS的底层运行支持,为JS提供了更高层面的API封装,为H5展示更绚丽的画面提供基础,极大的满足了众多页游开发者多平台化的需求。不仅如此,cocos2d-js还提供了一套html5的canvas的API封装,让开发者直接在浏览器上所见即所得的开发方式,然后用JSB作为运行环境,彻底打破游戏开发的编译-调试的运行模式。

b) cocos2d-JS目前也有一些较为突出的缺陷,虽然H5的性能的得到了极大的提升,相对Native性能,还是明显差很多,究其原因有:
(i)JSBinding代码太多,大约15W行左右,代码较大,频繁的转换JS与C++对象,耗时的同时产生了大量的临时对象,GC时候,卡顿感明显,类似于Android,大家可以脑补一下【性能下降】
(ii)不是严格意义的JS语言规范,JS与Native的两套内存管理机制,相互制约,导致C++需要维护一个很大的Map的双向对象映射关系,来维护不同的内存管理模式【性能下降】
(iii)JS只是工具,失去了JS的灵活性,为了减少binding的复杂度,Cocos2d-JS很多成员变量都是用函数方式去获取,得到的往往是个临时变量,而不能直接操作,需要前端开发者,长时间的理解规范,才能够避免技术上的缺陷

(优化)

有没有一种办法既可以满足JS的灵活性,也可以满足Native的内存管理呢?答案是肯定的,请持续关注下一阶段的AppEngine的实时动态。

(番外)

QQ浏览器的独门暗器是什么?如果某些网站是支持cocos2d-JS的,那么直接启动Cocos2d-JS内核作为加载容器,性能爆表啊,有木有?!莫非以后的浏览器将是游戏市场的必争之地?

(求知己)

Cocos2d-JS的介绍,到此告一段落,有想法的同学,可以私聊我。

目录
相关文章
|
5月前
|
C++
C++ 语言异常处理实战:在编程潮流中坚守稳定,开启代码可靠之旅
【8月更文挑战第22天】C++的异常处理机制是确保程序稳定的关键特性。它允许程序在遇到错误时优雅地响应而非直接崩溃。通过`throw`抛出异常,并用`catch`捕获处理,可使程序控制流跳转至错误处理代码。例如,在进行除法运算或文件读取时,若发生除数为零或文件无法打开等错误,则可通过抛出异常并在调用处捕获来妥善处理这些情况。恰当使用异常处理能显著提升程序的健壮性和维护性。
94 2
|
5月前
|
算法框架/工具 C++ Python
根据相机旋转矩阵求解三个轴的旋转角/欧拉角/姿态角 或 旋转矩阵与欧拉角(Euler Angles)之间的相互转换,以及python和C++代码实现
根据相机旋转矩阵求解三个轴的旋转角/欧拉角/姿态角 或 旋转矩阵与欧拉角(Euler Angles)之间的相互转换,以及python和C++代码实现
452 0
|
2月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
2月前
|
算法 安全 C++
提高C/C++代码的可读性
提高C/C++代码的可读性
75 4
|
3月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
539 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
|
4月前
|
C++
2合1,整合C++类(Class)代码转换为MASM32代码的平台
2合1,整合C++类(Class)代码转换为MASM32代码的平台
|
4月前
|
C++
继续更新完善:C++ 结构体代码转MASM32代码
继续更新完善:C++ 结构体代码转MASM32代码
|
4月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
|
4月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
4月前
|
前端开发 C++ Windows
C++生成QML代码与QML里面集成QWidget
这篇文章介绍了如何在C++中生成QML代码,以及如何在QML中集成QWidget,包括使用Qt Widgets嵌入到QML界面中的技术示例。