spritesmith

spritesmith (GitHub: Ensighten/spritesmith, License: MIT) 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.

Post navigation

Leave a comment

Leave a Reply

Your email address will not be published.