Sprite.js: HTML5 framework for creating efficient animations in browsers

[sverrejoh]

https://github.com/batiste/sprite.js

[olalonde]

I was a bit curious what exactly this "system load" was. Turns out it's a ratio between the time the browser takes to draw the particles and the frequency at which it is supposed which to draw.

    this.tick_duration = 25;
    
    ....

    this.now = new Date().getTime();

    // Drawing...

    this.time_to_paint = (new Date().getTime()) - this.now;
    this.load = Math.round((this.time_to_paint / this.tick_duration) * 100);

[coderdude → olalonde]

This should shed some light on the technique: http://gamedev.stackexchange.com/questions/1589/fixed-time-s...

[necolas]

Demo: http://batiste.dosimple.ch/sprite.js/test_input.html

I like how he can fall off the ledge into an infinite drop.

[wlievens → necolas]

Causing the scrollbar to appear :-)

[morphir → wlievens]

anyone of you reached the floor yet?

[flog → morphir]

At some point down it was all turtles.

[Cushman → necolas]

Unless his head gets stuck in the ground :)

[rudd]

Curious that Canvas rendering is so much slower / causes more load than the HTML backend, at least for me. Anyone know why?

[al_james → rudd]

Because using Canvas requires you to manage redrawing the entire scene each frame in javascript. When using DOM based sprites, the browser takes care of the redrawing whenever you move an element (e.g. a spite).

[chipsy → al_james]

It's also a display model problem. A big bitmap that you draw on arbitrarily is just harder to optimize than a decomposable scenegraph.

This downside of Canvas also means it may become a dead-end for high-performance 2D, unless we discover some way of making all manipulations go completely on-GPU. Canvas is presently best suited for creation of individual textures and sprites, while other methods(CSS, SVG, WebGL) are better to render and transform them.

[csytan → al_james]

I don't think this is the whole story, because DOM manipulations are also very slow.

[csytan → rudd]

On the about page it says:

    Performance

   The HTML backend has received a particular attention to be as efficient as possible.

[weixiyen]

Always wanted to make an RPG game using sprites. Anyone ever tried?

I made a prototype a while ago just to demo some sprite movement while messing around with Node.js (it's concurrent multi-user): http://rpg.sleeperbot.com/

[nathanwdavis]

I'm curious how the Ticker object provides more accurate tick timing than setTimeout considering it just uses setTimeout.