5 ms·

Cocos2D And Box2dWeb on JavaScript

38 points by DanielRibeiro 15y ago

kevingadd 15y ago
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 15y ago
  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/ http://impactjs.com/ [2] http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-...
  - kevingadd 15y ago
    I'm referring to how if you look at the demos linked, they're using C++/Java style OO patterns in JavaScript that's apparently being written from scratch (instead of ported from existing C++/Java game code). If you're writing from scratch, you should really use JS-friendly patterns so that your code will perform better. Some of this might be due to the fact that they're porting libraries from other languages (like Box2D, for example). Entity.position = new geo.Point(x, y) versus entity.x = x, entity.y = y; ... etc.
  - Meai 15y ago
    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 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 15y ago
      >. I don't think that last ~0.5% of lacking Flash adoption is bothering anyone. iPad, MacBook air?
      - Meai 15y ago
        With Flashbuilder you can deploy on iOS just fine.
- azakai 15y ago
  > 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. You can run a local development server with a single line of Python, python -m SimpleHTTPServer 8000 so not sure why bundling a server is needed. In fact I would worry about running a bundled server, since I am not sure I can trust them to not listen for outside connections by default or have other security issues.
rkalla 15y ago
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/ http://code.google.com/p/libgdx/ [2] http://www.jbox2d.org/ http://www.jbox2d.org/
- coenhyde 15y ago
  :) Angry Birds using html5, javascript and WebGL already exists. http://chrome.angrybirds.com/ http://chrome.angrybirds.com/
  - mikek 15y ago
    It also relies upon Flash.
    - magicalist 15y ago
      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-flash-free-audio http://my.opera.com/emoller/blog/2011/06/13/emberwind-week-1...
  - rkalla 15y ago
    Oh, I was gunning for only CSS3/JavaScript/HTML -- I assume the WebGL version linked here ported a lot of the OGL code from the mobile version to WebGL right? (I could be wrong)
- phoboslab 15y ago
  Shameless plug: Impact also works nicely with Box2D, if you need accurate physics. http://impactjs.com/demos/physics/ http://impactjs.com/demos/physics/
dstein 15y ago
You can experiment with box2djs separately at https://github.com/HBehrens/box2d.js 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 15y ago
  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/ http://code.google.com/p/box2dweb/
mrspeaker 15y ago
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?
- DanielRibeiro 15y ago
  If I'm not mistaken, Box2d doesn't. This is where Cocos come to the rescue, enhacing things and making the glue between the physic world and the image world.
- Raticide 15y ago
  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/master/src/main.js#L62 https://github.com/ryanwilliams/cocos2d-demo-box2d/blob/mast...

38 points by DanielRibeiro 15y ago

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 15y ago
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/ http://impactjs.com/ [2] http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-...
- kevingadd 15y ago
  I'm referring to how if you look at the demos linked, they're using C++/Java style OO patterns in JavaScript that's apparently being written from scratch (instead of ported from existing C++/Java game code). If you're writing from scratch, you should really use JS-friendly patterns so that your code will perform better. Some of this might be due to the fact that they're porting libraries from other languages (like Box2D, for example). Entity.position = new geo.Point(x, y) versus entity.x = x, entity.y = y; ... etc.
- Meai 15y ago
  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 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 15y ago
    >. I don't think that last ~0.5% of lacking Flash adoption is bothering anyone. iPad, MacBook air?
    - Meai 15y ago
      With Flashbuilder you can deploy on iOS just fine.
azakai 15y ago
> 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. You can run a local development server with a single line of Python, python -m SimpleHTTPServer 8000 so not sure why bundling a server is needed. In fact I would worry about running a bundled server, since I am not sure I can trust them to not listen for outside connections by default or have other security issues.

rkalla 15y ago

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/ http://code.google.com/p/libgdx/ [2] http://www.jbox2d.org/ http://www.jbox2d.org/

coenhyde 15y ago
:) Angry Birds using html5, javascript and WebGL already exists. http://chrome.angrybirds.com/ http://chrome.angrybirds.com/
- mikek 15y ago
  It also relies upon Flash.
  - magicalist 15y ago
    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-flash-free-audio http://my.opera.com/emoller/blog/2011/06/13/emberwind-week-1...
- rkalla 15y ago
  Oh, I was gunning for only CSS3/JavaScript/HTML -- I assume the WebGL version linked here ported a lot of the OGL code from the mobile version to WebGL right? (I could be wrong)
phoboslab 15y ago
Shameless plug: Impact also works nicely with Box2D, if you need accurate physics. http://impactjs.com/demos/physics/ http://impactjs.com/demos/physics/

dstein 15y ago

You can experiment with box2djs separately at https://github.com/HBehrens/box2d.js 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 15y ago
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/ http://code.google.com/p/box2dweb/

mrspeaker 15y ago

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?

DanielRibeiro 15y ago
If I'm not mistaken, Box2d doesn't. This is where Cocos come to the rescue, enhacing things and making the glue between the physic world and the image world.
Raticide 15y ago
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/master/src/main.js#L62 https://github.com/ryanwilliams/cocos2d-demo-box2d/blob/mast...