Pixel art procedurale senza sprite: rendering con Canvas

In Build Your Empire non c’e un singolo file immagine per la grafica di gioco. Niente sprite, niente texture atlas, niente PNG di edifici. Tutto e disegnato in tempo reale con il codice.

L’idea

Ispirati dai giochi Kairosoft (Game Dev Story, Mega Mall Story), volevamo uno stile pixel art ma con un vantaggio: grafica completamente dinamica. La torre del giocatore doveva crescere visivamente quando assumeva dipendenti. Gli edifici dei rivali dovevano riflettere il loro progresso reale.

Come funziona

Usiamo @shopify/react-native-skia per disegnare su un Canvas nativo. L’unita base e un blocco di 8x8 pixel:

function PlayerTower({ x, y, employees }) {
  const level = calculateLevel(employees); // 1-8 piani
  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;
}

La palette

Solo 7 colori definiscono l’intera scena:

Vantaggi dell’approccio procedurale

1. Bundle minimo — nessun asset grafico, app piu leggera
2. 100% dinamico — gli edifici riflettono lo stato reale del gioco
3. Facile da modificare — cambiare un colore o una proporzione significa cambiare una costante
4. Nessun conflitto di risoluzione — nessun ridimensionamento bitmap, sempre nitido
5. Generativo — ogni partita puo avere variazioni visive

Quando NON usare questo approccio

• Personaggi con animazioni complesse (meglio con gli sprite)
• Stili visivi che richiedono texture o gradienti organici
• Giochi con molti oggetti distinti (il codice scala peggio di un atlas)

Il risultato

Una scena completa — cielo sfumato, 7 edifici, alberi, persone e terreno — renderizzata a 60fps su un iPhone SE. Il tutto con meno di 300 righe di codice di disegno.

Guarda la pixel art in azione →