Developers Manual > Cocos2d-x > Modules > Scripting > Javascript Binding > Basic usage of JSB API

Basic usage of JSB API

Note: Based on Cocos2D-X version 3.0 alpha0

Create a new Cocos2D-X project, you’ll find a file “Classes/AppDelegate.cpp”. This file is where the game starts. In applicationDidFinishLaunching(), all the intializing works are here.

Director *director = Director::getInstance();
director->setOpenGLView(EGLView::getInstance());
…
ScriptingCore* sc = ScriptingCore::getInstance();
sc->addRegisterCallback(register_all_cocos2dx);
…
sc->start();
ScriptEngineProtocol *engine = ScriptingCore::getInstance();
ScriptEngineManager::getInstance()->setScriptEngine(engine);
// 1.
ScriptingCore::getInstance()->runScript("main.js");
  1. After some initializing works with C**. This is the start of JSB. You can change the name of “main.js” whatever you want. But all the JSB code start from this. So do all the preparations in “main.js”. Create a layer first. MyLayer is implemented in “myApp.js”. <pre> // 2. var MyLayer = cc.Layer.extend { this.*super; cc.associateWithNative; }, // 4. init:function { this.*super; … var closeItem = cc.MenuItemImage.create { cc.log; },this); var menu = cc.Menu.create; return true; } }); </pre>
  2. MyLayer = cc.Layer.extend; It’s a JSB way to create a layer, which inherits from CCLayer. This object inheritance way comes from John Resig’s javascript Inheritance. Layer is a fundamental element to make up a scene. So a layer instance should be created in a scene.
  3. ctor is a constructor in JSB way, it’ll be called when you new a MyLayer. Don’t forget call this.*super if you want to override ctor. It’s JSB way to call superclass’s ctor. And ctor:function, // 5. onEnter:function { this.*super; var layer = new MyLayer; this.addChild; layer.init; } }); </pre>
  4. Still we should override the ctor, and new an MyLayer object in onEnter. When the MyScene object is running, the onEnter will be called, then the layer will be create dynamically. Now it is time to run the scene. Check out the “main.js”. <pre> // 6. require; var appFiles = [ ‘src/resource.js’, ‘src/myApp.js’ ]; … for { require; } var director = cc.Director.getInstance; … // 7. var myScene = new MyScene; director.runWithScene; </pre>
  5. You may be falimilar with the “#include” way to rely on other files in C**. But when js file call functions in other js files, then you should use “reuqire(“”)”. It can tell the engine to load all the needed js files dynamically.

  6. Use keyword new and ClassName() to create the first scene of your game, which implemented in “myApp.js”. This scene inherits from cc.Scene, so myScene is an autorelease object. You may be familiar with the C*+ way to create a scene auto scene = HelloWorld::createScene; It has a little different.
    As we learned some fundamental conventions about Cocos2D-x and JSB, let’s see how C*+ API and JSB API different.

Before Cocos2D-X 3.0, if you are familiar with C*+ way, you may get used to use CCDirector, CCScene, CCLayer and CCSprite etc… Now the Cocos2D-X 3.0 remove the CC prefix for C*+ Classes and singletons use getInstance() instead of sharedDirector() etc… . However, we use the cc. prefix in JSB from Cocos2D-X 2.0 to Cocos2D-X 3.0. Here are some examples of the usage of Cocos2D-X API by JSB and C++:

||
|**C++**|**JSB**|
|Director::getInstance()|cc.Director.getInstance()|
|Menu::create(m1, m2, NULL)|cc.Menu.create(m1, m2)|
|Sequence::create(a1, a2, NULL)|cc.Sequence.create(a1, a2)|
|Point()|cc.p()|
|MenuItemLabel::create(label, CC_CALLBACK_1(MyClass::callBcak, this))|cc.MenuItemLabel.create(label, function(){do_something}, this)||etc...|

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.