DOOM in CSS? Programmierer lässt Browser Shooter ohne Grafik-Engine rendern
Arkadiy Andrienko
Ein Programmierer aus den Niederlanden veröffentlichte eine Version des klassischen Shooters DOOM , der ohne eine Grafik-Engine läuft. Alle Grafiken im Spiel werden über CSS gerendert, und javascript kümmert sich nur um die Logik, die Spielerbewegung und das Verhalten der Monster.
Das Projekt heißt cssDoom, und um es zu erstellen, nahm der Autor die originalen WAD-Dateien aus der Version von 1993 und verwandelte jedes Szeneelement in HTML-Blöcke, wobei ihre Position im Raum über CSS-Transformationen definiert wurde. Das Hauptproblem: CSS hat keine Kamera, also umging der Autor dies mit einem klassischen Trick — der Spieler bewegt sich nicht, die gesamte Welt um ihn herum tut es. javascript übergibt vier Parameter an CSS: die X-, Y-, Z-Koordinaten des Spielers und den Betrachtungswinkel, und die CSS-Engine verschiebt und rotiert die gesamte Szene in die entgegengesetzte Richtung. DOOM auf verschiedenen Geräten auszuführen, ist mittlerweile alte Nachrichten, aber es so umzuwandeln, ist interessanter.
Das Hauptproblem ist, dass Browser nicht für Tausende von 3D-transformierten Elementen optimiert sind. Große Karten führen dazu, dass Safari auf iOS abstürzt, daher wurde ein Culling-System hinzugefügt: Elemente außerhalb des Sichtfelds oder zu weit entfernt werden verborgen. Es gab ein Problem mit dem Himmel im Spiel. Da das originale DOOM schummelt und die Himmelstextur auf 2D-Wänden über der realen Geometrie zeichnet. In echtem 3D funktioniert dieser Trick nicht, und durch Fenster kann man Dinge sehen, die dort nicht sein sollten.
In cssDoom sind alle neun Level der ersten Episode und fünf Schwierigkeitsgrade verfügbar. Neben der standardmäßigen Ego-Perspektive gibt es einen Modus, in dem die Kamera zur Decke geht, sowie einen Third-Person-Follow-Modus — und die Kameraposition dort wird vollständig in CSS berechnet.
Der Quellcode ist auf GitHub und jeder kann die Browser-Version spielen.
Was denkst du — haben Experimente wie dieses einen praktischen Nutzen über „Kann CSS DOOM ausführen?“ hinaus? Oder ist es nur ein technischer Kunstgriff, der die echte Entwicklung nicht beeinflusst? Teile deine Gedanken in den Kommentaren.