New art for a game, without touching the game

Braineos’s Tower Defense game launched with placeholder art. Towers were circles with barrels, and every enemy was a circle with the site’s mascot inside it. It played well, but it looked like what it was: a prototype.

This is how it got real art, without changing a single rule of the game.

A drawing-only change

On November 3 the owner compared two concepts side by side and chose a castle theme. Three stone towers, seen from above: an Archer Tower, a Ballista Keep and Twin Cannons, each turning to aim. Four raiders: a bat, a goblin, a battering ram and a dragon. A dirt road with stones, pine trees and rocks, leading to a castle gate where the path ends.

The scope was set tightly. The work was drawing only: no change to the rules, the balance or the tests that hold them in place. It covered Braineos only, and the Android version of the game was split into its own follow-up.

One module of path data

The game keeps its rules apart from its drawing, so the art had one place to go. Every sprite is SVG path data with named colour slots, in one module, render/sprites.ts, plus render/scenery.ts for the gate, the pines, the rocks and the grass tufts. Neither file knows about a canvas.

The web game turns each part into a Path2D once, then reuses it every frame. Because the module has no canvas or browser code in it, it’s meant to be copied byte for byte into the mobile app, the same way the game’s rules were.

The game was already themed per site, and that stayed. The tower floors and pennants still take their colours from the site’s theme. The stone, wood and metal are fixed, and they’re constants in the theme code rather than colours typed into the drawing code.

Two surprises

The Scout changed colour. The smallest enemy moved from #d97706 to a darker #92400e, and a new theme test now guards it.

The gate didn’t always fit. On Level 3 the road ends in the middle of the map, so the castle gate landed there too, and slightly overlapped the ring of the first tower slot. Placing the gate well on levels 2 and 3 is part of the follow-up.

One more thing came up in checking: an existing balance test timed out at 5 seconds on one machine. It doesn’t import any drawing code, so it wasn’t this change, but it’s the kind of slow test worth knowing about.

What shipped, and what didn’t

The web game shipped with the castle art, and all three levels were rendered and checked on light and dark page backgrounds.

Left for later: the Android port for Brain Defense, the gate placement on levels 2 and 3, and Brain Defense’s store icon.