Tilerator
More than 6 years ago I wrote a small tool in Flash to solve a problem with Cocos2D sprites.
For this framework, the tile maps had to have a little gap every so and so many pixels with the content continuing after the gap. So if you created a tile map, let’s say in Photoshop, and exported it, you would still have to insert all the gaps horizontally and vertically.
That is some cumbersome task, and I had no idea how to automate this in Photoshop, so I wrote this little tool. I called it tilerator.
Screenshot of tilerator
Screenshot of tilerator with a composition
It took me a night to make it and two days to fix the bugs. It did the job, and you could even create your own compositions. I had it available online for download for quite a while, and at least 2 people who I don’t know used it. I have no stats, but I think there was some traffic.
Success. People had a tool.
At some point, moving from one server to another, I forgot to put it online again. Flash was dead anyway, and so seemed to be AIR applications, and no one seemed to miss the tilerator. The sprite framework had a tool to do the job (so I reckon). I was busy with a lot of other things, and rarely thought about it again, except when I got reminded by Facebook, that there is a page for this and it had one new visitor.
When I stumbled across it the other day and thought about it, it occurred to me that I never even considered making a JavaScript version of this. And once you go JavaScript, why not create it as an npm module? In a way that you can even use it as command line tool, or part of a build chain?
As a first step I researched if there is anything like that. Somehow yes, but it had dependencies on either gdlib or ImageMagick. Ok, I thought, I can do without that. I dusted off the old ActionScript code, removed the cobwebs form MXML and it looked as if it could be converted almost effortless. The canvas element almost works the same way, and how hard can it be?
Well… Canvas exists only in a browser context. There are modules that simulate it so you can use it also in a CLI environment (such as a server, or in a task of a task runner). These modules however are dependent on … yes: gdlib or ImageMagick. So much for that. There had to be another way, and there is. You just take the image data and work on it. As simple as that! I found two libraries, one for JPEG and one for PNG, and once I get my head wrapped around finding an [x,y] index in a one-dimensional array (actually a Buffer), it was almost immediately finished.
So here it is: tilerator as an npm module. Have fun, play with it, fork it, make it better. I rather have it out in the open than collecting dust on my hard drive. Maybe it’s useful to someone.