Sprite.js: HTML5 framework for creating efficient animations in browsers (opens in new tab)

(github.com)

77 pointssverrejoh15y ago14 comments

14 comments

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

coderdude15y ago

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

necolas15y ago

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

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

wlievens15y ago

Causing the scrollbar to appear :-)

morphir15y ago

anyone of you reached the floor yet?

1 more reply

Cushman15y ago

Unless his head gets stuck in the ground :)

rudd15y ago

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

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

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

csytan15y ago

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

csytan15y ago

On the about page it says:

    Performance

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

weixiyen15y 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/

nathanwdavis15y ago

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

j / k navigate · click thread line to collapse

14 comments

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

coderdude15y ago

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

necolas15y ago

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

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

wlievens15y ago

Causing the scrollbar to appear :-)

morphir15y ago

anyone of you reached the floor yet?

1 more reply

Cushman15y ago

Unless his head gets stuck in the ground :)

rudd15y ago

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

al_james15y ago

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

csytan15y ago

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

csytan15y ago

On the about page it says:

    Performance

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

weixiyen15y 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/

nathanwdavis15y ago

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

j / k navigate · click thread line to collapse