Sort files for frame order.

[webcaetano]

If you have a bunch of images with number as basename like.

src/1.png
src/10.png // alphabet sort
src/2.png
src/3.png
// ...

The gulp.spritesmith only do alphabet sort incoming files. And as previous cited #53 we can't rename the streaming files for sort numerically, because gulp.spritesmith don't support stream yet.

We need some solution for frame order.

This looks like totally unnecessary for webDesign purpose. And gulp.spritesmith are made for webDesign.

But for gaming sprites developing, this is may necessary. Also an option for not output .css could be nice.

I'm trying to figure out some solution to create a pull request.

[twolfson]

Sorting can be disabled via algorithmOpts: {sort: false}. Please make sure you are using a linear layout algorithm though as binary-tree doesn't make sense with disabling sorting.

https://github.com/twolfson/gulp.spritesmith/tree/4.1.0#algorithms

[webcaetano]

I know. Is not that kinda sorting. algorithmOpts: {sort: false} will only disable the sort based on the size of image. This have nothing to do with the file basename sort.

The problem are when you have this kinda framework that have functions based on a sprite in correct order and same size of frames. In this case you just have to setup the Width, Height and Frames length. Don't need .json or .css.

[twolfson]

That's the only sorting provided by gulp.spritesmith/spritesmith. It sounds like you are encountering a sort order issue from the glob with gulp.src (e.g. *.png -> [1.png, 10.png, 2.png]). In that scenario, you can hardcode your order by hand:

gulp.src(['1.png', '2.png', ..., '10.png'])
  .pipe(spritesmith(/*...*/))

Since that is quite tedious and brittle, I strongly recommend using a zero-padded naming scheme:

src/01.png
src/02.png
src/03.png
// ...
src/10.png

[webcaetano]

Looks like an good solution. Bright idea. I had not thought on that.

I made this, that works too: https://github.com/webcaetano/gulp.spritesmith/commit/ca4d2cdec1df5645a4e7058bda293b981aa40292

I will use your idea. Thanks.

[webcaetano]

Solution example based on your idea :

var glob = require("glob");
var path = require("path");
var basenameSort = function(a,b){
    return path.basename(a,path.extname(a))-path.basename(b,path.extname(b));
}

gulp.src(glob.sync("src/*.png").sort(basenameSort))
.pipe(spritesmith(/*...*/))
//...

[Outridair]

Old issue, but I'm running into the same problem. Tried using both a 0000 padding style for my images. 0001, 0002, etc and using the basenameSort, and I see the console.log output is showing a correct file list sequentially, but the ending image output does not match the image name order.

[twolfson]

@The-Outrider Can you verify you have set algorithmOpts: {sort: false} and are using a non binary-tree layout algorithm?

[Outridair]

ah I am using a binary-tree layout, with algorithmOpts: {sort: false} -> So this algorithm is causing the re-arranging?

[twolfson]

Yea, binary-tree is designed for optimal layout to save on size. If you want an ordered direction, then use a linear algorithm (e.g. top-down, diagonal).

https://github.com/twolfson/gulp.spritesmith/tree/6.2.1#algorithms

[Outridair]

Drat, the binary-tree gave it a nice layout. I understand it better now. Thanks @twolfson :)

[twolfson]

Glad to hear it's all sorted out =)