Wie man Space Invaders zeichnet

 (muffinman.io)
1 Punkte von GN⁺ 2025-08-20 | 1 Kommentare | Auf WhatsApp teilen
  • 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

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-08-20
Hacker-News-Kommentare

  • Ich habe auch mal einen Space-Invader-Generator gebaut
    Es gibt eine laufende Version, und der Quellcode ist ebenfalls offen verfügbar
    Inspiriert wurde ich von Jared Tarbell
    Ich habe erlebt, dass die Ergebnisse überraschend leicht gut werden
    Der Kern waren die Augen, bilaterale Symmetrie und zufällige Pixel in einem kleinen Rechteck

    • Die Bemerkung, dass es von Jared Tarbell inspiriert sei: Auch für mich hatten seine Arbeiten eine große Bedeutung, als ich zum ersten Mal mit Computern zu tun hatte
      levitated.net und später auch complexification.net waren Juwelen des frühen Internets
      Leider wird Flash (Levitated) und Java (Complexification) nicht mehr unterstützt, daher funktionieren die meisten Beispiele nicht mehr
      Trotzdem kann man auf der Complexification-Seite den Processing-.pde-Quelltext in den Processing-Editor einfügen und ausführen

    • Mir gefallen sowohl das UI als auch die zufällige Farbpalette
      Wirklich ein großartiges Ergebnis

  • Das war eine der besten Erfahrungen, die ich je beim Lesen eines Artikels auf dem Handy hatte

    • Diese kleine Freude, wenn die Canvas beim Herunterscrollen mit nach oben wanderte, war wirklich beeindruckend

  • Ich war überrascht, wie gut die Ergebnisse wirklich sind
    Man kann sie auf muffinman.io/invaders sehen
    Das übertrifft alles, was ich nur anhand des Artikels erwartet hatte
    Und heute habe ich außerdem oklch kennengelernt

    • Als ich selbst damit experimentierte, war ich auch überrascht, wie gut die Ergebnisse ausfielen
      Nachdem ich es verfeinert und ein UI hinzugefügt hatte, fand ich es deutlich besser
      OKLCH ist wirklich ein großes Upgrade
      Mit Code Farben zu behandeln war schwierig, aber das macht es definitiv viel einfacher
      Ich persönlich mag auch HSLuv, aber leider wird es im Browser nicht nativ unterstützt

  • Macht Spaß
    Paradoxerweise fühlt es sich an, als würde man den Planeten (die Erde) retten, indem man Invader erschafft — genau die vergnügliche Hacker-Art ganz ohne brute force AI
    Dieses Projekt ist absolut empfehlenswert

    • Danke, ich habe das Gefühl, dass AI solchen Projekten den ganzen Spaß nimmt
      Die Magie des kreativen Prozesses liegt am Ende genau in dieser Handarbeit selbst

  • Es ist wirklich großartig, das Bild oben fixiert zu halten, sodass man beim Scrollen ständig sieht, worüber gerade gesprochen wird
    Normalerweise mag ich es nicht besonders, wenn sich Seiten beim Scrollen spektakulär verändern, aber dieses Layout ist eine Ausnahme

  • Toll
    Ich sammle Space Invaders aus aller Welt
    space-invaders.com/flashinvaders ist ebenfalls sehenswert

  • Dazu passend gibt es levInvaderFractal (2003) vom Web-Legendenprojekt levitated.net aus den 2000ern

  • Das hat wirklich Spaß gemacht zu lesen
    Man spürt, wie viel Sorgfalt sowohl in die Problemlösung als auch in den Text selbst und die Präsentation geflossen ist

  • Ich finde, ein guter Space Invader sollte einschüchternd und gefährlich aussehen
    Wenn er die Scheren schwingt, gibt das Extrapunkte

  • Sehr interessant
    Für Menschen mit einer Vorliebe für 8-Bit-Ästhetik und Retro-Computing ist das ein besonders unterhaltsamer Artikel
    Beim Lesen kam mir der Gedanke, dass dies letztlich eine digitale Umsetzung von „Mutter Natur will alles zu Krabben entwickeln“ sein könnte
    Wegen der Symmetrie der Space Invader und ihrer verschiedenen Beine, Scheren und ähnlichen Strukturen sehen am Ende alle Invader wie Krabben aus
    Vielleicht sehen wir hier ja eine Art Entsprechung in der Matrix