Cocos2d-JS自動JSB綁定詳細(xì)使用及怎么樣導(dǎo)入到creator中使用

什么是JSB

JSB是javascript binding的簡稱镊绪。Cocos2d-JS中使用的javascript引擎是Mozilla 的spidermonkey,而JSB綁定的目的就是讓javascript腳本能夠調(diào)用到c++代碼，c++代碼能夠調(diào)用到j(luò)avascript腳本古胆。

環(huán)境搭建

本人以安裝的Cocos Creator為2.02版本,基于windows 64位平臺操作系統(tǒng)

1，phthon 環(huán)境(http://www.python.org/ftp/python/2.7.3/python-2.7.3.msi)

2,增加環(huán)境變量PYTHON_ROOT設(shè)置為python安裝根目錄(C:\Python27)

PATH中增加環(huán)境變量%PYTHON_ROOT%;%PYTHON_ROOT%\Scripts;(說明下這個只有安裝第三方的庫才會在phthon安裝路徑下產(chǎn)生這個目錄)

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/）下載后解壓執(zhí)行 python setup.py install 命名安裝

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

4，下載?Cheetah-2.4.4.tar.gz, 執(zhí)行 python setup.py. install

5蛋勺，下載 NDK r16b安裝 瓦灶，官方的說明是大于等于NDK r16 但本人安裝的是NDK r16b版本的NDK

6，設(shè)置環(huán)境變量(NDK_ROOT=D:\Android\android-ndk-r16b)?

7抱完，增加環(huán)境變量PYTHON_BIN設(shè)置為自己的python.exe贼陶，如本人設(shè)置為C:\Python27\python.exe

安裝CocosCreator

這里在安裝CocosCreator時注意安裝目錄中一定不要含有空格，本人就遇到因安裝目錄有空格擔(dān)誤了不少的時間巧娱，在執(zhí)行綁定腳本時不正確的找到路徑碉怔，遇到空格路徑被截斷了。

官方下載最新的bindings-generator

更新Cocos Creator中默認(rèn)引擎的JSB

下面的內(nèi)容就是具體怎么使用tojs這個工具禁添，在安裝完成CocosCreator之后 撮胧，進(jìn)入安裝目錄， 找到D:\CocosCreator\resources目錄下的cocos2d-x 老翘，個人建議是復(fù)制一份芹啥，不要在上面直接進(jìn)行修改锻离，免得把cocos2d-x默認(rèn)的引擎改出什么問題 , Cocos Creator的windows模擬器無法正常啟動。

這里復(fù)制了一分并更名為cocos2d-xcopy的引擎副本

把之前下載好的bindings-generator解壓出來等待使用

由于Cocos Creator在安裝完成之后墓怀，安裝目錄下的CocosCreator\resources\cocos2d-x\tools\bindings-generator\libclang目錄下的第三方的庫沒有安裝進(jìn)來汽纠，這時我們之前下載的bindings-generator就可以拿出來了，在解壓出來的bindings-generator中找到如下三個庫

復(fù)制到之前我們復(fù)制出來的cocos2d-xcopy引擎的

進(jìn)入tools/tojs目錄

執(zhí)行腳本python .\genbindings.py

此時傀履，如果你看到如下界面疏虫，恭喜你，成功搭建了tojs環(huán)境

添加自己自定義類

修改windows平臺模擬器啤呼，其它平臺有空在做后續(xù)的更新

window 平臺

打開runtime工程

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

如圖：


由于我們是擴展cocos2d-x卧秘，個人建議把自己的代碼都放置到external外部庫中

這里就簡單的寫個示例，只是為了使用這個強大的tojs工具

示例代碼

代碼如圖:


編寫tojs綁定腳本

個人是以自帶的cocos2dx_spine.ini作為基本修改官扣，復(fù)制一個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

也可以直接復(fù)制一個出來惕蹄，進(jìn)行修改

在cmd_args中增加

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

執(zhí)行g(shù)enbindings.py腳本

此時這邊是出了些問題蚯涮，錯誤信息如下

Traceback (most recent call last):

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

? ? 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的配置卖陵，

修改完成后再次執(zhí)行腳本遭顶，又得到了下面的錯誤

Errors in parsing headers:

1. <severity = Fatal,

? ? location = <SourceLocation file 'D:\\Android\\android-ndk-r16b/sources/cxx-stl/gnu-libstdc++/4.9/include\\cwchar', line 44, column 10>,

? ? 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 <module>

? ? 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

發(fā)現(xiàn)跟據(jù)這個配置手動跳轉(zhuǎn)到這些目錄是能正常找到這個文件泪蔫，些時我把

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

再次執(zhí)行腳本,錯誤又來了

Traceback (most recent call last):

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

? ? 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

再一次執(zhí)行腳本

成功了撩荣，此時铣揉，你會在你的cocos2d-xcopy\cocos\scripting\js-bindings\auto目錄下看到

jsb_cocos2dx_custom_auto.hpp 跟?jsb_cocos2dx_custom_auto.cpp

我們期待已久的綁定終于出來了，大致的內(nèi)容如下?

以下是個人的完整配置

[cocos2dx_custom]

prefix = cocos2dx_custom

target_namespace = jsb

android_headers =

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

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，找到如下圖上所示台猴，增加以面生成出來的兩個文件到該處


3朽合，編寫注冊到j(luò)s層的代碼

找到j(luò)sb_module_register.cpp并打開

如下增加注冊代碼

4,編譯導(dǎo)出simulator

編譯完成后在

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

找到生成出來的simulator.exe

把這個編譯出來的simulator.exe復(fù)制到

D:\CocosCreator\resources\cocos2d-xcopy\simulator\win32下替換掉原來的

simulator.exe

編寫測試的js代碼

1，打開CocosCreator新建一個HelloWorld工程

2饱狂，執(zhí)行 文件設(shè)置打開設(shè)置界面曹步，并設(shè)置新的cocos2d-x引擎為我們的cocos2d-xcopy，如下圖

3嗡官，增加腳本test.ts,界面增加一按鈕箭窜，并掛載腳本

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模擬器磺樱，啟動時選用模擬器運行

執(zhí)行完成后，我們在控制臺查看日志如下

到此婆咸，我們的C++代碼被js調(diào)用成功

注意事項

在寫自己的C++類時竹捉，這個版本的最好是不要繼承自cocos2d::Ref，會造成內(nèi)存沒辦法釋放尚骄，存在內(nèi)存泄漏問題块差。

在安裝工具時，請全使用32位版本的工具倔丈，文檔中也附上了下載地址憨闰，祝你好運

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市需五，隨后出現(xiàn)的幾起案子鹉动，更是在濱河造成了極大的恐慌，老刑警劉巖宏邮，帶你破解...
    沈念sama閱讀 221,273評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件泽示，死亡現(xiàn)場離奇詭異，居然都是意外死亡蜜氨，警方通過查閱死者的電腦和手機械筛，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來飒炎，“玉大人埋哟，你說我怎么就攤上這事±赏簦” “怎么了定欧？”我有些...
    開封第一講書人閱讀 167,709評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長怒竿。 經(jīng)常有香客問我砍鸠，道長，這世上最難降的妖魔是什么耕驰？ 我笑而不...
    開封第一講書人閱讀 59,520評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任爷辱，我火速辦了婚禮，結(jié)果婚禮上朦肘，老公的妹妹穿的比我還像新娘饭弓。我一直安慰自己，他們只是感情好媒抠，可當(dāng)我...
    茶點故事閱讀 68,515評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布弟断。 她就那樣靜靜地躺著，像睡著了一般趴生。 火紅的嫁衣襯著肌膚如雪阀趴。 梳的紋絲不亂的頭發(fā)上昏翰，一...
    開封第一講書人閱讀 52,158評論 1贊 308
  • 城市分裂傳說
    那天，我揣著相機與錄音刘急，去河邊找鬼棚菊。 笑死，一個胖子當(dāng)著我的面吹牛叔汁，可吹牛的內(nèi)容都是我干的统求。 我是一名探鬼主播，決...
    沈念sama閱讀 40,755評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼据块，長吁一口氣：“原來是場噩夢啊……” “哼码邻！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起另假，我...
    開封第一講書人閱讀 39,660評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤像屋，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后浪谴，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體开睡，經(jīng)...
    沈念sama閱讀 46,203評論 1贊 319
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年苟耻，在試婚紗的時候發(fā)現(xiàn)自己被綠了篇恒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,427評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡凶杖，死狀恐怖胁艰，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情智蝠，我是刑警寧澤腾么，帶...
    沈念sama閱讀 36,122評論 5贊 349
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站杈湾，受9級特大地震影響解虱，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜漆撞，卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一殴泰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧浮驳，春花似錦悍汛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0贊 23
  • 一樁弒父案离咐，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奉件，卻和暖如春宵蛀，著一層夾襖步出監(jiān)牢的瞬間昆著，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工糖埋， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宣吱，地道東北人窃这。 一個月前我還...
    沈念sama閱讀 48,808評論 3贊 376
  • 代替公主和親
    正文 我出身青樓瞳别，卻偏偏與公主長得像，于是被迫代替她去往敵國和親杭攻。 傳聞我的和親對象是個殘疾皇子祟敛，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2贊 359

推薦閱讀更多精彩內(nèi)容