maximum horizontal and vertical values of each image...

[WiSangUk]

This is a question while using spriteSmith.

When creating a sprite, based on the maximum horizontal and vertical values of each image When creating a sprite, how do I make it the same horizontal and vertical size, and centered within that area?

For example:

(img) ■(1x1) + ■■■(3x1) + ■(1x3) 　　　　　　　　　　■ 　　　　　　　　　　■

=(sprite) □□□ (area 3x3, img1x1) □■□ □□□ ---------- (padding) □□□ (area 3x3, img3x1) ■■■ □□□ ---------- (padding) □■□ (area 3x3, img1x3) □■□ □■□

[twolfson]

We don't have anything built-in for per-image padding but here's a few ways to accomplish this:

• Use a gulp plugin to pad images before passing them along to spritesmith (e.g. one using ImageMagick or GraphicsMagick)
• Define a custom layout engine which knows the image size to pad to, then feeds into an existing layout engine
  • https://github.com/twolfson/gulp.spritesmith/tree/6.11.0#algorithms
  • https://github.com/twolfson/layout/tree/2.2.0#custom-algorithms