Pixel art procedural sem sprites: renderizacao com Canvas

No Build Your Empire nao existe um unico arquivo de imagem para os graficos do jogo. Sem sprites, sem texture atlases, sem PNGs de edificios. Tudo e desenhado em tempo real com codigo.

A ideia

Inspirados nos jogos da Kairosoft (Game Dev Story, Mega Mall Story), queriamos um estilo pixel art, mas com uma vantagem: graficos completamente dinamicos. A torre do jogador precisava crescer visualmente ao contratar funcionarios. Os edificios rivais precisavam refletir seu progresso real.

Como funciona

Usamos @shopify/react-native-skia para desenhar em um Canvas nativo. A unidade base e um bloco de 8x8 pixels:

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

A paleta

Apenas 7 cores definem toda a cena:

Vantagens da abordagem procedural

1. Bundle minimo — sem assets graficos, app mais leve
2. 100% dinamico — edificios refletem o estado real do jogo
3. Facil de modificar — mudar uma cor ou proporcao significa mudar uma constante
4. Sem conflitos de resolucao — sem escalonamento de bitmap, sempre nitido
5. Generativo — cada partida pode ter variacoes visuais

Quando NAO usar essa abordagem

• Personagens com animacoes complexas (melhor com sprites)
• Estilos visuais que exigem texturas ou gradientes organicos
• Jogos com muitos objetos distintos (codigo escala pior que um atlas)

O resultado

Uma cena completa — ceu com gradiente, 7 edificios, arvores, pessoas e terreno — renderizada a 60fps em um iPhone SE. Tudo com menos de 300 linhas de codigo de desenho.

Veja o pixel art em acao →