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

Sprite.js: HTML5 framework for creating efficient animations in browsers(github.com)

77 points by sverrejoh 15 years ago | 14 comments

olalonde 15 years ago |

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 15 years ago | |

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

necolas 15 years ago |

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

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

wlievens 15 years ago | |

Causing the scrollbar to appear :-)

morphir 15 years ago | | |

anyone of you reached the floor yet?

Cushman 15 years ago | |

Unless his head gets stuck in the ground :)

rudd 15 years ago |

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

al_james 15 years ago | |

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 15 years ago | | |

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 15 years ago | | |

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

csytan 15 years ago | |

On the about page it says:

    Performance

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

weixiyen 15 years ago |

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 15 years ago |

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

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);