Some questions about usage

[junyuanz123]

Hi,

First of all, thanks for the project!

I have some question about usage. What I am trying to do is using this tool to generate a Thumbnail Sprites: https://support.jwplayer.com/customer/en/portal/articles/1407439-adding-preview-thumbnails

To achieve this, I need to maintain the time information, I can achieve this by check the file name, but it seems too trivial.

So my questions are:

1. The result.image coordinates will have the same order as the input src?
2. Is that possible to pass more information to the coordinate object?

Thanks!

[twolfson]

Ah, this is a neat use case. I don't think we've seen this before. To be terse, here are the answers to your questions:

1. result.image coordinates can be the same order as input src if sorting is disabled based on the layout algorithm
2. Technically coordinate objects can preserve additional meta data but they are generated internally in spritesmith so there's nothing but src that can be attached
   • https://github.com/Ensighten/spritesmith/blob/3.1.0/src/smith.js#L127-L152

Aside from your questions, I believe there's some information I can share that should help you along: Our standard layout/algorithms (determines how images are laid out in spritesheet) probably won't fit your needs are they are all linear (not wrapping). As a result, you'll probably need a custom one -- we have documentation on that here:

algorithm and algorithmOpts: https://github.com/Ensighten/spritesmith/tree/3.1.0#spritesheetprocessimagesimages-options

Built-in algorithms: https://github.com/Ensighten/spritesmith/tree/3.1.0#algorithms

New algorithms can be added by importing layout itself and running layout.addAlgorithm.npm should de-duplicate so both spritesmith and the top level layout are the same library.

https://github.com/twolfson/layout/tree/2.2.0#custom-algorithms

Existing algorithms work as a great reference: https://github.com/twolfson/layout/blob/2.2.0/lib/algorithms/left-right.algorithm.js

To tie it all together, here's a sample script:

Reminder that we must install layout as a top level dependency like spritesmith

// Load in our dependencies
var Spritesmith = require('spritesmith');
var Layout = require('layout');

// Define our custom algorithm
// Based on https://github.com/twolfson/layout/blob/2.2.0/lib/algorithms/left-right.algorithm.js
Layout.addAlgorithm('left-right-wrap', {
  sort: function (items) {
    // Sort items by their name (e.g. '00:00:00.png', '00:05:00.png')
    items.sort(function (a, b) {
      var aName = a.meta.img._filepath;
      var bName = b.meta.img._filepath;
      return aName.localeCompare(bName);
    });
    return items;
  },
  placeItems: function (items) {
    // Iterate over each of the items
    var x = 0;
    var y = 0;
    items.forEach(function (item, i) {
      // Update the x to the current width
      item.x = x;
      item.y = y;

      // If this was the 4th item, then wrap our row
      if (i % 4 === 0) {
        y += item.height;
        x = 0;
      // Otherwise, increment the x by the item's width
      } else {
        x += item.width;
      }
    });

    // Return the items
    return items;
  }
});

// Generate our spritesheet
Spritesmith.run({
  src: [/* ... */],
  algorithm: 'left-right-wrap'
}, function handleResult (err, result) {
  // ...
});

[junyuanz123]

Thank you so much!