New: see project blog for updates
How it works
coolRunnings is an absolute-coords generator: you tell it the dimensions of your sprite, the URL of each component image, and the top-left coordinate of each image within the sprite, and it generates the image accordingly. It also optimizes the sprite with pngcrush before returning it.
You can request the sprite image, using 'format=image', or the link to the image and some related facts, using 'format=json'.
quick facts
- written in test-driven PHP
- open source (MIT license)
- it's alpha now (works but needs work, too). Aiming for beta in late october 09
- currently implemented as a web service, accepting input via GET string
- the code is at http://bitbucket.org/jared/coolrunnings/
- there is a working copy alive at http://csscoolrunnings.com/service.php and another at http://jaredhirsch.com/coolrunnings/index.php; see below for documentation on its use.
- coolRunnings does sprite assembly work for SpriteMe, which you should check out immediately.
Examples:
Image Request (Try it)
http://csscoolrunnings.com/service.php?format=image&absolute=
{"canvas":
{"name":"ghosts-a-plenty",
"height":75,
"width": 222,
"background-color":"none",
"comments":"comments inserted in the final PNG"},
"images":[
{"url":"http://www.namcogames.com/iphone_games/images/blinky.png",
"top":10,
"left":10},
{"url":"http://www.namcogames.com/iphone_games/images/pinky.png",
"top":10,
"left":63},
{"url":"http://www.namcogames.com/iphone_games/images/inky.png",
"top":10,
"left":116},
{"url":"http://www.namcogames.com/iphone_games/images/sue.png",
"top":10,
"left":169}]}
Image Response
Json Request: (Try it)
http://csscoolrunnings.com/service.php?format=json&absolute=
{"canvas":
{"name":"ghosts-a-plenty",
"height":75,
"width": 222,
"background-color":"none",
"comments":"comments inserted in the final PNG"},
"images":[
{"url":"http://www.namcogames.com/iphone_games/images/blinky.png",
"top":10,
"left":10},
{"url":"http://www.namcogames.com/iphone_games/images/pinky.png",
"top":10,
"left":63},
{"url":"http://www.namcogames.com/iphone_games/images/inky.png",
"top":10,
"left":116},
{"url":"http://www.namcogames.com/iphone_games/images/sue.png",
"top":10,
"left":169}]}
Json Response:
var coolRunnings = {
"url":"http:\/\/www.csscoolrunnings.com
\/public_images\/c76e73bdbc
\/ghosts-a-plenty.png",
"inputSize":1209,
"outputSize":948,
"spriteHeight":75,
"spriteWidth":222}
I can has coolRunnings?
Yeah, it's open source:
Configuration and dependencies:
Note: the beta version will not require Imagick or ImageMagick.
- PHP JSON functions (PHP > 5.2.0 or PECL json > 1.2.0)
- ImageMagick >= 6.2.4 and PECL Imagick >= 2.0.0
To install it on your machine, just download it from bitbucket and insert your config info into lines 18-19 of the FrontController (coolrunnings/library/FrontController.php).
project status
See the issue tracker for planned enhancements.
9/14/09: added MIT license text. Little bit more refactoring.
9/13/09: refactored some cruft away. Also added some new information to the json response.
As of 9/5/09, the call to the smush.it image optimizer has been removed. Instead, PNG optimization is carried out on the server. (Thanks, Stoyan) This should improve response time.