Procedural pixel art without sprites: rendering with Canvas

In Build Your Empire there isn’t a single image file for the game graphics. No sprites, no texture atlases, no building PNGs. Everything is drawn in real time with code.

The idea

Inspired by Kairosoft games (Game Dev Story, Mega Mall Story), we wanted a pixel art style but with an advantage: completely dynamic graphics. The player’s tower had to visually grow when hiring employees. Rival buildings had to reflect their actual progress.

How it works

We use @shopify/react-native-skia to draw on a native Canvas. The base unit is an 8x8 pixel block:

function PlayerTower({ x, y, employees }) {
  const level = calculateLevel(employees); // 1-8 floors
  const floors = [];

  for (let i = 0; i < level; i++) {
    floors.push({ x, y: y - i * BLOCK, w: 2 * BLOCK, h: BLOCK, color: '#5b8dd9' });
    if (i % 2 === 0) {
      floors.push({ x: x + 2, y: y - i * BLOCK + 2, w: 4, h: 4, color: '#f4c26b' });
    }
  }
  floors.push({ x: x + 2, y: y - level * BLOCK, w: BLOCK, h: 4, color: '#f4c26b' });

  return floors;
}

The palette

Only 7 colors define the entire scene:

Advantages of the procedural approach

1. Minimal bundle — no graphic assets, lighter app
2. 100% dynamic — buildings reflect actual game state
3. Easy to modify — changing a color or proportion means changing a constant
4. No resolution conflicts — no bitmap scaling, always crisp
5. Generative — each game can have visual variations

When NOT to use this approach

• Characters with complex animations (better with sprites)
• Visual styles requiring textures or organic gradients
• Games with many distinct objects (code scales worse than an atlas)

The result

A complete scene — gradient sky, 7 buildings, trees, people and ground — rendered at 60fps on an iPhone SE. All with fewer than 300 lines of drawing code.

See the pixel art in action →