Js binding in cocos creator

Js binding in cocos creator


I want to binding some custom C++ class. Where can i put my js api to cocos creator can load as lib?
For example, i have class BaseObj in C++, after generating js i have 3 files: *.cpp, *.hpp and *.js. I put 2 files: *.cpp, *.hpp in win32 project and build simulator again. That worked. However when i call the BaseObj class in cocos creator it has this error: “load script [BaseObj ] failed : ReferenceError: BaseObj is not defined”. Despite that i stil run simulator normally without error.




Thanks in advance. I will try


i were successfull in binding my BaseObj class to js by auto generator. And what i do next with ouput file: *cpp, *hpp, *.js? Do i must to follow step 2 “Customize Cocos2d-x-lite Engine” in this http://docs.cocos2d-x.org/creator/manual/en/advanced-topics/engine-customization.html#2-customize-cocos2d-x-lite-engine? Give me more detail, please.

Best regards


if you use the JSB2.0 to binding your obj to js,then you don’t need to follow step 2 to customize cocos2d-x-lite engine.you can copy the abstraction layer code in cocos/scripting/js-bindings/jswrapper directory and paste them to other projects directly
Refence this for Manual Binding and Auto Binding


Have you got any example project? I have still not understood this. What would i copy in cocos/scripting/js-bindings/jswrapper? As i mentioned, after binding i have three output files: cpp, hpp, js. But i don’t know what i have to do with them to inject it into cocos creator. I have tried open cocos2dx by visual studio and add cpp, hpp file and rebuilt to new simulator.exe. It worked. However editor of coco creator always show error can not find my class. Cause i can’t run debug


this is a detail description of auto binding C++ class to js

First: deploy the environment

Install jdk

Install python

Install Android SDK and NDK

Install ANT

Install yaml

Install Cheetah

Install CocosCreator

Second: Bindings

1.write your own class, Like jsbTest.h and jsbTest.cpp

// jsbTest.h

#ifndef __JSB_TEST_H__

#define __JSB_TEST_H__

#include "cocos2d.h"


class jsbTest



static void testlog();



#endif //__JSB_TEST_H

 // jsbTest.cpp


#include "jsbTest.h"



void jsbTest::testlog()

    CCLOG("jsbinding succeed! oh yeah!");

2.put the *.h and *.cpp files to “CocosCreator/resources/cocos2d-x/cocos/scripting/js-bindings”

3.create a config file named “jsbTest.ini” at path “CocosCreator/resources/cocos2d-x/tools/tojs”,refence other *.ini file like “cocos2dx_spine.ini”.

config the headers path in the .ini file


# 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)cocos/scripting/js-bindings


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 =

4.fix the “genbindings.py” file add

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

To “cmd_args” property.

Then run “genbindings.py”. If success you will see “Generating javascript bindings succeeds”

5.copy the *.h and *.cpp files to the path “(project dir)\build\jsb-default\frameworks\runtime-src\Classes”

6.at the path “CocosCreator\resources\cocos2d-x\cocos\scripting\js-bindings\auto” you will see “jsb_jsbTest_auto.cpp” and “jsb_jsbTest_auto.hpp”,copy them to “(project dir)\ build\jsb-default\frameworks\cocos2d-x\cocos\scripting\js-bindings\auto”

7.copy the file “jsb_jsbTest_auto_api.js” from “CocosCreator\ resources\cocos2d-x\cocos\scripting\js-bindings\auto\api” to “(project dir)\ build\jsb-default\frameworks\cocos2d-x\cocos\scripting\js-bindings\auto\api”

8.at the project dir “build\jsb-default\frameworks\runtime-src\ proj.win32”,open the *.vcxproj file with visual studio,and add the *.h and *.cpp to the “Classes” foler.
add the *.hpp and *.cpp to the “libjscocos2d” project
fix the include in “jsb_jsbTest_auto.cpp”

9.at “js_moudle_register.cpp” file,add

#include "jsb_jsbTest_auto.hpp"

and add code


10.run and build the project.then you can use your c++ class in js code, like

    extends: cc.Component,

    properties: {


    onLoad () {


I did all 10 steps as you told me above. Everything is ok. However when i want to inherit that class which has been binding in js code in cocos creator, there is this error: “load script [jsbTest ] failed : ReferenceError: jsbTest is not defined” in cocos creator editor or i can’t run debug because of this error. It like this:

extends: jsbTest,

properties: {


newMethod() {
    //do something


I think i have to do something for cocos creator. Is it right? Because do all above steps only effect to native. It mean build to exe or apk is ok but not ok for debugging or for cocos creator load script. Event i built to exe and replaced it at: “CocosCreator/resources/cocos2d-x/simulator/win32". I also wonder why cocos creator doesn’t allow config a custom simulator.


this feature is not support yet,because of the environment of builded exe is actually different with the original exe.so the editor can’t run the custom simulator


Does that mean i can do anything? I think i shouldn’t binding anything because it isn’t supported in cocos creator editor. So sad. Anw, thank you so much, @Big_Bear