AssertionError and inconsistent sizes

I just ran into this:

assert.js:86
  throw new assert.AssertionError({
        ^
AssertionError: Normal sprite has inconsistent size with retina sprite. "app-store-small" is 122x36 while "app-store-small@2x" is 243x72.
    at getRetinaGroups (/Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/lib/gulp-spritesmith.js:288:11)
    at Array.map (native)
    at handleSpritesheets (/Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/lib/gulp-spritesmith.js:285:36)
    at /Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/async/lib/async.js:251:17
    at done (/Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/async/lib/async.js:132:19)
    at /Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/async/lib/async.js:32:16
    at /Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/async/lib/async.js:248:21
    at /Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/async/lib/async.js:572:34
    at smithCallbackData (/Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/spritesmith/src/smith.js:172:7)
    at fn (/Users/mprzybylski/Desktop/threshold-test/node_modules/gulp.spritesmith/node_modules/spritesmith/node_modules/async/lib/async.js:582:34)

While I understand why this is happening, I think there should be some leeway here in terms of 1 pixel off due to odd number dimensions.

Allow me to explain: I am making my sprites sized perfectly as they should be based on designs. Sometimes that means the 2x versions will end in odd numbers like the above example. I then use gulp-image-resize to create 1x versions which tends to round the numbers for obvious reasons (even if I didn’t use this, they’d get rounded one way or another). Then the finalized images are run through spritesmith during a gulp build.

I know the easy answer is “just make sure you’re creating images with even numbered dimension ends” but I don’t think that should be a limitation. I have been using this plugin successfully to do this for a while now without using the built in retina functionality (I’d be happy to share how if you’d like) but am trying to consolidate the task to be used the way its meant to be used. I wish it allowed to be off one pixel without throwing the error above.

Thoughts?

[twolfson]

Ah, k. To answer your initial question, the current implementation doesn’t support ignoring mismatched retina sizes; we stop the streams at that point.

https://github.com/twolfson/gulp.spritesmith/blob/6.2.0/lib/gulp-spritesmith.js#L203-L226

As for the plugin/task, I suggest using something like gulp-gm:

https://github.com/scalableminds/gulp-gm/tree/v0.0.8#async-manipulation

// Load in our dependencies
var gulp = require('gulp');
var gm = require('gulp-gm');

// Define our tasks
gulp.task('resize-images', function resizeImages () {
  return gulp.src('pixelsmith.png')
    .pipe(gm(function handleGm (gmfile, done) {
      // Retrieve the current image size
      gmfile.size(function handleSize (err, size) {
        // If there was an error, callback with it
        if (err) { return done(err); }

        // Otherwise, if the size is even, then do nothing
        if (size.width % 2 === 0 && size.height % 2 === 0) {
          return done(null, gmfile);
        }

        // Otherwise, extend our image to even dimensions
        // http://www.imagemagick.org/Usage/crop/#extent
        return done(null, gmfile
          .background('transparent')
          .gravity('northwest')
          .extent(size.width + (size.width % 2), size.height + (size.height % 2)));
      });
    }))
    .pipe(gulp.dest('src'));
});

[twolfson]

@NickVanHolsbeeck Everyone’s original questions/concerns were addressed and this issue is considered resolved. If you have additional questions outside of this thread, please open a separate issue to avoid spamming the existing subscribers