Wie man Space Invaders zeichnet

• Einführung in den Space Invader Generator und Erklärung des Prinzips, mit dem automatisch verschiedene Pixel-Art-Invader erzeugt werden
• Die Struktur nutzt eine einfache vektorbasierte Polygon-Körpererzeugung sowie geometrische Regeln wie Symmetrie, Zufallspunkte und Spiegelung
• Auch Gliedmaßen-Elemente wie Arme, Tentakel und Hörner werden mithilfe von Zufall und geometrischen Verfahren erweitert und bieten einfache, kreative Variationsmöglichkeiten
• Durch Umwandlung von Vektor in Pixel, Farbgebung und das Hinzufügen von Augen entsteht eine vertraute Spielgrafik
• Der gesamte Herstellungsprozess und die Code-Implementierungslogik werden offengelegt, sodass Lernende und Entwickler selbst Anpassungen oder Übungen vornehmen können

---

Überblick

Der Space Invader Generator ist ein Tool, mit dem jeder ganz einfach zufällige Invader im Pixel-Art-Stil erstellen kann. In diesem Artikel werden das Funktionsprinzip und der kreative Prozess der Zufallsgenerierung anhand von Animationen und Beispielen erklärt. Charakteristisch ist der Ansatz, Design und Programmierung zu verbinden, etwa über die geometrische Struktur der Invader, die Vektor-zu-Pixel-Umwandlung und die Farbgebung.

Ausgangspunkt

• Während der Entwicklung des 3D-Renderer-Tools Rayven wurde deutlich, wie wichtig es ist, tatsächlich kreative Ergebnisse zu produzieren
• Als einfaches und unterhaltsames Ergebnis wurde ein intuitiv und leicht erkennbares Motiv wie ein Space Invader gewählt
• Die Arbeit begann mit der Idee, mehrere klassische Invader per vektorbasiertem 3D-Rendering zu zeichnen und das Ganze dann zu einem Zufallsgenerator auszubauen
• Diese Erfahrung wurde auch in der Code Challenge von Creative Coding Amsterdam geteilt

Code Challenge

• Die Space-Invaders-Code-Challenge zog viel Interesse von Kreativen und Entwicklern auf sich
• Verschiedene Implementierungen und Ergebnisse werden gesammelt und in Entwickler-Communities aktiv geteilt

Von der Skizze zum Pixel

• Zunächst wurde die Struktur der Invader durch Kritzeleien und Skizzen auf Papier analysiert
• Mit dem Tool Aseprite wurden verschiedene Invader-Formen digital auf einem 15x15-Pixelraster gezeichnet
• Dabei wurden gemeinsame geometrische Muster entdeckt, etwa Achsensymmetrie und einfache Polygon-Körper
• Durch die Verbindung der Vorteile von Pixel-Art und Vektorgrafik gelang die Umsetzung einer Funktion, die die meisten handgezeichneten Designs automatisch erzeugen kann
• Details zur Implementierung finden sich im GitHub-Repository

Prozess der Invader-Erzeugung

Mittelpunkt finden

• Es wird ein zentraler Punkt als Referenz für alle Operationen festgelegt
• Da die Tentakel unten erzeugt werden, wird der Hauptkörper etwas weiter oben positioniert
• Die Gesamtsymmetrie wird genutzt, indem nur eine Seite gezeichnet und später horizontal gespiegelt wird

Ober- und Unterseite definieren

• Beim Entwurf der Körperseiten werden obere und untere Punkte zufällig ausgewählt
• Entlang der Symmetrieachse bleibt die Form auf beiden Seiten identisch

Linke Seite zeichnen

• Auf der linken Körperseite werden 1 bis 5 Punkte zufällig platziert
• Ausgehend von einem einfachen konvexen Polygon entstehen frei variierte Ergebnisse
• Überlappende Linien werden beim Pixelisieren auf natürliche Weise korrigiert

Rechte Seite spiegeln

• Anhand der linken Eckpunktdaten wird automatisch die rechte Spiegelung erzeugt

Körperpolygon verbinden

• Durch das Verbinden der Punkte entsteht der vektorbasierte Polygon-Körper
• Werden darauf Gliedmaßen ergänzt, ergibt sich die charakteristische Invader-Form

Gliedmaßen hinzufügen

Erzeugung von Tentakeln und Hörnern

• Unten werden Tentakel, oben Hörner erzeugt. Dieselbe Methode wird jeweils nur mit anderer Position und anderem Winkel angewendet

Tentakel-Ursprung finden

• Ausgehend vom untersten Punkt des Körpers wird zunächst der linke Tentakel zufällig erzeugt

Mittellinie skizzieren

