In Build Your Empire gibt es keine einzige Bilddatei für die Spielgrafik. Keine Sprites, keine Texturatlanten, keine Gebäude-PNGs. Alles wird in Echtzeit mit Code gezeichnet.
Die Idee
Inspiriert von Kairosoft-Spielen (Game Dev Story, Mega Mall Story) wollten wir einen Pixel-Art-Stil, aber mit einem Vorteil: vollständig dynamische Grafik. Der Turm des Spielers musste visuell wachsen, wenn Mitarbeiter eingestellt werden. Gegnerische Gebäude mussten ihren tatsächlichen Fortschritt widerspiegeln.
Wie es funktioniert
Wir verwenden @shopify/react-native-skia, um auf einem nativen Canvas zu zeichnen. Die Basiseinheit ist ein 8x8-Pixel-Block:
function PlayerTower({ x, y, employees }) {
const level = calculateLevel(employees); // 1-8 Stockwerke
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;
}Die Palette
Nur 7 Farben definieren die gesamte Szene:
| Farbe | Hex | Verwendung |
|---|---|---|
| Lila Himmel | #1a0a3e | Oberer Himmel |
| Sonnenuntergang | #e8956b | Mittlerer Himmel |
| Gold | #f4c26b | Unterer Himmel, Akzente |
| Turmblau | #5b8dd9 | Spielergebäude |
| Bodengrün | #2d5a27 | Gelände |
| UI-Lila | #0d0820 | Interface-Hintergrund |
| Fensterweiß | #ffffff | Beleuchtete Fenster |
Vorteile des prozeduralen Ansatzes
- Minimales Bundle — keine Grafik-Assets, leichtere App
- 100% dynamisch — Gebäude spiegeln den tatsächlichen Spielstand wider
- Einfach zu ändern — eine Farbe oder Proportion ändern bedeutet eine Konstante ändern
- Keine Auflösungskonflikte — kein Bitmap-Skalierung, immer scharf
- Generativ — jedes Spiel kann visuelle Variationen haben
Wann diesen Ansatz NICHT verwenden
- Charaktere mit komplexen Animationen (besser mit Sprites)
- Visuelle Stile, die Texturen oder organische Verläufe erfordern
- Spiele mit vielen verschiedenen Objekten (Code skaliert schlechter als ein Atlas)
Das Ergebnis
Eine vollständige Szene — Himmelsverlauf, 7 Gebäude, Bäume, Personen und Boden — gerendert mit 60fps auf einem iPhone SE. Alles mit weniger als 300 Zeilen Zeichencode.