Spittle, a sprite generator
[ PNG, PNG, PNG ] (°_°)
[ PNG, PNG, PNG ] (° )
[ PNG, PNG, PNG ] )°)
[ PNG, PNG, )°)
[ PNG, )°)
[ )°)
\(°_°)/ -> SPRITES!!!
Description
It takes your PNG’s, chews them up and spits out sprites!
point bin/sprite at a directory, and watch it sprite away!
Installation - standalone
sudo gem install spittle
Usage - standalone
sprite <directory>
If you point the sprite command at a directory tree by default it will construct sprites for each of the sub directories and generate a single css to access all of the sprites which is placed in the root of the directory tree
For a full list of options:
sprite -h
Installation - Rails plugin
script/plugin install git://github.com/aberant/spittle.git
Usage - Rails plugin
Spittle assumes all of your sprites are located in the directory public/images/sprites. This directory should contain sub-directories for each sprite you wish to create. The css class names for an image in a sprite will take the form <directory_name>_<image_name>. Here is an example:
sprites /
cars /
ford.png
chevy.png
planes /
boeing.png
cesna.png
Running sprite:generate does all the work. Each sprite directory (cars, planes) will now contain a sprite.png. Spittle will also generate a sprites.css stylesheet in public/stylesheets/ that you should include in your layout. If you wished to use the ford image from the cars sprite you would give the ‘cars_ford’ class to the desired element in the view. That’s it!
Check out examples/sprites if you want to see what spittle can do without doing any work.
Limitations
-
does not support color profiles (can cause a slight change in color from the source image)
-
does not support reading interlaced PNGs.
Features
-
automatically generates sprites from a set of PNG images
-
automatically generates css classes to access images within the sprite
-
customizable css templates
-
Rails plugin & rake tasks (sprite:generate & sprite:cleanup)
-
Supports varying dimensions in source images
-
Does not regenerate sprites that have not changed
-
Supports all PNG filter types to improve image compression
-
supports mixing RGB and RGBA color types
Roadmap - by priority
-
Reading interlaced images
-
Translate between png color spaces automatically.
-
allow a global css template override
-
allow per-sprite and global configuration
Authors
-
aberant - Colin Harris
-
tjennings - Tyler Jennings