24 ms·
Sprite.js: HTML5 framework for creating efficient animations in browsers
- olalonde 16y agoI 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);
- deleted 16y ago[deleted]
- coderdude 16y agoThis should shed some light on the technique: http://gamedev.stackexchange.com/questions/1589/fixed-time-step-vs-variable-time-step http://gamedev.stackexchange.com/questions/1589/fixed-time-s...
- necolas 16y agoDemo: http://batiste.dosimple.ch/sprite.js/test_input.html http://batiste.dosimple.ch/sprite.js/test_input.html I like how he can fall off the ledge into an infinite drop.
- rudd 16y agoCurious that Canvas rendering is so much slower / causes more load than the HTML backend, at least for me. Anyone know why?
- deleted 16y ago[deleted]
- al_james 16y agoBecause 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 16y agoIt'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 16y agoI don't think this is the whole story, because DOM manipulations are also very slow.
- csytan 16y agoOn the about page it says: Performance The HTML backend has received a particular attention to be as efficient as possible.
- nathanwdavis 16y agoI'm curious how the Ticker object provides more accurate tick timing than setTimeout considering it just uses setTimeout.
- weixiyen 16y agoAlways 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/ http://rpg.sleeperbot.com/