Small tool to create a tile sheet from an image


TL;DR: I made a small script that takes a grid-based image as a parameter and creates a tile sheet, getting rid of all duplicated tiles.


I am more of a designer I guess, so when I am working on tile-based games, I often work directly in Photoshop, copying and pasting tiles when they already exist, and creating new ones on the fly when needed ( I know that this might seem the exact opposite of other people’s workflow hehe).

I usually end up with a giant messy image file, with a lot of duplicated tiles and a lot of small-ish variations. What I used to do next was to painstakingly pick individual tiles one by one, and then manually add them to a new sprite sheet.

This is a fairly time-consuming process, and I was wondering if there would be some ways to automate it. It seems that there are quite a bit of options out there to manipulate sprites and textures (things like TexturePacker maybe), but they seemed a bit overkill since what I needed was fairly simple.

As often, I ended up coding the thing myself :smile: .

This is certainly not the cleanest code, and it could definitely be optimized, but it does the job just fine. It is in JS (Node), and uses a couple of dependencies to make the generated image as small as possible. For example, the image in this post goes from 3,427 bytes to 748 bytes (at original size, of course).

In case someone has a similar need, I thought I would post it here for the community :sunny: .

Source code, how to use etc. on Github

(The image used here was created by Clint Bellanger and used only for illustration purpose)


Thanks for taking the time to make this great tool! I don’t have a use for it yet, but I’m sure I will in the future.