What is Cocos2d-JS?

Question

Cocos2d-JS is Cocos2d-x engine's JavaScript version that includes Cocos2d-html5 and Cocos2d-x JavaScript Bindings. It equips your game with cross-browser and cross-platform abilities, accompanied by full Cocos2d-x features and simplified JavaScript friendly APIs.

I understand that you write JS and it works every where, but how it is done? I want to understand this diagram: http://www.cocos2d-x.org/wiki/Getting_Started_Cocos2d-js As I understand cocos2d-html5 is the same thing as cocos2d-x but it is in JS and based on WebGL. If this is true then what is Cocos2d-JSB? Does it compile JS script to native code? Or is it a JS extended interpreter, that understands more than native interpreter and can interpret cocos2d specific commands?

As far as I know, the JavaScript Bindings are used by Cocos2d-JS to communicate with Cocos2d-X, which can compile to native code. I have only been using Cocos2d-JS for a month so I am far from an expert and am very interested in an actual answer :) — Simon, Oct 28 '14 at 15:27

score 1 · Answer 1 · answered Oct 28 '14 at 17:31

As I understand cocos2d-html5 is the same thing as cocos2d-x but it is in JS and based on WebGL. If this is true then what is Cocos2d-JSB?

I believe the JSB appended to cocos2d-x JSB simply means: cocos2d-x JavaScript Bindings

The module that does the translation / mediation between two programming languages is commonly called a "binding". The JSB is just a small aspect of cocos2d-x that allows users to run apps written in cocos2d-js Javascript via the cocos2d-x C++ rendering engine.

Note that cocos2d-html5 is not exactly the same as cocos2d-x. It provides similar functionality than cocos2d-x but runs only in a web browser. Obviously cocos2d-html5 has no functionality for touch or accelerometer input, and other restrictions when it comes to saving and loading files, for instance.

Does it compile JS script to native code? Or is it a JS extended interpreter, that understands more than native interpreter and can interpret cocos2d specific commands?

The JSB simply maps between the Javascript API and the C++ cocos2d-x versions of classes, methods, identifiers and what not.

I don't know whether it compiles Javascript to native code.

The gist of this:

cocos2d-js provides a programming interface (API) in Javascript that produces the same results whether you run it in the browser via cocos2d-html5 or on other (mobile) platforms via cocos2d-x.

thanks for you answer, but I don't understand what does it mean to map JavaScript API and cocos2d-x classes. And I don't understand how it does that mapping either. — Narek, Oct 28 '14 at 19:04
Simple example: you have a JavaScript method like doSomething() and this method is actually implemented as a C++ method. What JSB does is to ensure that whenever you call doSomething() on the Javascript side it will look up and run the equivalent method on the C/C++ side of things. Now when you use cocos2d-html5 as the backend that method is instead forwarded to the corresponding Javascript implementation of doSomething() within the cocos2d-html5 framework. — CodeSmile, Oct 28 '14 at 20:10
How this works is far too broad to answer, and not necessary to understand what it does in principle. In fact you needn't even concern yourself with JSB at all, it's completely opaque to the end user. — CodeSmile, Oct 28 '14 at 20:11

score 0 · Accepted Answer · answered Oct 28 '14 at 20:10

Cocos2d-x uses SpiderMonkey, the Firefox JS virtual machine (VM), to execute JS code.

The JS VM is extended to support all the cocos2d, Chipmunk and CocosBuilder Reader APIs. So, when you create a CCSprite in JS, you are actually creating an C++ CCSprite. When you create an action in JS, you are actually creating an C++ action, when you create a particle system in JS, you are actually creating an C++ particle system… and so on. This approach is about 10x ~ 20x faster than HTML5 games even when they use accelerators like directCanvas Basically all the cocos2d, Chipmunk or CocosBuilder Reader APIs are going to perform almost at native speed. But you should pay attention to the following scenarios: The performance could be slow down while the garbage collector is run. Workaround: Do not create many JS objects. Reuse as many as possible Having a complex main loop could slow down the performance. Workaround: Profile your JS code, and if you can’t further optimize it, write the expensive parts in C++ and create JS bindings for those functions.

This is from wiki. So the JS interpreter is extended to understand cocos2d api command such as create Action or create Sprite.

What is Cocos2d-JS?

2 Answers2