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

#1

Post by sverrejoh » Thu, Dec 09, 2010, 2:03 PM UTC

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

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

#2

Post by olalonde » Thu, Dec 09, 2010, 2:13 PM UTC

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

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

#3

Post by necolas » Thu, Dec 09, 2010, 2:19 PM UTC

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

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

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

#4

Post by [deleted] » Thu, Dec 09, 2010, 2:30 PM UTC

olalonde wrote: post #2

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

[deleted]

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

#5

Post by wlievens » Thu, Dec 09, 2010, 2:33 PM UTC

necolas wrote: post #3

Demo: http://batiste.dosimple.ch/sprite.js/test_input.html I like how he can fall off the ledge into an infinite drop.

Causing the scrollbar to appear :-)

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

#6

Post by coderdude » Thu, Dec 09, 2010, 2:34 PM UTC

olalonde wrote: post #2

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

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

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

#7

Post by morphir » Thu, Dec 09, 2010, 2:35 PM UTC

wlievens wrote: post #5

necolas wrote: post #3

Demo: http://batiste.dosimple.ch/sprite.js/test_input.html I like how he can fall off the ledge into an infinite drop.

Causing the scrollbar to appear :-)

anyone of you reached the floor yet?

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

#8

Post by flog » Thu, Dec 09, 2010, 2:49 PM UTC

morphir wrote: post #7

wlievens wrote: post #5

Earlier quoted context omitted.

Causing the scrollbar to appear :-)

anyone of you reached the floor yet?

At some point down it was all turtles.

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

#9

Post by rudd » Thu, Dec 09, 2010, 2:54 PM UTC

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

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

#10

Post by [deleted] » Thu, Dec 09, 2010, 3:00 PM UTC

rudd wrote: post #9

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

[deleted]