Achtung: Diese Seite enthält Partner- und Werbe-Links. Daher ist diese Seite im Gesamten als Werbeanzeige zu verstehen!
Für unser auf dem Hackathon Stuttgart 2016 entwickeltes Spiel KärcheRPG haben wir Grafiken von kenny.nl verwendet. In diesem Fall eine sogenannte "Tilemap", also eine Grafik, die ganze viele kleine Grafiken in einer bestimmten Größe enthält und für die Entwicklung einer Landschaft in einem 2D-Spiel verwendet wird. Die von uns verwendete Javascript-Spiele-Engine phaser.js untersützt diese Daten schon von Haus aus. Unsere Karte erstellt haben wir mit dem Programm Tiled.
Das Problem: In den von kenny.nl kostenlos bereitgestellten Grafiken ist zwischen jedem "Asset" immer eine Lücke mit einem Abstand von einem Pixel. Weil wir es nicht geschafft haben, unsere Spielkonfiguration entsprechend darauf abzustimmen, musste diese Lücke einfach aus der Grafik entfernt werden. Da ich aber zu faul war, alle Lücken händisch zu entfernen und mir klar war, dass ich ein Script, das diese Arbeit für mich erledigt, in einem Bruchteil der ansonsten benötigten Zeit geschrieben hätte, habe ich das letztlich auch getan.
Da unser Server ohnehin auf node.js basierte, hatte ich direkt nach einer entsprechenden Bibliothek in Javascript gesucht. Der erste Treffer war Jimp ("JavaScript Image Manipulation Program"), womit ich letztlich auch erfolgreich war.
var Jimp = require('jimp');
Jimp.read('input.png', function (err, sourceMap) {
var tileSize = 16;
var spaceSize = 1;
var tilesX = (sourceMap.bitmap.width + 1) / (tileSize + spaceSize);
var tilesY = (sourceMap.bitmap.height + 1) / (tileSize + spaceSize);
var newSize = {
height: tileSize * tilesY,
width: tileSize * tilesX
};
var targetImage = new Jimp(newSize.width, newSize.height, function (error, newImage) {
for (var x = 0; x < tilesX; ++x {
for (var y = 0; y < tilesY; ++y) {
newImage.blit(
sourceMap,
x * tileSize,
y * tileSize,
(x * (tileSize + spaceSize)),
(y * (tileSize + spaceSize)),
tileSize,
tileSize
);
}
}
newImage.write('output.png');
});
});
Das oben stehende Script öffnet ein Bild aus dem Pfad input.png und entfernt alle 16 Pixel einen Abstand in der Breite von einem Pixel. Sollen diese Werte angepasst werden, müssen nur die Variablen tileSize und spaceSize verändert werden. Die angepasste Tilemap wird unter dem Pfad output.png gespeichert. Jimp selbst wird mit einem einfachen npm install --save jimp installiert.