什么是JSB

JSB是javascript binding的简称。Cocos2d-JS中使用的javascript引擎是Mozilla 的spidermonkey,而JSB绑定的目的就是让javascript脚本能够调用到c++代码，c++代码能够调用到javascript脚本。

环境搭建

本人以安装的Cocos Creator为2.02版本,基于windows 64位平台操作系统

1，phthon 环境(http://www.python.org/ftp/python/2.7.3/python-2.7.3.msi)

2,增加环境变量PYTHON_ROOT设置为python安装根目录(C:\Python27)

PATH中增加环境变量%PYTHON_ROOT%;%PYTHON_ROOT%\Scripts;(说明下这个只有安装第三方的库才会在phthon安装路径下产生这个目录)

3，下载 pyyaml（ http://pyyaml.org/download/pyyaml/PyYAML-3.10.win32-py2.7.exe）并安装

到这里，跟官方的说明文档有些不同，个人在安装其它python第三方Cheeltah的时候，遇到一些奇怪的问题，难道是我看了个假的官方文档。所以就多加了几个部分，如果你的直接安装Cheetah没有报错可以忽略掉这个部分

Markdown安装本人安装的是（https://pypi.org/project/Markdown/3.0.1/）下载后解压执行 python setup.py install 命名安装

Setuptools安装本人安装的是(https://pypi.org/project/setuptools/40.4.3/) 同上命令

4，下载 Cheetah-2.4.4.tar.gz, 执行 python setup.py. install

5，下载 NDK r16b安装，官方的说明是大于等于NDK r16 但本人安装的是NDK r16b版本的NDK

6，设置环境变量(NDK_ROOT=D:\Android\android-ndk-r16b)

7，增加环境变量PYTHON_BIN设置为自己的python.exe，如本人设置为C:\Python27\python.exe

安装CocosCreator

这里在安装CocosCreator时注意安装目录中一定不要含有空格，本人就遇到因安装目录有空格担误了不少的时间，在执行绑定脚本时不正确的找到路径，遇到空格路径被截断了。

官方下载最新的bindings-generator

更新Cocos Creator中默认引擎的JSB

下面的内容就是具体怎么使用tojs这个工具，在安装完成CocosCreator之后，进入安装目录，找到D:\CocosCreator\resources目录下的cocos2d-x ，个人建议是复制一份，不要在上面直接进行修改，免得把cocos2d-x默认的引擎改出什么问题 , Cocos Creator的windows模拟器无法正常启动。

这里复制了一分并更名为cocos2d-xcopy的引擎副本

把之前下载好的bindings-generator解压出来等待使用

由于Cocos Creator在安装完成之后，安装目录下的CocosCreator\resources\cocos2d-x\tools\bindings-generator\libclang目录下的第三方的库没有安装进来，这时我们之前下载的bindings-generator就可以拿出来了，在解压出来的bindings-generator中找到如下三个库

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第1张图片

复制到之前我们复制出来的cocos2d-xcopy引擎的

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第2张图片

进入tools/tojs目录

执行脚本python .\genbindings.py

此时，如果你看到如下界面，恭喜你，成功搭建了tojs环境

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第3张图片

添加自己自定义类

修改windows平台模拟器，其它平台有空在做后续的更新

window 平台

打开runtime工程

打开D:\CocosCreator\resources\cocos2d-xcopy\tools\simulator\frameworks\runtime-src\proj.win32工程

如图：

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第4张图片

由于我们是扩展cocos2d-x，个人建议把自己的代码都放置到external外部库中

这里就简单的写个示例，只是为了使用这个强大的tojs工具

示例代码

代码如图:

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第5张图片

编写tojs绑定脚本

个人是以自带的cocos2dx_spine.ini作为基本修改，复制一个cocos2dx_spine.ini并更名为cocos2dx_custom.ini，修改后的文件如下:

[cocos2dx_custom]

prefix = cocos2dx_custom

target_namespace = jsb

android_headers = -I%(androidndkdir)s/platforms/android-14/arch-arm/usr/include -I%(androidndkdir)s/sources/cxx-stl/gnu-libstdc++/4.8/libs/armeabi-v7a/include -I%(androidndkdir)s/sources/cxx-stl/gnu-libstdc++/4.8/include -I%(androidndkdir)s/sources/cxx-stl/gnu-libstdc++/4.9/libs/armeabi-v7a/include -I%(androidndkdir)s/sources/cxx-stl/gnu-libstdc++/4.9/include

android_flags = -D_SIZE_T_DEFINED_

clang_headers = -I%(clangllvmdir)s/%(clang_include)s

clang_flags = -nostdinc -x c++ -std=c++11 -U __SSE__

cocos_headers = -I%(cocosdir)s/cocos -I%(cocosdir)s/cocos/editor-support -I%(cocosdir)s/cocos/platform/android -I%(cocosdir)s/external/android/include -I%(cocosdir)s/external/sources

cocos_flags = -DANDROID

cxxgenerator_headers =

# extra arguments for clang

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

headers = %(cocosdir)s/external/sources/custom/Custom.h

replace_headers = Custom.h::external/sources/custom/Custom.h

classes = Custom

classes_need_extend = Custom

# 需要为哪些类绑定属性，以空格为间隔,即在js层可以像成员变量的一样使用

field = Custom::[dValue nValue]

skip =

remove_prefix =

classes_have_no_parents =

base_classes_to_skip =

abstract_classes =

rename_functions =

rename_classes =

修改genbindings.py

也可以直接复制一个出来，进行修改

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第6张图片

在cmd_args中增加

'cocos2dx_custom.ini': ('cocos2dx_custom', 'jsb_cocos2dx_custom_auto'),

执行genbindings.py脚本

此时这边是出了些问题，错误信息如下

Traceback (most recent call last):

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1884, in

main()

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1856, in main

'clang_args': (config.get(s, 'extra_arguments', 0, dict(userconfig.items('DEFAULT'))) or "").split(" "),

File "C:\Python27\lib\ConfigParser.py", line 623, in get

return self._interpolate(section, option, value, d)

File "C:\Python27\lib\ConfigParser.py", line 691, in _interpolate

self._interpolate_some(option, L, rawval, section, vars, 1)

File "C:\Python27\lib\ConfigParser.py", line 726, in _interpolate_some

section, map, depth + 1)

File "C:\Python27\lib\ConfigParser.py", line 723, in _interpolate_some

option, section, rest, var)

