使用 JSB 自动绑定

    尽管 Creator 提供了 方式支持从 ts 端直接调用 Native 端(Android/iOS/Mac)的接口,但是经过大量实践发现此接口在大量频繁调用情况下性能很低下,尤其是在 Android 端,比如调用 Native 端实现的打印 log 的接口,而且会容易引起一些 native crash,例如 local reference table overflow 等问题。纵观 Cocos 原生代码的实现,基本所有的接口方法的实现都是基于 JSB 的方式来实现,所以此文主要讲解下 JSB 的自动绑定逻辑,帮助大家能快速实现 callStaticMethod 到 JSB 的改造过程。

    对于用过 Cocos Creator(为了方便后文直接简称 CC)的人来说,jsb.reflection.callStaticMethod 这个方法肯定不陌生,其提供了我们从 ts 端调用 Native 端的能力,例如我们要调用 Native 实现的 log 打印和持久化的接口,就可以很方便的在 JavaScript 中按照如下的操作调用即可:

    尽管使用很简单,一行代码就能实现跨平台调用,稍微看下其实现就可以知道,在 C++ 层 Android 端是通过 jni 的方式实现的,IOS 端是通过运行时的方式动态调用,但是为了兼顾通用性和支持所有的方法,Android 端没有对 jni 相关对象做缓存机制,就会导致短时间大量调用时出现很严重的性能问题,之前我们遇到的比较多的情况就是在下载器中打印 log,某些应用场景短时间内触发大量的下载操作,就会出现 local reference table overflow 的 crash,甚至在低端机上导致界面卡顿无法加载出来的问题。

    修复此问题就需要针对 log 调用进行 JSB 的改造,同时还要加上 jni 的相关缓存机制,优化性能。jSB 绑定说白了就是 C++ 和脚本层之间进行对象的转换,并转发脚本层函数调用到 C++ 层的过程。

    JSB 绑定通常有 手动绑定自动绑定 两种方式。手动绑定方式可以参考 使用 JSB 手动绑定

    • 手动绑定方式优点是灵活,可定制型强;缺点就是全部代码要自己书写,尤其是在 ts 类型跟 c++ 类型转换上,稍有不慎容易导致内存泄漏,某些指针或者对象没有释放。
    • 自动绑定方式则会帮你省了很多麻烦,直接通过一个脚本一键生成相关的代码,后续如果有新增或者改动,也只需要重新执行一次脚本即可。所以自动绑定对于不需要进行强定制,需要快速完成JSB的情况来说就再适合不过了。下面就一步步说明下如何实现自动绑定 JSB。

    环境配置和自动绑定展示

    自动绑定,说简单点,其实就只要执行一个 python 脚本即可自动生成对应的 .cpp.h 文件。所以首先要保证电脑有 python 运行环境,这里以 Mac 上安装为例来讲解。

    1. 安装 python 3.0 版本,从 python 官网下载安装包:

      https://www.python.org/downloads/release/python-398/

    2. 通过 pip3 安装 python 的一些依赖库:

      1. sudo pip3 install pyyaml==5.4.1
      2. sudo pip3 install Cheetah3
    3. 安装 NDK,涉及到 c++ 肯定这个是必不可少的,建议安装 版本,然后在 ~/.bash_profile 中设置 PYTHON_ROOTNDK_ROOT 这两个环境变量,因为在后面执行的 python 文件里面就会直接用到这两个环境变量:

    Windows 下直接参考上面需要安装的模块直接安装就好了,最后也要记得配置环境变量。

    自动绑定展示

    这里演示的是 cocos 引擎下面也即 cocos/bindings/auto 目录下的文件(如下图所示)是怎么自动生成的:

    其实从这些文件名的开头也能看出,这些文件命名都是有某些特定规律的,那么这些文件是怎么生成的呢?首先打开终端,先 cd 到 tools/tojs 目录下,然后直接运行 ./genbindings.py

    大概运行一分钟左右后,会出现如下的提示,说明已经顺利生成完了:

    JSB 自动绑定 - 图3

    经过上面的步骤后,cocos/bindings/auto 下的文件就全部自动生成出来了,是不是非常方便。

    下面再以 ts 层通过 jsb 调用 Native 层的 log 方法打印日志为例,详细的告知下如何实现通过自动绑定工具,依据自己写的 c++ 代码,生成对应的自动绑定文件。

    C++ 作为连接 ts 层和 Native 层的桥梁,既然要实现 jsb 调用,那第一步肯定是要先把 C++ 层的头文件和实现准备好,这里我们在 cocos/⁩ 创建一个 test 文件夹用于存放相关文件:

    这里先准备 ABCJSBBridge.h,里面主要是申明了一个 abcLog 的函数,此函数就是供 ts 层调用打 log 的,另外由于打 log 方法肯定在 ts 层很多地方都会使用,所以这里采用了一个单例模式,提供了 getInstance() 来获取当前类的实例。

    1. #pragma once
    2. #include <string>
    3. namespace abc
    4. {
    5. class JSBBridge
    6. {
    7. public:
    8. void abcLog(const std::string& msg);
    9. /**
    10. * Returns a shared instance of the director.
    11. * @js _getInstance
    12. */
    13. static JSBBridge* getInstance();
    14. /** @private */
    15. JSBBridge();
    16. /** @private */
    17. ~JSBBridge();
    18. bool init();
    19. };

    下面是对应的实现 ABCJSBBridge.cpp

    JSB 配置脚本编写

    我们在 tools/tojs 目录下找到 genbindings.py 脚本,复制并重命名为 ,然后修改genbindings_test.py 模块配置,只保留 cocos2dx_test 模块。

    JSB 自动绑定 - 图5

    1. [cocos2dx_test]
    2. # the prefix to be added to the generated functions. You might or might not use this in your own
    3. # templates
    4. prefix = cocos2dx_test
    5. # create a target namespace (in javascript, this would create some code like the equiv. to `ns = ns || {}`)
    6. # all classes will be embedded in that namespace
    7. target_namespace = abc
    8. macro_judgement =
    9. android_headers =
    10. android_flags = -target armv7-none-linux-androideabi -D_LIBCPP_DISABLE_VISIBILITY_ANNOTATIONS -DANDROID -D__ANDROID_API__=14 -gcc-toolchain %(gcc_toolchain_dir)s --sysroot=%(androidndkdir)s/platforms/android-14/arch-arm -idirafter %(androidndkdir)s/sources/android/support/include -idirafter %(androidndkdir)s/sysroot/usr/include -idirafter %(androidndkdir)s/sysroot/usr/include/arm-linux-androideabi -idirafter %(clangllvmdir)s/lib64/clang/5.0/include -I%(androidndkdir)s/sources/cxx-stl/llvm-libc++/include
    11. clang_headers =
    12. clang_flags = -nostdinc -x c++ -std=c++17 -fsigned-char -mfloat-abi=soft -U__SSE__
    13. cocos_headers = -I%(cocosdir)s/cocos -I%(cocosdir)s/cocos/platform/android -I%(cocosdir)s/external/sources
    14. cocos_flags = -DANDROID -DCC_PLATFORM=3 -DCC_PLATFORM_MAC_IOS=1 -DCC_PLATFORM_MAC_OSX=4 -DCC_PLATFORM_WINDOWS=2 -DCC_PLATFORM_ANDROID=3
    15. cxxgenerator_headers =
    16. # extra arguments for clang
    17. extra_arguments = %(android_headers)s %(clang_headers)s %(cxxgenerator_headers)s %(cocos_headers)s %(android_flags)s %(clang_flags)s %(cocos_flags)s %(extra_flags)s
    18. # what headers to parse
    19. headers = %(cocosdir)s/cocos/test/ABCJSBBridge.h
    20. # cpp_headers = network/js_network_manual.h
    21. # what classes to produce code for. You can use regular expressions here. When testing the regular
    22. # expression, it will be enclosed in "^$", like this: "^Menu*$".
    23. classes = JSBBridge
    24. # what should we skip? in the format ClassName::[function function]
    25. # regular expressions, they will not be surrounded by "^$". If you want to skip a whole class, just
    26. # add a single "*" as functions. See bellow for several examples. A special class name is "*", which
    27. # will apply to all class names. This is a convenience wildcard to be able to skip similar named
    28. # functions from all classes.
    29. skip = JSBBridge::[init]
    30. rename_functions =
    31. rename_classes =
    32. # for all class names, should we remove something when registering in the target VM?
    33. remove_prefix =
    34. # classes for which there will be no "parent" lookup
    35. classes_have_no_parents = JSBBridge
    36. # base classes which will be skipped when their sub-classes found them.
    37. base_classes_to_skip = Clonable
    38. # classes that create no constructor
    39. # Set is special and we will use a hand-written constructor
    40. abstract_classes = JSBBridge

    其实从里面的注释也讲的非常详细,这里说几个主要的属性及含义:

    以上的配置完成后,就可以 cd 到 tools/tojs 目录下,运行 ./genbindings_test.py 自动生成绑定文件。然后就会看到在 cocos/bindings/auto 下面会多出了两个个绑定文件:

    JSB 自动绑定 - 图7

    打开生成的 jsb_cocos2dx_test_auto.cpp

    看到这里是不是感觉很熟悉,跟 Cocos 已有的那些 cpp 完全一样,甚至包括里面的注册函数和类的定义都给全部自动生成了。

    尽管经过上面一步后我们已经生成出来了绑定文件,但是 ts 层还是没法直接使用,因为还需要把生成的绑定文件,配置到 CMakeLists.txt 文件中,从而跟其他 c++ 文件一起编译才行,这部分主要就是最后的 CMakeLists.txt 编译配置。

    1. 打开 CMakeLists.txt 文件,在其中加上最开始实现的 ABCJSBBridge.h 和 ABCJSBBridge.cpp,还有自动绑定生成的 jsb_cocos2dx_test_auto.h 和 jsb_cocos2dx_test_auto.cpp 文件:

    2. 打开 cocos/bindings/manual/jsb_module_register.cpp,添加 cocos2dx_test 模块的注册代码:

      JSB 自动绑定 - 图9

    经过上面这些配置后,最终就可以在 ts 层直接像下面这样来进行调用:

    1. import { _decorator, Component, Node } from 'cc';
    2. const { ccclass, property } = _decorator;
    3. @ccclass('Test')
    4. export class Test extends Component {
    5. start () {
    6. // @ts-ignore
    7. abc.JSBBridge.getInstance().abcLog("JSB 绑定测试成功")
    8. }
    9. }

    自动绑定的限制条件

    1. 只能够针对类生成绑定,不可以绑定结构体,独立函数等。
    2. 不能够生成 Delegate 类型的 API,因为脚本中的对象是无法继承 C++ 中的 Delegate 类并重写其中的 函数的。
    3. 子类中重写了父类的 API 的同时,又重载了这个 API。
    4. 部分 API 实现内容并没有完全体现在其 API 定义中。

    总的来说,自动绑定 JSB 只需要要求开发者编写相关的实现 C++ 实现类,一个配置文件,然后执行一条命令就能完整整个的绑定过程。如果没有什么特殊定制,相对于手动绑定来说,效率上还是提高了不少。实际工作做可以依据具体情况先用自动绑定功能,然后再去手动修改生成的绑定文件,达到事倍功半的效果。