En Build Your Empire no hay un solo archivo de imagen para los gráficos del juego. Ni sprites, ni atlas de texturas, ni PNGs de edificios. Todo se dibuja en tiempo real con código.
La idea
Inspirados por los juegos de Kairosoft (Game Dev Story, Mega Mall Story), queríamos un estilo pixel art pero con una ventaja: que los gráficos fueran completamente dinámicos. La torre del jugador debía crecer visualmente cuando contrataba empleados. Los edificios rivales debían reflejar su progreso real.
Cómo funciona
Usamos @shopify/react-native-skia para dibujar en un Canvas nativo. La unidad base es un bloque de 8x8 píxeles:
// Un edificio es una pila de rectángulos con ventanas
function PlayerTower({ x, y, employees }) {
const level = calculateLevel(employees); // 1-8 pisos
const floors = [];
for (let i = 0; i < level; i++) {
// Pared
floors.push({ x, y: y - i * BLOCK, w: 2 * BLOCK, h: BLOCK, color: '#5b8dd9' });
// Ventana (alterna encendida/apagada)
if (i % 2 === 0) {
floors.push({ x: x + 2, y: y - i * BLOCK + 2, w: 4, h: 4, color: '#f4c26b' });
}
}
// Tejado
floors.push({ x: x + 2, y: y - level * BLOCK, w: BLOCK, h: 4, color: '#f4c26b' });
return floors;
}La paleta
Solo 7 colores definen toda la escena:
| Color | Hex | Uso |
|---|---|---|
| Púrpura cielo | #1a0a3e | Cielo superior |
| Sunset | #e8956b | Cielo medio |
| Gold | #f4c26b | Cielo bajo, acentos |
| Azul torre | #5b8dd9 | Edificio del jugador |
| Verde suelo | #2d5a27 | Terreno |
| Púrpura UI | #0d0820 | Fondo interfaz |
| Blanco ventanas | #ffffff | Ventanas encendidas |
Los 6 competidores tienen sus propios colores asignados, pero la estructura del edificio es la misma — solo cambia el color y la altura.
Ventajas del enfoque procedural
- Bundle mínimo — sin assets gráficos, la app pesa menos
- 100% dinámico — los edificios reflejan el estado real del juego
- Fácil de modificar — cambiar un color o proporción es cambiar una constante
- Sin conflictos de resolución — no hay escalado de bitmaps, siempre nítido
- Generativo — cada partida puede tener variaciones visuales
Cuándo NO usar este enfoque
- Personajes con animaciones complejas (mejor sprites)
- Estilos visuales que necesiten texturas o degradados orgánicos
- Juegos con muchos objetos distintos (el código escala peor que un atlas)
El resultado
Una escena completa — cielo con gradiente, 7 edificios, árboles, personas y suelo — renderizada a 60fps en un iPhone SE. Todo con menos de 300 líneas de código de dibujo.