

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
This should shed some light on the technique:
[http://gamedev.stackexchange.com/questions/1589/fixed-
time-s...](http://gamedev.stackexchange.com/questions/1589/fixed-time-step-vs-
variable-time-step)

------
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
Causing the scrollbar to appear :-)

~~~
morphir
anyone of you reached the floor yet?

~~~
flog
At some point down it was all turtles.

------
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
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
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.

------
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.

