NPM: Tileset Slicer

"I will always choose a lazy man to do a hard job because a lazy man will find an easy way to do it." Ob Bill Gates das nun wirklich gesagt hat oder nicht, ist zwar umstritten. Aber der Satz beschreibt auf jeden Fall den Grundgedanken hinter jeder Automatisierung. Wenn ich eine nervige und/oder repetitive Arbeit habe, dann schreibe ich mir ein Programm, dass die Arbeit für mich erledigt. Zum Beispiel einen Tileset Slicer.

Für den unwahrscheinlichen Fall, dass Du auf diesem Blog gelandet bist und nicht weißt was ein Tileset ist: Ein Tileset ist eine Collage von Kacheln (Tiles), die verwendet werden um Texturen in einem Spiel oder Programm dar zu stellen. Aus diversen Gründen, auf die ich hier nicht näher eingehen möchte, ist es Ressourcen-sparender diese Texturen nicht alle einzeln zu speichern. Statt dessen fasst man sie in einer oder mehrerer großer Dateien zusammen. Unten siehst Du ein Beispiel für ein solches Tileset.

Wenn man Spiele entwickelt, kann man sich die Spielgrafiken von einem Designer individuell erstellen lassen. Das ist ziemlich teuer. Oder man greift auf eine der zahlreichen kostenlosen Spielgrafiken zurück. Zusätzlich gibt es noch vorgefertigte Sets, die man für wenig Geld kaufen kann. Die letzten beiden Optionen haben allerdings oft das Problem, dass man eine Menge Grafiken im Tileset hat, die man gar nicht benötigt.

Jetzt kann man natürlich hingehen und von Hand jede einzelne Textur mühseligst mit Gimp oder Photoshop selbst ausschneiden. Ich habs wirklich probiert. Aber nach dem zweiten Mal Copy&Paste, hab ich schon völlig entkräftet aufgegeben. Das muss auch einfacher gehen, dachte ich mir. Also schrieb ich kurzerhand ein kleines Node.js-Tool für den Job.

Tileset Slicer schnippelt ein Tileset in Mund-gerechte Einzelgrafiken. Ich habe das Tool auf https://www.npmjs.com/ veröffentlicht, weswegen es über npm installiert werden kann.

$ npm i -g tileset-slicer

Grundsätzlich gibt es zwei Möglichkeiten das Tool zu verwenden. Zunächst einmal kann man Tileset Slicer direkt in Node.js benutzen. Das kann dann beispielsweise wie folgt aussehen:

let slicer = new Slicer();
slicer.slice(filepath, options, (error, tiles) => {
  if (error) {
    throw error;
  }

  // do something with the array of tiles
});

Tileset Slicer kann über verschiedene Optionen konfiguriert werden (im Beispiel als Variable options) hinterlegt. Folgende Optionen stehen zur Verfügung:

• tileWidth: Breite einer Kachel (default: 32).

• tileHeight: Höhe einer Kacel (default: 32).

• startX: x-Koordinate der Start-Position, falls das Tileset einen Rahmen hat (default: 0).

• startY: y-Koordinate der Start-Position, falls das Tileset einen Rahmen hat (default: 0).

• paddingX: Horizontaler Abstand zwischen den Kacheln (default: 0).

• paddingY: Vertikaler Abstand zwischen den Kacheln (default: 0).

Zusätzlich habe ich Commander.js verwendet, welches Node.js-Skripte über die Shell aufrufbar macht. Dadurch könnte Ihr den Tileset Slicer auch direkt über den Terminal verwenden. Hier stehen die gleichen Optionen zur Verfügung, die oben bereits beschrieben wurden.

  Usage: tileset-slicer [options] <filename>

  Helper tool to slice a tileset into single files.

  Options:

    -h, --help                output usage information
    -V, --version             output the version number
    -o, --output <directory>  Output directory (default: /var/www/htdocs/tileset-slicer).
    -f, --format <format>     Output format (default: png).
    -w, --tileWidth <n>       Tile width (default: 32).
    -h, --tileHeight <n>      Tile height (default: 32).
    -x, --startX <n>          Start x-position for slicer (default: 0).
    -y, --startY <n>          Start y-position for slicer (default: 0).
    --paddingX <n>            Padding between tiles (default: 0).
    --paddingY <n>            Padding between tiles (default: 0).

Die Verarbeitung der Grafiken wird übrigens über lwip realisiert. Hierbei handelt es sich um ein nettes kleines Grafiktool für Node.js. Das Tool ist super dokumentiert und leicht zu handhaben. Ich kann es Euch nur wärmstens ans Herz legen. Und um zum Schluss noch etwas Eigenwerbung zu betreiben: Den Workflow für Tileset Slicer habe ich Simply Build realisiert.

Viel Spaß beim Ausprobieren. Lasst mich wissen, was Ihr vom Tileset Slicer haltet. Bugs oder Erweiterungsvorschläge könnt Ihr mir gerne über Github zukommen lassen.