InterpolationMissingOptionError: Bad value substitution:

section: [cocos2dx_custom]

option : extra_arguments

key : clang_include

rawval :

-------------------------------------

Generating javascript bindings fails.

-------------------------------------

此时这边是把clang_headers = -I%(clangllvmdir)s/%(clang_include)s

后面的属性值去掉，因为我们并没有clang_include的配置，

修改完成后再次执行脚本，又得到了下面的错误

Errors in parsing headers:

location = ,

details = "'wchar.h' file not found">

*** Found errors - can not continue

Traceback (most recent call last):

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1884, in

main()

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1880, in main

generator.generate_code()

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1527, in generate_code

self._parse_headers()

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1571, in _parse_headers

raise Exception("Fatal error in parsing headers")

Exception: Fatal error in parsing headers

-------------------------------------

Generating javascript bindings fails.

-------------------------------------

此时告诉我们找不到"'wchar.h' file not found"

大概是说找不到头文件，这边对比了下coco2dx.ini

发现跟据这个配置手动跳转到这些目录是能正常找到这个文件，些时我把

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

再次执行脚本,错误又来了

Traceback (most recent call last):

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1884, in

main()

File "D:\CocosCreator\resources\cocos2d-xcopy\tools\bindings-generator/generator.py", line 1856, in main

'clang_args': (config.get(s, 'extra_arguments', 0, dict(userconfig.items('DEFAULT'))) or "").split(" "),

File "C:\Python27\lib\ConfigParser.py", line 623, in get

return self._interpolate(section, option, value, d)

File "C:\Python27\lib\ConfigParser.py", line 691, in _interpolate

self._interpolate_some(option, L, rawval, section, vars, 1)

File "C:\Python27\lib\ConfigParser.py", line 723, in _interpolate_some

option, section, rest, var)

InterpolationMissingOptionError: Bad value substitution:

section: [cocos2dx_custom]

option : extra_arguments

