Days 1 to 3: an engine test and a look
This post covers days 1 to 3, when two decisions had to be made before anything else could start: what the game runs on, and what it looks like.
Test the scary parts first
Popmates runs in a web browser, on Phaser 4, a game engine for the web. Phaser 4 was quite new, and a pixel-art game asks a lot of things an engine can quietly get wrong. So the first job, on day 1, before anything depended on it, was a test page that tried the risky parts and checked the results pixel by pixel:
- Crisp scaling. The game draws on a small 480 by 270 pixel canvas and scales it up by whole steps, so every game pixel becomes a neat square. The test checked this on screens with different pixel densities, where blurry or uneven pixels usually sneak in.
- Glow and shader effects. Portals need to swirl and shimmer. The test ran a glow effect and a custom swirl effect.
- Maps. Tile maps made in a map editor had to load, with no thin seams between tiles.
Everything passed, so Phaser 4 stayed. The pixel checks from that test are still reused by the game's automated tests.
Picking a look, blind
With the engine settled, the next question was the art style. The art in Popmates is made in code, with a pixel-art tool called pxl: each sprite is a small script that lays out its pixels, which makes it easy to recolour, check and rebuild.
The style was chosen in a blind comparison of two attempts at the same brief, each of which came back with a finished test scene. I looked at both without knowing which was which and picked one.
Inside the winning attempt, three palettes were tried first:
Palette A won, and the style is now called Prism Light. Its rules are short: every material gets a ramp of four to six colours that shifts cool in the shadows and warm in the light, one deep indigo replaces black everywhere, and cyan and magenta are kept for magic, so anything magical or clickable always stands out.
This is the test scene that won:
Why bother
A blind pick sounds fussy, but it stopped me from choosing a style for the wrong reasons. And settling the look on day 2 meant everything after it, from the Popmate to the logo, could follow one set of rules. By day 3 the winning balloon had moved into the game itself, matching the test scene pixel for pixel. The next posts are about those things.