Log-inRegister
SitemapContact
3DTechnologyBuildingDesignWebCraftsMiscBlogsVideos
Project
PHP - Automatic sprite generation WITH CSS
Category
Published
Aug 15 2014 by FaTe
Share
Quick jump
Creating sprite sheets is frankly a pain in the !$$

Instead I've created this mere 100 or lines of code which displays a basic form to multi-select a group of images, additionally you can set the filename to output as and padding in PX to leave before next image in line. Finally you can set a quality % to output as with 50 as default, higher the quality the bigger the size of the output.

Click "Start process" and the script will copy each image one at a time from the temp directory, acquire its information and read the full image into string format stored with its data in an array. Once an image is processed its deleted.

The process repeats until we have the image data at which point it generates a canvas the required dimensions with images in the sprite being stacked too the right horizontally. At the same time the image is generated the CSS required to use the sprite sheet is also generated along with a test HTML file.

Example: If you selected images and decided to save as "my_project" then the following would be generated:

[*] my_project.css
[*] my_project.html
[*] my_project.jpg

The output is designed to use the images as backgrounds in DIV elements, however you can of course re-use it however you like and even alter the code for function use for example.

Copy the whole code below to your editor or notepad and save as "gensprites.php"

Enjoy
Other projects you might like