key : android_headers

rawval : %(clang_headers)s %(cxxgenerator_headers)s %(cocos_headers)s %(android_flags)s %(clang_flags)s %(cocos_flags)s %(extra_flags)s

-------------------------------------

Generating javascript bindings fails.

-------------------------------------

告诉了我们，找不到android_headers这个key，这边照仿cocos2dx.ini写了一个空的

android_headers

再一次执行脚本

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第7张图片

成功了，此时，你会在你的cocos2d-xcopy\cocos\scripting\js-bindings\auto目录下看到

jsb_cocos2dx_custom_auto.hpp 跟 jsb_cocos2dx_custom_auto.cpp

我们期待已久的绑定终于出来了，大致的内容如下

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第8张图片

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第9张图片

以下是个人的完整配置

[cocos2dx_custom]

prefix = cocos2dx_custom

target_namespace = jsb

android_headers =

clang_headers =

clang_flags = -nostdinc -x c++ -std=c++11 -U __SSE__

cocos_headers = -I%(cocosdir)s/cocos -I%(cocosdir)s/cocos/editor-support -I%(cocosdir)s/cocos/platform/android -I%(cocosdir)s/external/android/include -I%(cocosdir)s/external/sources

cocos_flags = -DANDROID

cxxgenerator_headers =

# extra arguments for clang

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

headers = %(cocosdir)s/external/sources/custom/Custom.h

replace_headers = Custom.h::external/sources/custom/Custom.h

classes = Custom

classes_need_extend = Custom

# 需要为哪些类绑定属性，以空格为间隔,即在js层可以像成员变量的一样使用

field = Custom::[dValue nValue]

skip =

remove_prefix =

classes_have_no_parents =

base_classes_to_skip =

abstract_classes =

rename_functions =

rename_classes =

配置生成simulator

到这部离成功就差一点点了

1，打开之前D:\CocosCreator\resources\cocos2d-xcopy\tools\simulator\frameworks\runtime-src\proj.win32\simulator.sln项目

2，找到如下图上所示，增加以面生成出来的两个文件到该处

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第10张图片

3，编写注册到js层的代码

找到jsb_module_register.cpp并打开

如下增加注册代码

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第11张图片

4,编译导出simulator

编译完成后在

D:\CocosCreator\resources\cocos2d-xcopy\tools\simulator\frameworks\runtime-src\proj.win32\Debug.win32\simulator.exe

找到生成出来的simulator.exe

把这个编译出来的simulator.exe复制到

D:\CocosCreator\resources\cocos2d-xcopy\simulator\win32下替换掉原来的

simulator.exe

编写测试的js代码

1，打开CocosCreator新建一个HelloWorld工程

2，执行文件设置打开设置界面，并设置新的cocos2d-x引擎为我们的cocos2d-xcopy，如下图

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第12张图片

3，增加脚本test.ts,界面增加一按钮，并挂载脚本

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第13张图片

4，编写使用jsb绑定上来的custom对象代码

....

onLoad() {

let custom = new jsb.Custom();

custom.showString("hello C++");

custom.showFloat(88.88);

custom.show();

custom.setNValue(100);

custom.show();

cc.log(custom.getNValue());

custom.dValue = 99.99;

custom.show();

custom.nValue = 886;

custom.show();

}

....

5，因为我们只处理了windows模拟器，启动时选用模拟器运行

执行完成后，我们在控制台查看日志如下

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用_第14张图片

到此，我们的C++代码被js调用成功

注意事项

在写自己的C++类时，这个版本的最好是不要继承自cocos2d::Ref，会造成内存没办法释放，存在内存泄漏问题。

在安装工具时，请全使用32位版本的工具，文档中也附上了下载地址，祝你好运

Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用

什么是JSB

环境搭建

安装CocosCreator

官方下载最新的bindings-generator

更新Cocos Creator中默认引擎的JSB

添加自己自定义类

window 平台

打开runtime工程

示例代码

编写tojs绑定脚本

修改genbindings.py

执行genbindings.py脚本

配置生成simulator

编写测试的js代码

注意事项

你可能感兴趣的:(Cocos2d-JS自动JSB绑定详细使用及怎么样导入到creator中使用)