js绑定c++(JSB或者jsbinding)的小白教程! (已完结)

##仅在Windows下测试通过

官方自动绑定教程
官方绑定说明

###8月9日伪更新

17楼更新如何把c++文件和绑定好的文件加入模版,以后每次新建项目默认自带绑定的代码,感谢@zhutanni同学,以下是直通车

http://forum.cocos.com/t/js-c-jsb-jsbinding/37909/17?u=atmy

我第一次绑定的时候,到处找教程,找方法,用了二十多天才搞定(可能我智商达到了250,太高了,不能理解教程里“太简单"的东西),看见论坛上有人在问,而且网上的教程都很老了,或者是LUA的,或者有些人觉得cocos2d-js的和creator的不一样,其实是一样的,所以今天用我弟弟的电脑(用来玩游戏的,啥开发工具都没有,相当于是一片空白,从0开始,方便照顾小白:joy:

**小白教程,大神勿喷,**有啥问题或者疑问可以回帖(虽然我啥都不懂:joy:

本人的运行环境是在32位的windows下,64位应该也是一样的,需要的软件下载相应的64位版本就行了,因为是纯洁的电脑,所以java和python这些都要现配置,如果配置好了的 同学可以跳过

cocos2d-js的绑定可以参照我这里的方法,因为creator构建以后就就是一个完整的cocos2d-js项目,因此,除了不需要用creator构建一次以外,cocos2d-js的绑定和creator的绑定完全一样!

##第一部分:环境配置

1.下载jdk,并配置环境变量

2.下载python 2.7.5,并配置环境变量

3.下载安装安卓SDK安卓NDK(这里我用的是r10d的版本),还有ANT,并且配置这几个软件环境变量(如果以前用cocos2d-x已经配置好了这些的可以省略,这里 我也不知道怎么配置环境变量我是现下的cocos2d-x引擎,然后运行引擎根目录的setup.py,然后根据提示输入相应的目录,傻瓜式配置:joy:,虽然我不知道这一步有没有用,但是后面反正都会用到,所以还是先配置好)

以上步骤已经配置过的同学可以跳过

以下是主要部分 虽然就两个软件:joy:

4.下载安装PyYAML-3.11.win32-py2.7.zip (274.6 KB)并安装(默认安装目录是C:\Python27\Lib\site-packages,必须安装到这里

5.下载Cheetah-2.4.4.tar.zip (191.7 KB)并解压到

  C:\Python27\Lib\site-packages

  然后进入

  C:\Python27\Lib\site-packages\Cheetah-2.4.4

  目录,命令行运行: python setup.py install(在文件夹空白处按住shift键点击鼠标右键,选择:在此处打开命令窗口(好像不能选择在别处打开命令窗口啊))

6.安装creator,用于测试绑定环境是否配置成功

安装好以后,进入,

Creator软件根目录\app-1.1.1\resources\cocos2d-x\tools\tojs

目录下运行 genbindings.py 这个文件,建议不要直接双击,双击看不到绑定成功还是失败,用命令行运行:

genbindings.py,如果成功会出现 Generating javascript bindings succeeds 的字样,然后进入

Creator软件根目录\app-1.1.1\resources\cocos2d-x\cocos\scripting\js-bindings\auto

这个目录下查看绑定好的文件,如果成功绑定,目录下的文件的修改日期就是现在

自此js绑定的环境就配置好了

今天太晚了(看完直播我就开始弄这个了,果然是智商高达250 :joy: 短短几句话浪费了我两个小时),明天更新如何绑定自己的c++文件,以及如如何应用到项目里面

7月8日更新

##第二部分:绑定

首先我用android-sdk-manager(SDK根目录下的SDK Manager.exe)下载了两个安卓版本的代码和API之类的,如果不能下载或者下载慢

这里我也不知道下不下安卓版本的代码和API对绑定有没有影响,不过保险起见,还是先下一两个吧

1.安装 微修 撕丢丢 2013(这里是Visual Studio 2013,我用了特殊代码加持,据说高手看到是中文,小白看到是英文,看看你是高手还是小白?:joy:),我没有勾选或者去除任何模块,全部默认一律下一步(当然我没有安装在C盘)

用了那么久的VS 2013,一直以为是个正经的IDE,今天才知道原来VS的核心功能是 简体中文, 没想到你是这样的VS :joy:

一个小时后…

安装完成,现在我们来试试能不能构建安卓项目

打开creator,新建一个名为jsbTest的helloworld项目,然后构建(一定要勾选调试模式,一定要勾选调试模式,一定要勾选调试模式,

居然提示我NDK目录为空???????

好吧,看来要我亲自动手了,要在creator的偏好设置-原生开发环境里手动设置sdk、ndk、ant的目录(ant目录请选择ant根目录下的bin文件夹)

然后我们再次构建,“够贱”成功

##重要部分来了,后来的同学,请快点坐好,后面睡觉的同学不要睡了

1.选择需要绑定的c++文件(包括头文件和源文件),这里我新建一个头文件和cpp文件,这里c++文件的作用就是在控制台输出:jsbinding succeed ! oh yeah!,用于提示调用成功,头文件内容如下:

//   jsbTest.h
#ifndef __JSB_TEST_H__
#define __JSB_TEST_H__
#include "cocos2d.h"

class jsbTest
{
public:
	static void testlog();
};

#endif //__JSB_TEST_H

cpp文件如下

 //   jsbTest.cpp

#include "jsbTest.h"
USING_NS_CC;

void jsbTest::testlog()
{
	CCLOG("jsbinding succeed! oh yeah!");
}

然后把.h文件和.cpp文件拷贝到以下目录(下面修改.ini配置文件的时候方便一点,当然也可以拷贝到其他目录,但是我没试过)

Creator软件根目录\app-1.1.1\resources\cocos2d-x\tools\tojs

然后我们开始创建.ini配置文件(其实就是复制一个来自己修改一下啦),这里我只讲要修改的,.ini文件里的参数的具体用法请看这里(就不要问我了,因为我也搞不清楚:joy:),这里非常感谢原作者,这是我的启蒙教程:kissing_heart:

找个内容最简单的.ini文件来修改,这里我选的是目录下的cocos2dx_ui.ini,复制一份到当前目录下,并改名为jsbTest.ini(随便叫啥都可以啦,这里为了方便起见,就和c++文件叫一样的名字好了),然后用文本编辑器打开jsbTest.ini文件,并且修改为以下内容(这里如果是照着我的教程来的,cpp文件和头文件是我贴出来的内容,可以直接复制

[jsbTest]
# the prefix to be added to the generated functions. You might or might not use this in your own
# templates
prefix = jsbTest

# create a target namespace (in javascript, this would create some code like the equiv. to `ns = ns || {}`)
# all classes will be embedded in that namespace
target_namespace = 

# the native namespace in which this module locates, this parameter is used for avoid conflict of the same class name in different modules, as "cocos2d::Label" <-> "cocos2d::ui::Label".
cpp_namespace = 

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

# what headers to parse
headers = %(cocosdir)s/tools/tojs/jsbTest.h

replace_headers = 

# what classes to produce code for. You can use regular expressions here. When testing the regular
# expression, it will be enclosed in "^$", like this: "^Menu*$".
classes = jsbTest

classes_need_extend = 

# what should we skip? in the format ClassName::[function function]
# ClassName is a regular expression, but will be used like this: "^ClassName$" functions are also
# regular expressions, they will not be surrounded by "^$". If you want to skip a whole class, just
# add a single "*" as functions. See bellow for several examples. A special class name is "*", which
# will apply to all class names. This is a convenience wildcard to be able to skip similar named
# functions from all classes.

skip = 

rename_functions = 

rename_classes =

# for all class names, should we remove something when registering in the target VM?
remove_prefix = 

# classes for which there will be no "parent" lookup
classes_have_no_parents = 

# base classes which will be skipped when their sub-classes found them.
base_classes_to_skip = 

# classes that create no constructor
# Set is special and we will use a hand-written constructor
abstract_classes = 

# Determining whether to use script object(js object) to control the lifecycle of native(cpp) object or the other way around. Supported values are 'yes' or 'no'.
script_control_cpp = 

这里我修改了哪些地方呢?

1.文件第1行中括号内的:cocos2dx_ui 修改为:jsbTest

2.第4行的:prefix = cocos2dx_ui 修改为:prefix = jsbTest

3.第8行的:target_namespace = ccui 修改为:target_namespace =

4.第11行的:cpp_namespace = cocos2d::ui 修改为:cpp_namespace =

5.第29行的:(太长了我就不贴出来了) 修改为:headers = %(cocosdir)s/tools/tojs/jsbTest.h

6.第31行的:(太长了我懒得复制:joy:) 修改为:replace_headers =

7.第35行的:(这句更长,有那···么长) 修改为:classes = jsbTest

8.第37行的:(非长常,呸,肥肠长,呸呸,非常长) 修改为:classes_need_extend =

9.然后最后的所有参数,”="号后面的东西全部删除, 来克 zs

保存完工,接下来就修改绑定脚本

在当前目录下找到:genbindings.py,用文本编辑器打开,在152行的:cmd_args的大括号里照着格式添加如下内容:

'jsbTest.ini': ('jsbTest', 'jsb_jsbTest_auto')

并保存

然后命令行运行:genbindings.py

绑定成功会出现:Generating javascript bindings succeeds 的字样

然后把你的.h和.cpp文件移动或者复制到:

jsbTest(项目根目录)\build\jsb-default\frameworks\runtime-src\Classes

然后进入目录:
Creator软件根目录\app-1.1.1\resources\cocos2d-x\cocos\scripting\js-bindings\auto

在最下面你会看到jsb_jsbTest_auto.cpp文件和jsb_jsbTest_auto.hpp两个文件,这就是绑定后的源文件,把这两个文件拷贝到:
jsbTest(项目根目录)\build\jsb-default\frameworks\cocos2d-x\cocos\scripting\js-bindings\auto

然后进入:

Creator软件根目录\app-1.1.1\resources\cocos2d-x\cocos\scripting\js-bindings\auto\api

找到:jsb_jsbTest_auto_api.js文件并复制到:

jsbTest(项目根目录)\build\jsb-default\frameworks\cocos2d-x\cocos\scripting\js-bindings\auto\api

然后进入:

jsbTest(项目根目录)\build\jsb-default\frameworks\runtime-src\proj.win32

双击打开:hello_world.vcxproj 这个文件(第一次打开VS会有一个提示框,说啥c++位置啥的,提示框内全是文字,一定要点确定,一定要点确定,一定要点确定,重要的事说三遍),然后找到hello_world项目下的Classes并右键选择添加-现有项

选择刚才拷贝过来的.h和.cpp源文件并添加

然后选择libjscocos2d项目下的auto并右键选择添加-现有项

添加绑定好的.hpp和.cpp文件

然后双击jsb_jsbTest_auto.cpp文件

这时会提示jsbTest.h文件找不到,我们亲自动手帮他找

右键单击libjscocos2d选择属性

选择c+±常规

在附加包含目录那里点击下拉框右边的三角形,选择编辑

点击空白的地方添加如下内容:

$(EngineRoot)…\runtime-src\Classes

并保存,然后就不会找不到jsbTest.h头文件啦

然后双击AppDelegate.cpp文件

第43行:

点击右键选择转到定义

然后会跳转到另一个cpp文件

在上面头文件包含里加上:

#include "jsb_jsbTest_auto.hpp"

然后在第74行(别问我为什么在74行,这里有空位置:joy:,我也不知道顺序会不会有影响,保险起见就在74行)添加如下内容:

sc->addRegisterCallback(register_all_jsbTest);

然后点击vs的本地Windows调试器调试一下,看看有无报错

如果不出意外,你就能看到helloworld啦

##这个时候就可以调用c++代码了

怎么调用呢?

进入目录:jsbTest(项目根目录)\build\jsb-default\src

打开目录下的:project.dev.js(creator项目里的所有js脚本在构建以后通通会合并到这个文件里),找到你想要调用c++的地方,这里我在onLoad里调用,就打个log嘛

修改好后保存,然后用VS2013调试(因为构建以后才能进行js绑定,但是构建以后不能用creator预览,所以用VS来调试预览,这里我觉得比较好的做法是,在creator编辑的过程中,需要调用c++的地方先留着,其他需要c++调用结果的逻辑先自己模拟一下,等项目做的差不多的时候,再构建,构建后再绑定,然后就修改project.dev.js文件,找到你的脚本的cc.class,然后修改你占位的地方,然后再用VS调试预览)

然后目光转向VS的控制台输出,你会看到:

##冰狗!绑定成功啦

##教程完

如果教程有啥不对的地方,希望大家反馈给我,如果有错误我会立马更正,否者会误导其他同学,谢谢大家

有啥问题可以回帖咨询,当然这方面我只是一知半解,如果我知道的东西一定知无不言言无不尽

如果本教程对你有帮助,麻烦大家点一下右下角的桃心吧

集齐32个赞,我将抽取一位幸运同学,送出西瓜一瓣,汉堡一个:watermelon::hamburger:

感谢大家收看本期节目,我们下期节目再见(手动整理稿子:joy:

88赞

先顶再看:kissing_heart:

顶一个,虽然现在用不到,也不知道以后用不用得到,还想着是以后要用到有问题再来请教你,结果你就写了个教程

教程已经完了,需要的同学可以看看,看一看不吃亏,看一看不上当,看一看买不了车也买不了房,看一看对眼睛好:joy:

Android SDK 更新可以使用国内镜像服务器,参考这里:http://www.androiddevtools.cn/,不用翻墙就可以更新,我一般用腾讯的镜像。

:watermelon::watermelon: 好的,感谢告知

1赞

太牛了 太棒了 有空照着做一遍

感谢大神!!!

大神,问个问题,只是简单修改一下底层C++代码,在creator里面怎么才能生效?

额,我才不是啥大神呢,如果要定制引擎的话,看看下面这个文档

http://www.cocos.com/docs/creator/advanced-topics/engine-customization.html

你好用心。。。。好用功。。。。

很实用,赞一个,谢谢分享

楼主,我发现你这样做的话岂不是每个新项目都要在把之前的生成的代码重新拖到新项目来。
今天研究了一会,发现可以直接在creator那里搞定,然后改下配置,就可以在新建项目的时候对于每个项目都会有新的代码了。。
还有,楼主,有没有办法可以不构建,直接在creator里面改脚本就可以了。。表示好麻烦啊

能不能弄个教程让大家都学习一下?:heart_eyes:

这个我觉得把c++绑定部分定制到引擎里,应该就可以像cocos2d引擎自带的api一样,可以用creator直接预览了,当然我只是猜测,因为我没有实践过,引擎定制请看这里

在上班拉
下班回去了 在这说下怎么搞吧

好的,感谢,到时候我可以把你的教程合并到我的帖子吗?当然我会说明出处:grin:

写好的jsbTest.cpp和jsbTest.h文件放到
CocosCreator\resources\cocos2d-x\cocos\scripting\js-bindings 下
我这里是新建了一个文件夹,也就是jsbTest文件夹,然后把cpp和h文件放在里面。

然后再到CocosCreator\resources\cocos2d-x\tools\tojs下修改之前编写好的jsbTest.ini
将headers 的路径修改成现在jsbTest.h所在的路径,比如我的是:
%(cocosdir)s/cocos/scripting/js-bindings/jsbTest/jsbTest.h

改完之后重新生成一次,成功就可以了

接下来来到 CocosCreator\resources\cocos2d-x\build下, 运行cocos2d-win32.sln

如图所示,将生成的jsb_jsbTest_auto.cpp 和.h文件添加到如图目录下,
然后就是我新添加的文件夹jsbTest,因为我这里新建的是和 auto在同级目录下,所以我在这里新建的筛选器也是同级的。
添加完jstTest后,也要在libjscocos2d的属性中添加附加目录的路径,一定要填相对路径,不要绝对,参考auto的路径。

这里完成之后,就在这个项目中打开 js_module_register.cpp文件



如图添加这些代码

改完这些之后, 重新生成项目

然后,到路径
CocosCreator\resources\cocos2d-x\templates下
编辑cocos2dx_files.json
如下图:




添加完这些路径就全部OK了
然后新建项目就可以如楼主所说那样 调用C++代码了

2赞

我也搞完了,不过我是按官方的做法搞的

mac上我运行.py文件的时候一直提示没有NDK_ROOT,
我creator打包到ios的 还用配置NDK,要是配置怎么弄?求解???

mac上我也不知道,你只有百度看看了:joy: