3 ms·

Anyone have a guess as to why they use a jpg sprite instead of an animated gif for the bouncing orb? Is it just a color space thing?

by henryl 15y ago

ender7 15y ago
Or possibly they get better compression with a JPG.
- tdreyno 15y ago
  You are correct. Our source files were originally a PNG sequence. JPG provided the best quality-to-filesize ratio.
vibrunazo 15y ago
That's an interestingly huge sprite sheet indeed. https://developers.google.com/apps/images/io/particle_hover-frames.jpg https://developers.google.com/apps/images/io/particle_hover-... I would guess it's because of the color palette maybe? GIF was only 256 colors last I used it (over a decade ago). SO maybe they tried a gif animation, noticed some weird looking graphical artifacts because of the color difference from background to foreground. Then decided use a JPG sprite sheet instead for more colors?
karolist 15y ago
OT: what tools allow automatic sprite generation based on object movement such as this?
- mesh 15y ago
  You can export sprite sheets from animations created in the Adobe Flash authoring tool. There are a number of free third party tools that enable this: SWFSheet http://www.bit-101.com/blog/?p=2939 http://www.bit-101.com/blog/?p=2939 Zoe http://gskinner.com/blog/archives/2011/02/zoe-export-swf-animation-as-easeljs-spritesheets.html http://gskinner.com/blog/archives/2011/02/zoe-export-swf-ani... This feature is also being built into the next version of Flash Professional (the authoring tool), with support for export to various JavaScript libraries (such as Easel.JS) for controlling the animation.
jashkenas 15y ago
No need to guess. Here's a very complete and detailed article about precisely why and how this particular animation works the way it does: http://awardwinningfjords.com/2012/03/08/image-sequences.html http://awardwinningfjords.com/2012/03/08/image-sequences.htm...
- vibrunazo 15y ago
  That only explains why use a sprite sheet. But not why use jpg instead of gif. Neither it talks about the alternative of gif animation. Does the javascript dom method really offers better performance than a simple gif animation? Or were gif animations taken off the equation before that comparison for other reasons?
  - robterrell 15y ago
    Animated GIFs max out at 8 bits of color (per frame, but still). The animation cycle of GIFs starts when the image is loaded and can't be controlled via JS. Yes, if you just wanted an 8-bit orb bouncing, it's a fine choice. For a game sprite, it's less so.
- henryl 15y ago
  Thanks for that article. Makes sense now. They were able to achieve higher frame rates and take advantage of hardware acceleration by using CSS animations with the individual sprite slices serving as key frames.

Anyone have a guess as to why they use a jpg sprite instead of an animated gif for the bouncing orb? Is it just a color space thing?

by henryl 15y ago

Anyone have a guess as to why they use a jpg sprite instead of an animated gif for the bouncing orb? Is it just a color space thing?

ender7 15y ago

Or possibly they get better compression with a JPG.

tdreyno 15y ago
You are correct. Our source files were originally a PNG sequence. JPG provided the best quality-to-filesize ratio.

vibrunazo 15y ago

That's an interestingly huge sprite sheet indeed. https://developers.google.com/apps/images/io/particle_hover-frames.jpg https://developers.google.com/apps/images/io/particle_hover-... I would guess it's because of the color palette maybe? GIF was only 256 colors last I used it (over a decade ago). SO maybe they tried a gif animation, noticed some weird looking graphical artifacts because of the color difference from background to foreground. Then decided use a JPG sprite sheet instead for more colors?

karolist 15y ago

OT: what tools allow automatic sprite generation based on object movement such as this?

mesh 15y ago
You can export sprite sheets from animations created in the Adobe Flash authoring tool. There are a number of free third party tools that enable this: SWFSheet http://www.bit-101.com/blog/?p=2939 http://www.bit-101.com/blog/?p=2939 Zoe http://gskinner.com/blog/archives/2011/02/zoe-export-swf-animation-as-easeljs-spritesheets.html http://gskinner.com/blog/archives/2011/02/zoe-export-swf-ani... This feature is also being built into the next version of Flash Professional (the authoring tool), with support for export to various JavaScript libraries (such as Easel.JS) for controlling the animation.

jashkenas 15y ago

No need to guess. Here's a very complete and detailed article about precisely why and how this particular animation works the way it does: http://awardwinningfjords.com/2012/03/08/image-sequences.html http://awardwinningfjords.com/2012/03/08/image-sequences.htm...

vibrunazo 15y ago
That only explains why use a sprite sheet. But not why use jpg instead of gif. Neither it talks about the alternative of gif animation. Does the javascript dom method really offers better performance than a simple gif animation? Or were gif animations taken off the equation before that comparison for other reasons?
- robterrell 15y ago
  Animated GIFs max out at 8 bits of color (per frame, but still). The animation cycle of GIFs starts when the image is loaded and can't be controlled via JS. Yes, if you just wanted an 8-bit orb bouncing, it's a fine choice. For a game sprite, it's less so.
henryl 15y ago
Thanks for that article. Makes sense now. They were able to achieve higher frame rates and take advantage of hardware acceleration by using CSS animations with the individual sprite slices serving as key frames.