Can't create retina sprite

[SnisarOnline]

I'm trying to create a retina sprite with this gulp task:

gulp.task('t_sprite', function () {
  var spriteData = gulp.src(imgDir+'*.png')
  .pipe(debug({title:"png : "}))
    .pipe(spritesmith({
      retinaSrcFilter: [imgDir+'*@2x.png'],
      imgName: 'sprite.png',
      retinaImgName: 'sprite@2x.png',
      cssName: 'sprite.styl'
    }));
  return spriteData.pipe(gulp.dest(Sprite_Styl));
});

When I run the task, it gives me this error:

[02:09:16] "t_sprite" errored after 37 ms
[02:09:16] Error: Retina settings detected but 0 retina images were found. We have 17 normal images and expect these numbers to line up. Please double check "retinaSrcFilter".
    at DestroyableTransform.onEnd [as _flush] (/var/www/node_modules/gulp.spritesmith/lib/gulp-spritesmith.js:145:19)
    at DestroyableTransform.<anonymous> (/var/www/node_modules/readable-stream/lib/_stream_transform.js:115:49)
    at DestroyableTransform.g (events.js:291:16)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at prefinish (/var/www/node_modules/readable-stream/lib/_stream_writable.js:503:12)
    at finishMaybe (/var/www/node_modules/readable-stream/lib/_stream_writable.js:511:7)
    at endWritable (/var/www/node_modules/readable-stream/lib/_stream_writable.js:523:3)
    at DestroyableTransform.Writable.end (/var/www/node_modules/readable-stream/lib/_stream_writable.js:493:41)
    at DestroyableTransform.onend (/var/www/node_modules/readable-stream/lib/_stream_readable.js:504:10)

Process finished with exit code 1

[twolfson]

This is a duplicate of #64. The issue in this configuration is retinaSrcFilter is an array when it should be a string. The following config should work:

gulp.task('t_sprite', function () {
  var spriteData = gulp.src(imgDir+'*.png')
  .pipe(debug({title:"png : "}))
    .pipe(spritesmith({
      retinaSrcFilter: imgDir+'*@2x.png',
      imgName: 'sprite.png',
      retinaImgName: 'sprite@2x.png',
      cssName: 'sprite.styl'
    }));
  return spriteData.pipe(gulp.dest(Sprite_Styl));
});

[SnisarOnline]

64 , #121 - no, it's not working

here is my test file, please look at the files https://github.com/SnisarOnline/examples

[twolfson]

There are no 2x.png in that repository.

If you are trying to only generate 1x spritesheets (i.e. don't care about retina), then if you remove retinaSrcFilter and retinaImgName, then it will work fine.

Otherwise, you'll need to provide 2x sprites to generate 2x spritesheets as we can't upscale 1x images without losing quality (and defeating the purpose of a 2x spritesheet)

[SnisarOnline]

sorry for bad English can I get a working example. I tried a lot more options than what is indicated in the files and not one worked

[twolfson]

Sure thing, I will rephrase my explanation as well. Retina spritesheets, also known as 2x spritesheets, are for showing better image quality on devices that support it. For example, a Macbook Pro and iPhone have retina displays which can show better image quality.

We support generating retina spritesheets in gulp.spritesmith via parameters like retinaSrcFilter and retinaImgName. Currently, the example you provided has these parameters set so it is attempting to generate retina spritesheets. However, it's not finding any retina images to generate the retina spritesheet with.

As a result, I'm assuming you are accidentally using these parameters and only want to generate a normal spritesheet at this time. To correct our gulpfile.js, we should have the following configuration:

gulp.task('t_sprite', function () {
  var spriteData = gulp.src(imgDir+'*.png')
  .pipe(debug({title:"png : "}))
    .pipe(spritesmith({
      imgName: 'sprite.png',
      cssName: 'sprite.styl'
    }));
  return spriteData.pipe(gulp.dest(Sprite_Styl));
});

This configuration doesn't include the retina parameters retinaSrcFilter and retinaImgName. As a result, it will not attempt to generate a retina spritesheet.

[SnisarOnline]

so, the software does not Create "retina image". the software USE the ALREADY Created "retina images". and create "sprites" I right understand ?

[twolfson]

That is partially correct. The concept is correct but the terminology is incorrect. The software uses already created "sprites" (small images) and then creates "spritesheets" (all images in one image).

To create retina images, you must generate those from your source (e.g. Photoshop, Illustrator). If you would like to automate creating normal images from retina images, then this can be done via other plugins such as:

• https://www.npmjs.com/package/gulp-unretina/
• https://www.npmjs.com/package/gulp-image-resize/

[SnisarOnline]

thanks for the clear explanation. And I am sorry for the trouble