• Mithilfe zufälliger Punkte wird eine Polylinie (Mittellinie) erzeugt
• Länge und Form des Tentakels lassen sich in viele Richtungen variieren

Dicke anwenden (fat line)

• Da eine reine Mittellinie zu dünn ist, werden Punkte auf beiden Seiten erzeugt, um eine dickere Tentakelform zu bilden
• In Körpernähe ist der Tentakel dicker und verjüngt sich zur Spitze hin (Taper-Effekt)
• An stark geknickten Stellen wird die Linienbreite reduziert, um natürlich wirkende Übergänge darzustellen
• Zur Steuerung der Breite wird ein Easing-Parameter verwendet

Tentakel fertigstellen

• Durch das Verbinden der beiden Enden entsteht ein dicker Tentakel

Erweiterung auf mehrere Tentakel und Hörner

• Auf dieselbe Weise sind Erweiterungen auf Seitensymmetrie, einen mittleren Tentakel oder obere Hörner möglich
• Beim mittleren Tentakel wird vorzeitig abgebrochen, um Kollisionen mit bereits gezeichneten Seitententakeln zu vermeiden
• Bei Hörnern wird der Winkelbereich eingeengt und die Platzierung auf links und rechts verteilt, damit sich die Formen nicht überlagern

Von Vektor zu Pixel

Körper pixelisieren

• Ein Körperpixel wird danach bestimmt, ob sich das Zentrum eines Pixels innerhalb des Vektorpolygons befindet
• Priorisiert werden Einfachheit und Ausführungsgeschwindigkeit statt maximaler Genauigkeit

Gliedmaßen pixelisieren

• Tentakel und Hörner sind dünn, sodass ihr Zentrum oft nicht innerhalb eines Pixels liegt
• Daher wird die Distanz zwischen Punkten und den Zentren benachbarter Pixel geprüft, um Pixel zuzuweisen
• Durch Verfeinerung der Mittellinie (line splitting) lässt sich die Natürlichkeit der Tentakel weiter verbessern

Augen hinzufügen

• Zufällige Auswahl aus mehreren vorbereiteten Augen-Sets
• Sie werden nahe der Körpermitte platziert, außen sorgt ein Puffer aus Pixeln für Padding
• Überlappende Pixel werden automatisch entfernt, sodass eine lochartige Darstellung entsteht

Farbgebung

Logik der Farberzeugung

• Verwendung des OKLCH-Farbraums
• Im Vergleich zu HSL bleibt die Helligkeit konsistenter, während vielfältige, lebendige Farbkombinationen möglich sind
• Eine Helligkeit wird fest vorgegeben, die beiden anderen Parameter werden zufällig bestimmt, um viele Varianten zu erzeugen
• So entsteht ein kontinuierlicher, visuell konsistenter Invader-Eindruck

Nutzung von CSS-Varianten

• Farben lassen sich über CSS-Variablen anpassen
• Je nach Situation, etwa im Vergleich zu UI-Elementen oder im Debug-Modus, können Helligkeit und Sättigung variiert werden

Animation umsetzen

• Wie im Originalspiel wird eine einfache 2-Frame-Animation genutzt, um Tentakel, Hörnern und Augen Bewegung zu geben
• Die Mittellinie der Gliedmaßen wird kopiert und per Zufalls-Shift verschoben, um einen veränderten Frame zu erzeugen
• Auch die Augen werden um ein Pixel verschoben, um sie lebendiger wirken zu lassen

Größenanpassung

• Wird die Rastergröße erhöht, werden die Invader zunehmend feiner und komplexer
• Wird sie zu groß, tritt die Abstraktion des Vektormodells stärker hervor und das ursprüngliche Invader-Gefühl geht verloren
• Begrenzt wird auf 31x31 Pixel, über eine versteckte Option sind bis zu 51x51 möglich

Fazit

• Fertiggestellt wurde ein Generator, der unendlich viele verschiedene farbige Invader automatisch erzeugt
• Umsetzung und Beitrag vereinen Lernen, Spaß und kreative Freiheit
• Da sowohl Code als auch Prinzip offengelegt sind, eignet sich das Projekt gut für Übungen, Experimente und Anpassungen

Nachwort zur Umsetzung

• Der JavaScript-Code im Beitrag wurde so aufbereitet, dass er sich gut zum Lernen und Nachvollziehen eignet
• Für die Animation wurden Anime.js und mehrere externe Abhängigkeiten genutzt, die Umsetzung erfolgte in TypeScript
• Ein separater Debug-Modus sowie Step-Optionen erlauben es, den Erzeugungsprozess direkt zu erkunden

Bonus – Beitrag zum Zeichnen von Seilen

• Erwähnenswert ist auch ein früherer interaktiver Beitrag zum Zeichnen einer Seilform (rope) mit SVG und JavaScript