spritesmith is a module by Ensighten Engineering that takes image files and generates spritesheets and coordinate maps. By itself spritesmith would be somewhat difficult to utilize in your workflow, that’s why nice people have created gulp.spritesmith and grunt-spritesmith tasks to make build sprites for you with just a few lines of code.
|
1
|
npm install spritesmith |
Usage
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var sprites = [ 'sprite1.png', 'sprite2.jpg', 'sprite3.png'];spritesmith({'src': sprites}, function (err, result) { // Binary string representation of image result.image; // Object mapping filename to {x, y, width, height} of image result.coordinates; // Object with metadata about spritesheet {width, height} result.properties;}); |
Converting this structure to image files and CSS now seems like a pretty straightforward task.
