Project Description
Sprite Generator makes it easier for web developers to create sprite images. It's developed in C#.
This application creates a nearly optimal insertation of images into a CSS Sprite.

The major algorithms used rest on O-tree based rectangle packing.

Examples:

1. Sprite of 82 images (settings: automatic image layout, 5px distance between images, 2px margin; time needed: 6 sec (on Intel Core i3))

CSS:

.sprite { background-image: url('image1.png'); background-color: transparent; background-repeat: no-repeat; }
.umbrella { width: 256px; height: 256px; background-position: -2px -833px; }
.fairy { width: 256px; height: 253px; background-position: -2px -575px; }
.ellipse { width: 209px; height: 124px; background-position: -2px -446px; }
.rectangle1 { width: 188px; height: 88px; background-position: -2px -353px; }
... 

2. Sprite of 44 images (settings: automatic image layout, no distance, no margin; time needed 2 sec (on Intel Core i3))

3. Sprite of 12 images (settings: rectangular layout with choosen dimension 4x3, 3px distance between images, no margin; time needed: 1 sec)

4. Sprite of 11 images (settings: rectangular layout with choosen dimension 6x2, no distance, no margin)

5. Sprite of 5 images (settings: vertical layout, 2px distance between sprites, no margin)

6. Sprite of 8 images (settings: horizontal layout, 4px distance between sprites, 2px margin width)

Screenshot:


How to use:

Paths:
Images directory: Only JPG/JPEG,  PNG, GIF image formats are allowed.
Output image: PNG file. 
Layout:
Automatic: image layout based on the algorithms mentioned above.
Horizontal/ Vertical: simple horizontal/vertical image layout only for images with the same height/width.
Rectangular: rectangular layout with chooseable dimension. Only for images with the same height and the same width.
Distances:
Distance between images: distance in pixels. This option does not set margin width for the sprite.

Reference:

Pei-Ning Guo, Toshihiko Takahashi, Chung-Kuan Cheng -"Floorplanning Using a Tree Representation",  IEEE Transaction On Computer-aided Design Of Integrated Circuits And System, Vol. 20, No. 2, 2001
http://users.ece.gatech.edu/limsk/www/pdfs/0281guo.pdf

 


 

Previous version (differences)

The major algorithms used rest on sequence-pair based rectangle packing.

1. Sprite of 82 images (settings: automatic image layout, 5px distance between images, 2px margin; time needed: 4 min 35 sec (on Intel Core i3))

 

2. Sprite of 44 images (settings: automatic image layout, no distance, no margin; time needed 12 sec (on Intel Core i3))

References:

H Murata, K Fujiyoshi, S Nakatake, Y Kajitani - iccad, 1995 ˝Rectangle-Packing-Based Module Placement˝
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.14.8830&rep=rep1&type=pdf

P Chen, Y Chen, M Goel, F Mang - CS270 Project Report, 1999 ˝Approximation of Two-Dimensional Rectangle Packing˝
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.34.7605&rep=rep1&type=pdf

Other algorithms used:
http://en.wikipedia.org/wiki/Topological_sorting
http://en.wikipedia.org/wiki/Longest_path_problem

 

Last edited Jun 26, 2011 at 9:16 AM by csigusz, version 18