Pixel Tools is an open source set of pixel art tools built with Phaser in mind. Created by Sergei Khoroshavin (@skhoroshavin), a backend developer with over 25 years of software experience who recently turned to game development as a hobby, the suite grew out of real problems encountered while building an actual game. Sergei is also the creator of Phaser PixUI, a UI library for Phaser.

Four Pixel Art Tools for Phaser Developers

  • Atlaspack packs multiple PNG images into a single optimized texture atlas, with support for nineslice metadata and spritesheet animations, outputting a JSON .atlas file compatible with Phaser.

  • Fontpack creates packed texture atlases and BMFont descriptor files from pixel art font sheets, outputting .bmfont files loadable directly by Phaser.

  • Tilepack reads Tiled TMX map files, strips unused tiles, and outputs optimized JSON tilemaps and sprite atlases ready for Phaser.

  • Recolor converts image colors using a lookup table built from example image pairs, originally developed to match Time Fantasy tilesets to the Time Elements palette.

All tools are written in Go and distributed as standalone binaries, and are also available as an npm package with a Vite plugin that runs automatically on each build, with hot-reload during development.

Designed Around Phaser's Own Source Code

Sergei built the tools to output formats compatible directly with Phaser, reverse-engineering the output formats from its source code. He found it remarkably readable, noting that nineslice and trim encoding were particularly well thought out. The tools are designed to integrate seamlessly into Phaser workflows, from atlas loading to tilemap rendering.

Creator Interview

Q: How long have you been making games or tools?

A: My name is Sergei Khoroshavin, and I started trying gamedev as a hobby about 9 months ago, with some pauses, because, well, life 🙂. Of course, that's not the whole story, as in my day job I've been building software for more than 25 years, the last 10 of which have been mostly focused on backend. And before that, I also had pretty extensive experience working on a gamedev-like project, where I was responsible for building and maintaining an OpenGL-based renderer for a train driving simulator. Though by now, after more than 10 years, that feels like a story from some past life.

Q: What motivated you to build Pixel Tools, and did you plan it as a full suite from the start or did each tool grow out of hitting a wall while working on an actual game?

A: I actually started with an idea for a game which, realistically speaking, I'm not even sure I'll ever be able to release, at least while working on it alone.

But I have a pretty clear and stable vision of what and how I want to build, I'm having quite a lot of fun with development, and I get tons of support and inspiration from my wife and daughter, so I plan to continue moving forward with it, releasing any more or less generic tools or libraries I build along the way into open source. Pixel Tools is one of these "sub-projects", and yes, I build it as I hit issues working on the game.

Q: Tilepack reads TMX maps, strips unused tiles, and outputs JSON tilemaps ready for Phaser. What was the trickiest part to get right?

A: I would say: stop mixing up "LocalTileID" and "GlobalTileID". In the end I even created types for them, so that the compiler would hit me in the face whenever I try to pass a wrong one. As for object layers, they were actually much more straightforward than I feared, but I did struggle with how to treat tile objects. I initially tried to make exported maps openable in the Tiled editor, but that overcomplicated things both for the exporter and for handling in the game engine. So I ended up with the current approach: reference "dummy" tiles in a tilemap, and create an atlas definition directly importable by Phaser.

Q: Atlaspack and Fontpack output formats that Phaser can load directly. How much did Phaser's format specifications shape their design?

A: Frankly, with a quick search through the Phaser docs I couldn't find actual specifications, so I just went ahead and reverse-engineered them by reading the Phaser source code (special thanks for keeping it so readable, that's a pretty big feat!) and checking examples. As for details, I found the nineslice and especially the trim encoding to be pretty elegant.

Q: Recolor was originally built to convert Time Fantasy tilesets to match the Time Elements palette. Can you tell us more about that?

A: As I started building the game, I was also looking for some more or less complete asset packs in pixel art style, and of course I pretty quickly stumbled upon these packs. At some point I wanted to try mixing assets from both, as Time Fantasy is much more complete at this point, and being lazy I quickly hacked together the recolor tool. As of now I barely use it anymore, but I do plan to revive it at some point, making its interface more in line with the other tools and improving the internal algorithms.

Q: Do you make pixel art yourself? Did that influence how you designed these tools?

A: The one time I tried drawing something from scratch was grass, and let's just say it looked like... programmer's grass. But I did learn quite a lot about the importance of consistent palettes, and had some fun recoloring sprites from different asset packs to match each other's style and modifying tilesets to allow more terrain edge varieties.

Q: What's on the roadmap for Pixel Tools, and what other projects are you working on?

A: So far there is probably nothing major left on the Pixel Tools roadmap, except that I will probably add navmesh building to Tilepack at some point. The game I'm building is a top-down point-and-click RPG, and currently it builds navmeshes when the map is loaded, which is something I'd prefer to avoid, as I'm hoping to target mid-level smartphones as well. But other projects that I'm hoping to release into open source during this year, after I extract them from the main game codebase and significantly clean up the code, are a flexible paperdoll system for Phaser with character spritesheet prerendering, and a Phaser library to easily build top-down games using Tiled as a level editor.

One thing I wanted to mention specifically: as I went to open-sourcing tools, it turned out to be quite complicated to find a nice-looking asset pack on itch.io that would allow redistribution in open-source repos, to help with nice-looking demos. Of course, for such purposes I was looking for "free" limited demo assets, but even those usually had a no-redistribution clause, and artists reinforced that after I contacted them. One notable exception is Gabriel Lima, aka "tiopalada", who explicitly released quite a number of his assets under CC0 and CC-BY, and whose assets I'm currently actively using for showcasing the open-source tools I'm building.

Pixel Tools is open source under the MIT license and available for any purpose, including commercial projects.

Explore Pixel Tools