[henryl]

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?

[jashkenas]

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

[vibrunazo]

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]

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]

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.

[vibrunazo]

That's an interestingly huge sprite sheet indeed.

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]

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

[mesh]

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

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

[ender7]

Or possibly they get better compression with a JPG.

[tdreyno]

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