
Cocos2D And Box2dWeb on JavaScript - DanielRibeiro
http://cocos2d-javascript.org/demo?demo=box2d
======
rkalla
A few months back I played with Box2D inside of libgdx[1] using JBox2D[2] and
thought the performance of untextured 2D entities was OK... seeing this
running in JavaScript sort of floors me. I forget (regularly it seems) how far
JavaScript has come.

This is every so cool... I can fathom a future, very soon, where something
like Angry Birds would be a CSS3/JavaScript app running at a decent framerate.

[1] <http://code.google.com/p/libgdx/> [2] <http://www.jbox2d.org/>

~~~
coenhyde
:) Angry Birds using html5, javascript and WebGL already exists.

<http://chrome.angrybirds.com/>

~~~
mikek
It also relies upon Flash.

~~~
magicalist
flash for audio, just to be clear. I think this has to do with queueing up a
bunch of small sounds and playing them at precise moments, which browsers
currently suck at.

Erik Moller at opera wrote about an interesting approach to the problem since
then[1], and hopefully we'll see browsers improving their audio support in
general.

[1] [http://my.opera.com/emoller/blog/2011/06/13/emberwind-
week-1...](http://my.opera.com/emoller/blog/2011/06/13/emberwind-week-1-flash-
free-audio)

------
kevingadd
I don't know why you would opt to write a browser game from scratch in
JavaScript and then use libraries with horrible garbage characteristics. Even
these simple demos have horrible collection pauses.

Bundling a local development server with their dev tools is a good move,
though. Doing development against file:// is basically impossible at this
point due to how badly modern browsers mishandle requests for non-http
resources.

~~~
phoboslab
Garbage collection pauses are a problem, but Mozilla and Google are aware of
it and working to improve the situation. The GC in IE9 seems to be
surprisingly good (well, "fast" at least) already.

What do you mean with "write from scratch"? There are libraries (like this
one, or ImpactJS[1]) to help you out. If you develop a new browser game, HTML5
has a lot of advantages over Flash today - mobile browser or even "native"
mobile support[2] is one of them.

And yes, file:// URIs are horrible to deal with. Most browsers have a very
broken "same origin policy" for file:// URIs - e.g. you can't manipulate
images loaded from a file:// URI, because file://c/foo/bar.jpg is handled as
if not loaded from the same "domain" as the hosting file://c/foo/test.html
(Opera got this right, though).

Disclaimer: I'm the ImpactJS guy.

[1] <http://impactjs.com/>

[2] [http://www.phoboslab.org/log/2011/04/ios-and-javascript-
for-...](http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-
this-time)

~~~
Meai
I don't understand why people have to build everything with Javascript.
Objectively there is nothing that makes Javascript better suited for games
than Flash/as3. I don't think that last ~0.5% of lacking Flash adoption is
bothering anyone. There are no good IDEs for javascript. Library support is
bad (Greensock? Flixel?) You don't honestly think that your 99$ library holds
its own against these completely free features:
<http://flixel.org/features.html> Also People can much more easily steal your
code and images than in Flash.

As soon as Javascript really catches up with Flash on most of these things
(which will still take a few years) we hopefully can program in Native Client
which will destroy both Javascript and Flash.

Extra topic on why browsers refuse to implement native client: If someone
could explain what stake Browsers have in Javascript, I'd love to hear it. I
have two theories: Browsers want to keep the web as "open" as possible. This
means Javascript, because native binary executables would close this up
immediately. On the other hand, I don't really understand the point of this
openess. Every other market in existance goes by fine with binaries. Vendors
give you tutorials and examples on how to build software. So what is the point
of being open? To steal code? I don't see any other reason anymore.

So I don't really think it's about being open for browser vendors. It's about
control. If anyone can trivially write their own layout engine, has their own
favorite language on the client....what are browsers worth then? Absolutely
nothing, they would be degraded to cURL.

It can't be security. Obviously javascript can call c code too, Nodejs does
it. It's about sandboxing, and I see zero reasons why it can't be possible to
sandbox pure c properly.

~~~
gte910h
>. I don't think that last ~0.5% of lacking Flash adoption is bothering
anyone.

iPad, MacBook air?

~~~
Meai
With Flashbuilder you can deploy on iOS just fine.

------
dstein
You can experiment with box2djs separately at
<https://github.com/HBehrens/box2d.js>

There are a few other javascript ports of box2d floating around, but this one
seems the newest. It's fun stuff, and I can get well over 100 fps in a 640x480
canvas in Chrome.

~~~
DanielRibeiro
The cocos2djs also says that it was using box2dweb[1] but changed to box2d.js
due to being more compatible with commonjs. Which is very interesting, as I've
used box2dweb and found it quite a competent port.

[1] <http://code.google.com/p/box2dweb/>

------
mrspeaker
Can someone explain this to me?

    
    
        var sprite = cocos.nodes.Sprite.create({file: '/resources/ball.png'});

And then it's assigned to a box2d object:

    
    
        var bdy = world.CreateBody(bodyDef);
        bdy.sprite = sprite;

How does box2d know how to deal with a cocos2d sprite object?

~~~
Raticide
That's just to keep a reference to the sprite along with the body. There's no
real magic to it. Later in the 'update' function it loops over each body and
updates the attached sprite:

[https://github.com/ryanwilliams/cocos2d-demo-
box2d/blob/mast...](https://github.com/ryanwilliams/cocos2d-demo-
box2d/blob/master/src/main.js#L62)

