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的介绍,到此告一段落,有想法的同学,可以私聊我。

目录
相关文章
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1天前
|
存储 安全 C语言
C++ String揭秘:写高效代码的关键
在C++编程中,字符串操作是不可避免的一部分。从简单的字符串拼接到复杂的文本处理,C++的string类为开发者提供了一种更高效、灵活且安全的方式来管理和操作字符串。本文将从基础操作入手,逐步揭开C++ string类的奥秘,帮助你深入理解其内部机制,并学会如何在实际开发中充分发挥其性能和优势。
|
1月前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
147 15
在 golang 中执行 javascript 代码的方案详解
|
3月前
|
算法 安全 C++
提高C/C++代码的可读性
提高C/C++代码的可读性
91 4
|
3月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
移动开发 JavaScript 前端开发
用开发本地tcpip程序的思路开发webapp
本文关键字:the headless cms,b/s web to c/s web, headless webapp backend.
488 0
用开发本地tcpip程序的思路开发webapp
|
Web App开发 监控 Serverless
十分钟上线-基于函数计算开发 Restful web api & asp.net core web app
.NET Core是一个开源通用的开发框架,支持跨平台, 阿里云函数计算推出了 dotnetcore2.1 runtime, 使用 C# 编写 serverless 函数, 除了很好地支持通常意义上的函数外, 还可以基于函数计算开发 asp.
5781 0

热门文章

最新文章