Building pixel art

Building pixel art

Houses, shops, castles, towers, and huts. Buildings are the first game asset where a technical decision has to happen before an artistic one.

Doors are a grid problem

The door is where art meets collision, and it is where most first attempts break.

A door the player walks through must sit on a whole number of tiles. If your tiles are 32x32 and the door is 40 pixels wide because it looked better, the collision box and the visible frame will disagree and the character will clip through one edge.

Decide the door width in tiles, then draw the building around it. Doing it the other way round means redrawing the facade.

The same applies to the floor line. A building whose base sits half a tile above the ground will have the player walking through its foundations.

Interiors are a separate asset

An exterior is a sprite. An interior is usually a tilemap, and the two rarely share a single pixel.

That surprises people, but it follows from how a player uses each. An exterior is seen whole, from a fixed angle, at a fixed size. An interior is a space the camera moves through, built from floor and wall tiles that repeat.

Trying to draw an interior as one large image works for a single room and stops scaling immediately after that.

What makes three buildings a village

Shared roof angle, shared wall colour, shared window shape.

A blacksmith, an inn, and a cottage can differ in size, height, and detail and still read as one settlement if those three things match. Get them wrong and you have three buildings from three games standing next to each other, no matter how good each one is.

Roof angle matters most. It is the largest diagonal on the sprite and the eye compares it across the whole row instantly.

Scale honestly, then cheat

Real architectural proportions look wrong in a 2D game because the player character is usually two to three tiles tall and a real door is not.

Standard practice is to shrink buildings relative to reality, roughly to the point where a house is four or five times the player height rather than the eight or nine it would truly be. Everyone does this and nobody notices, which is the definition of a good cheat.