So I love the HitButton_iso tileset. Probably as a result of being an '80s kid and growing up on Sinclair Spectrum and MS-DOS graphics. As the game progresses, there are some things that need to be added to the tileset.
I’ve attempted to add to it a few times. I’ve usually run out of gumption in the workflow itself. I think I’ve found a decent method now.
First of all, the big tileset image is hard to work with. I like splitting it up into a set of single-tile PNGs with ImageMagick’s convert tool: Cutting and Bordering -- IM v6 Examples
brew install imagemagick # install imagemagick on macOS
mkdir exploded
convert HitButton_iso.png -crop 16x20 exploded/%04d.png
Using a two-number {h}x{w} argument instead of four-number argument for position and size causes -crop to chop everything into tiles … the %04d is to get a four-digit number so it’s a little easier to keep the files sorted. This is what you end up with – images that have the same number as the fg/bg IDs in the tileset:
Now to find something that’s missing a tile. The game can be made to output this info when it loads the game data. Just for fun I just played until I found something that was missing a tile, e’x’amined it, and found its description. Then I use CLion to search through the game JSON to find it’s id, which is what the tileset uses. CLion is not necessary but I find its ergonomics to fit me well. Here we find a railroad station! Let’s do the gravel tile.
Let’s hop over to CLion and to command-shift-F to search through the project. Filter on *.json and search for the description of what you’re looking at. This tile is just described as “gravel”, so I search for "gravel" including the quotation marks. This can be a useful trick to anchor the search and narrow it down. Turns out the entity ID we’re looking for is "t_railroad_rubble". This is what needs to go into tile_config.json.
Are there any similar tiles that would work? Maybe the tiles for rubble and concrete can serve as inspiration. After searching through the JSON data we find those have the IDs f_rubble_rock and t_concrete. We can actually use that to look up the graphical tile IDs - the same as the fg/bg entires and the numbers of the single-tile filenames. I use jq and fish shell for that:
We’re looking for tiles 79 and 66. Let’s open those in Pixelmator Pro with some nice Fish magic: open -a Pixelmator\ Pro exploded/00{79,66}.png
Hmm, how about we trim down the rubble pixels that are higher than ground level? And, say, let’s overlay transparent concrete on top of that to chill the mood. Here we go – passable gravel?:
Now to give it a tile ID. I just do Save and scroll down to find a blank tile PNG, click its filename, and Save. This creates a Pixelmator-native file in the same place and name as the final PNG only with the .pxd extension. If I want to go back and edit. Then I command-E for 'E’xport. Pixelmator brings me to the same directory and export type as last time. Let’s save the tile PNG. We get tile ID 2498.
Here’s our tile file:
Now let’s pop this into the tileset JSON. Open it in CLIon and find a good place to add it. I tend to lose my windows so I like to do command-shift-O for ‘Open file’ and search for the path and filename and Enter to open it:
Select a similar block of JSON and command-D to 'D’uplicate it. Edit it to fit the entity id and tile info.
Now let’s go back in the game and do Reload Tileset. I’ve bound control-R to it.
Let’s reload!! Here we go:
Oh no! The tile is blank!
Ah … I forgot to rebuild the big tileset image. Let’s go back to ImageMagick:
montage -geometry +0+0 (find exploded -iname \*.png -type f | sort -h) -tile 16x160 -background none HitButton_iso.png
Let’s check our big tilemap! open HitButton_iso.png, scroll and zoom down. OK! It’s here:
Let’s teleport over. Hmm! Looks decent! Right? – Maybe a little noisy and pattern-y? Let’s reserve judgement until the train tracks are ready. We might want to add some variant tiles later too.
Let’s commit to Git and make a PR:
I’m fairly sure that something better exists on Windows being as it’s a bigger gaming OS than macOS. Photoshop would imo be close to ideal.