Spritesmith – Spritesheet generation made easy and extensible – What is a sprite?
Spritesmith – Spritesheet generation made easy and extensible – What is a sprite?
0 2
hack-and-tell-spritesmith
Hack and Tell presentation for SpritesmithOn Github twolfson / hack-and-tell-spritesmith
Spritesmith
Spritesheet generation made easy and extensible
Created by Todd Wolfson / @twolfsn / github/twolfson
What is a sprite?
If you are familiar with this, disregard it.
What is a sprite?
The above are CSS spritesheets for Google and Twitter Bootstrap respectively.
- As sprite is each image separate image. The entirety is known as a spritesheet. - These are known as CSS sprite sheet and what we will be talking for the next 4 1/2 minutes.The problem
Spritesheet and variable maintenance is either:
- Done by hand (e.g. Photoshop + Text editor)
- In a deeply integrated system (e.g. SASS + Compass)
- Not a cross-platform solution
The problem
I was maintaining CSS by hand, a JavaScript guru, and a Windows user.
I was the perfect candidate.
Approach
During my initial research, I found two node modules which would suit my needs:
- gm, a wrapper for GraphicsMagick
- node-canvas, a node.js implementation of <canvas> which utilizes Cairo
`gm` would handle Windows as it available as an `.exe`. `node-canvas` would handle Unix as it compiles when installed via `npm`.
Solving
gm was the harder of the 2 engines.
It required "trial and error" to get transparency working.
In the end, it all came together and we were making sprites =D
Going beyond
The next step was to write a grunt wrapper and call it a day.
However, I pondered modularity and if/where I could draw lines.
I wound up writing 5 modules and am considering even more.
grunt-spritesmith, spritesmith, layout json2css, json-content-demux
Current state
3 engines; phantomjs, gm, node-canvas
4 algorithms; top-down, left-right, diagonal, alt-diagonal
5 CSS variable formats; JSON, SASS, SCSS, LESS, Stylus
1 third party project written on top of spritesmith
Still looking for a hosted solution for no external dependencies
Spritesmith
Spritesheet generation made easy and extensible
Created by Todd Wolfson / @twolfsn / github/twolfson