Wie ich einen neuartigen Grafik-Stil in Unity realisierte

​In meinem Adventure-Game A Room Beyond ​habe ich ​eine Kombination aus selbst erstellter Pixel-Grafik und automatisierten Bildberechnungen genutzt, um das ​Gefühl von klassischen 2D-Abenteuern mit 3D-Mitteln nachzuahmen. ​Diese​r Effekte ​weckte viel Interesse und wurde immer wieder als Innovativ und ​neuartig empfunden. ​Der folgende ​Artikel, der im Making-Games-Magazins und auf Made with Unity ​veröffentlicht​ wurde, erklärt die Verfahren und Hintergründe​.

​Als ich 2014 das grobpixelige 2D-Abenteuer “The Last Door” entdeckte, war ich von der dichten Atmosphäre dieser lovecraftschen Gruselgeschichte begeistert. Ich fragte mich allerdings, wieweit es möglich ist, den Sinneseindruck handgezeichneter Retro-Pixel-Abenteuer mit heutiger 3D-Rendertechnik zu vereinen. In einem kurzen Experiment baute ich einen kubistischen Character in Blender und erweiterte ihn in Unity zu einem spielbaren Prototyp. Die vielversprechenden ersten Gehversuche wuchsen schnell zu einem ganzen Point-and-Click-Adventure, dem Indie-Projekt „A Room Beyond“. Oft werde ich seither nach den technischen Details des semi-dreidimensionalen Pixel-Looks gefragt. Im Folgenden soll daher aufgezeigt werden, welche konzeptuellen, gestalterischen und technischen Schritte der „2.5D“-Pixelgrafik zugrunde liegen und warum ein einfaches Postprocessing nicht ausreicht, um sich dem Charme von nostalgischer Pixelgrafik anzunähern.

Warum überhaupt Pixel-Rendering?

Zu Zeiten der frühen Point’n’Click-Adventures, wie etwa den großartigen Lucas Arts-Spielen, begründete sich die charakteristische pixelige Bildgestaltung in technischen Begrenzungen der damaligen Hardware. Die meisten Hintergründe, Sprites und Animationen  wurden Bild für Bild von Hand gezeichnet, was ein charmantes handgemachtes Aussehen zur Folge hatte. Allerdings hatte diese Technik auch ihre Einschränkungen: alles Sichtbare war auf das explizit gezeichnete beschränkt. Bewegungen ließen sich beispielsweise nur in der in den Einzelbildern hinterlegten Perspektive und Bildrate darstellen. Auch Lichteffekte wie Schlaglichter oder dramaturgischer Schattenwurf waren nur durch statische Vorabproduktionen möglich.

Ungeachtet der technischen Möglichkeiten und Grenzen kann Pixelgrafik ein attraktiver visueller Effekt sein, zumal er die Vorstellungskraft des Betrachters stimuliert. Dadurch, dass eben nicht jedes Detail sichtbar ist, sondern ein abstrahierendes Mosaik auf dem Bildschirm erscheint, bleibt Spielraum für eigene Interpretationen. Ähnlich dem Lesen eines Buchs das im Gegensatz zu seiner Verfilmung viele konkrete Details offen lässt, bereichert die eigene Vorstellung des Spielers das gesamte Spielerlebnis.

Nachdem die heutige Rechenleistung ausreicht, um Effekte wie 3D-Bewegungen und Beleuchtungsmodelle in Echtzeit darzustellen, liegt die Idee nahe, die Schwächen der Pixelgrafik mit Echtzeiteffekten zu kompensieren. Trotz seiner Offensichtlichkeit scheinen nur wenige Projekte diesen Ansatz bisher tatsächlich zu verfolgen.

 

Werbung

 

​Komponenten der Inszenierung

Eine bloße Verringerung der Bildpunkte (Downsampling) reicht nicht aus, um sich dem Eindruck manuell gezeichneter Pixelgrafik anzunähern, zumal dieser Effekt leicht als solcher zu erkennen ist. Statt dessen kommt eine Kombination mehrerer gestalterischer Entscheidungen und technischer Mittel in „A Room Beyond“ zum Einsatz, um die visuelle Erscheinung von Pixelgrafik nachzuahmen. Abb. 1 fasst die wichtigsten Bausteine für die Gesamtkomposition zusammen.

Abb. 1: Das finale Bild ist das Ergebnis von Postprocessing, 3D-Objekten als auch speziellen Texturen und Overlays.

Grundsätzlicher Aufbau. Jede Kameraeinstellung basiert auf einer in Unity realisierten 3D-Szene. Boden, Wände und andere für räumliche Bewegungen relevante Elemente basieren auf niedrig aufgelösten Polygon-Meshes. Dekorationen, statische Hintergrundbilder und Vordergrund-Masken kommen als einfache texturierte Ebenen hinzu, was einerseits die Performanz erhöht und andererseits das direkte Einbinden handgezeichneter Bereiche erlaubt.

Post-Processing. Ein Pixelierungs-Shader rastert vor dem Zeichnen der GUI-Elemente das Kamerabild. Durch geringfügige Anpassungen kann der Code des quelloffenen „unity-facesensor“ für diesen Zweck zum Einsatz kommen. Besondere Relevanz hat der Shader für die Darstellung sichtbarer Pixel entlang von 3D-Objekt-Kanten, die wiederum von der Kameraperspektive abhängen (Abb. 2).

Abb. 2: Postprocessing-Pixelierung wirkt sich besonders stark auf die Pixel entlang von Objektkanten aus. Der Effekt ist daher vor allem dort deutlich sichtbar, wo die Mesh-Geometrie Kontraste erzeugt, etwa an den äußeren Konturen und in Schattenbereichen.

Die nachträgliche Pixelierung des im Speicher hochaufgelösten Kamerabildes beansprucht einiges an Rechenleistung, weshalb zunächst die Vermutung nahe lag, dass ein direktes Rendering in geringer Auflösung und die anschließende Vergrößerung auf Bildschirmauflösung effizienter sein könnte. In der Tat konnte für eine entsprechende Testimplementierung eine deutliche Verbesserung der Bildrate gemessen werden. Jedoch traten auch Probleme zutage: In der Schattenberechnung erschienen inakzeptable Fehler und Artefakte, Kantenglättungsverfahren konnten  nicht (zufriedenstellend) in das Render-Ergebnis eingebunden werden. Zudem erforderten die das gepixelte Kamerabild überlagernden GUI-Elemente den Einsatz eines weiteren Renderschritts mithilfe einer zusätzlichen Kamera. Dieses doppelte Rendering relativiert dann jedoch wiederum die gegenüber dem Pixel-Shader gewonnenen Einsparungseffekte. Außerdem verändert sich bei dieser technischen Architektur die Auswertung von Maus-Eingabesignalen, was einen zusätzlichen Workaround-Code zur Nachbildung der herkömmlichen Abläufe erfordert. Da schließlich auch Einschränkungen bei Vorschau und Interaktivität dieses Verfahrens innerhalb des Unity-Editors auftraten, muss abschließend festgestellt werden, dass sich der Einsatz des teureren Pixelierungsshaders gegenüber dem direkten Rendern in niedriger Auflösung schlicht aus Gründen der Einfachheit, Flexibilität und Fehlerfreiheit bewährt hat.

 

Werbung

 

​Texturen

​Um die Sichtbarkeit der Pixel innerhalb von Formflächen zu erhöhen, eignen sich pixelige Texturen. Sehr niedrig aufgelöste, über die Objektoberfläche skalierte Texturen mit hohen Kontrasten liefern dabei meist gute Ergebnisse. Auch die Deaktivierung von Unitys Importoptimierungen wie Glättungsfilter und Speicheroptimierungen („2er-Potenz-Korrektur“) tragen zu scharfen Pixelkanten bei. Gestalterisch lässt sich die visuelle Plastizität von 3D-Objekten verbessern, indem Texturen entlang deren räumlichen Verlaufs platziert werden (Abb. 3).

Abb. 3:Durch Abbilden der Textur entlang der räumlichen Richtung des 3D-Meshes verbessert sich die Plastizität des Steins.

Die grafische Attraktivität wird zudem durch den Szenenkontext beeinflusst: Objekte sollten nicht nur isoliert betrachtet texturiert werden, sondern unter Beachtung der Umgebungselemente in der finalen Szene. Es hat sich gezeigt, dass eine ausgewogene Mischung aus rauschenden (z.B. Holzboden in Abb. 1)  und einfarbigen Texturen (z.B. Schrank in Abb. 1) häufig ein ansprechendes, comic-haftes Gesamtbild liefert.

​Beleuchtung

​Das Kamerakonzept in „A Room Beyond“ beruht auf statischen Blickwinkeln mit harten Schnitten. Je nach Standort der Spielfigur wählt das Spiel eine Kamera aus, um den entsprechenden Szenenabschnitt bestmöglich darzustellen. Einerseits ist diese Statik dem Einsatz des Pixel-Shaders geschuldet, der bei Kamerabewegungen aufgrund des veränderten Renderergebnisses zu starkem Flimmern aller Pixel führen würde. Andererseits ermöglicht der Einsatz statischer Kameras aber auch eine stärkere Anlehnung an aus der Filmtheorie bekannte Bildgestaltungskonzepte. Regisseure wie Alfred Hitchcock zeigen in ihren Arbeiten, wie das Prinzip des „Mise en Cadre“ als dramaturgisches Werkzeug funktioniert. Die Platzierung von Objekten innerhalb des sichtbaren Bildrahmens folgt dabei nicht einfach den momentan aktiven Darstellern, sondern richtet sich vorrangig nach dramaturgischen Fragen. So unterstützen ungewöhnliche – möglicherweise sogar bewusst unnatürliche – Kameraperspektiven und Beleuchtungsmodelle besonders dramatische Momente und Emotionen der Erzählung. Ein ikonisches Leitmotiv der „Alone in the Dark“-Serie (1992-1994) ist der Blick durch ein Fenster auf die Spielfigur, die die Szenerie betritt. Obwohl technisch gesehen kein Unterschied zur Third-Person-Perspektive des restlichen Spiels besteht, sorgt die dramaturgische Platzierung der Kamera hier dafür, dass der Spieler gedanklich für einen kurzen Moment seine Figur verlässt und in die Perspektive eines unbekannten Dritten schlüpft. Zwar wird der Beobachter selbst nicht direkt gezeigt, doch verdichtet die herabblickende Kamera das unheimliche Gefühl, in dem scheinbar verlassenen Herrenhaus bereits erwartet zu werden.

Weil „A Room Beyond“ ebenfalls auf statischen Kameraeinstellungen beruht, ist es um so wichtiger, die Räumlichkeit der Szene mittels Texturen, Objektanordnung und Beleuchtung auszudrücken. Einige Lichtinformationen, vor allem Lichtkanten, Schlagschatten und leuchtende Flächen, sind dabei bereits direkt in die Texturen eingezeichnet (Abb. 4).

​Abb. 4: Textur für den Innenraum eines Hauses. Pfeile markieren Lichter und Schatten, die bereits in Photoshop eingezeichnet wurden. Das heißt sie beruhen nur auf der Textur und keiner tatsächlichen Lichtquelle der Engine.

​Die endgültige Stimmung einer Szene hängt wesentlich von zusätzlich in der 3D-Szene platzierten Engine-Lichtquellen ab. Zumeist in Lightmaps gebacken, helfen sie, Licht und Schatten in Abhängigkeit von der jeweiligen Modell-Geometrie und der Platzierung aller Objekte in der Szene zu arrangieren. Nur wenige Lichtquellen kommen als solche in Echtzeit zum Einsatz, wo sie bewegliche Objekte wie Charaktere illuminieren. Neben der dramaturgischen Inszenierung können Lichter der Game-Engine auch helfen, die Plastizität und Klarheit von 3D-Modellen zu unterstreichen (Abb. 5, Abb. 6). Die Regeln cinematographischer Lichtsetzung, wie z.B. das Drei-Punkt-Beleuchtungsmodell, lassen sich problemlos in die virtuelle Bühne übertragen. Konträr gefärbte und in gegenläufigen Winkeln ausgerichtete Lichtquellen machen dann die räumliche Ausrichtung von Objektoberflächen durch unterschiedliche Färbung sichtbar. Infolge wirken dreidimensionale Objekte im zweidimensionalen Bild plastischer.

​Abb. 5: Game-Engine-Lichter steigern die Plastizität und Klarheit von 3D-Objekten.

Abb. 6: Beispiel einer Gesamtbeleuchtung, die aus Texturdaten, gebackenen Lichtern und Echtzeitbeleuchtung entsteht.

​Bildebenen

​Mit teils transparenten Texturen versehene Ebenen (Planes oder Quads) und stark vereinfachte Gitternetzobjekte reichen in vielen Fällen aus, um die Szenenumgebung für ein Gameplay mit statischen Kameraeinstellungen zu gestalten. Photoshops Ebenen-Stile sind dabei ein effizientes Werkzeug, um Pixeldetails hinzuzufügen. In Abb. 7 wurden Architekturformen hauptsächlich durch einfarbige, manuell gezeichnete Ebenen realisiert. Die Anwendung von Ebenen-Stilen sorgt für zusätzliche Details wie Glanzlichter, Muster und Schatten. Der große Vorteil dieses Verfahrens liegt im Erhalt der Bearbeitbarkeit. Soll beispielsweise der Torbogen verändert werden, kann dies mit Buntstift- und Radiergummi-Werkzeug schnell und einfach bewerkstelligt werden. Alle Schatten, Lichtkanten, Muster und Verläufe passen sich automatisch an die neue Form an.

​Abb. 7: Viele Texturen wurden als einfarbige Ebenen angelegt. Details wie Rauschen, Muster, Licht- und Schattenkanten kommen durch Ebenenstile hinzu. Dies erhöht die visuelle Komplexität während die einfache Bearbeitbarkeit der Ebene erhalten bleibt, da durch ein- und ausschalten der Stile jederzeit zwischen den beiden Versionen gewechselt werden kann.

Der Eindruck von Pixelgrafik entsteht einerseits durch die Verwendung von niedrig aufgelösten Quelltexturen, die in der Game-Engine skaliert werden. Andererseits eignen sich Ebenenstile wie die Musterüberlagerung dazu, um pixelige Strukturen, wie Rauschen oder Linienverläufe, beliebigen Formen und Flächen hinzuzufügen. Auch die Rauschen-Eigenschaft, die sich für Schatten- und Glühen-Stile einstellen lässt, trägt zur Verstärkung des Pixeleffekts bei.

Abb. 8 zeigt eine Kameraeinstellung, die im Wesentlichen auf planen Texturebenen beruht. Eine Aufteilung in mehrere Geometrieobjekte ist dennoch nötig, damit sich die virtuellen Charaktere räumlich bewegen und beispielsweise um die Säulen herum laufen können (Abb. 8 oben). Alle Details und Dekorationen jedoch werden über Texturen realisiert, die schon beinahe dem endgültigen Bild entsprechen (Abb. 8 Mitte). Der abschließend angewandte Pixelierungs-Shader (Abb. 8 unten) richtet schließlich lediglich schräge und durch die Perspektive verzerrte Pixel in ein gerades Raster aus.

Abb. 8: Szene, die auf Bildebenen basiert. ​Links: Mesh-Geometrie. Mitte: Direktes Rendering. ​Rechts: Postprocessing-Pixelierung.

Grenzen und Herausforderungen

Das Hauptrisiko der Kombination von Pixeltexturen und Postprocessing-Pixelierung liegt im Erscheinen von Interferenzen, die scheinbar zerbrochene Pixel generieren. Dies passiert vor allem dann, wenn Details auf die Darstellung durch einzelne Pixel angewiesen sind, da der Shader nicht zwischen gestalterisch wichtigen und unwichtigen Pixeln unterscheidet. Die Details des in Abb. 9 gezeigten Glasfensters sind allesamt in die Textur gezeichnet worden. Es kommt durch die unterschiedliche Größe der perspektivisch skalierten Texturpixel und der Auflösung des Postprocessing-Effekts zu einer unattraktiven Aufspaltung der einzelnen Texturpixel in mehrere kleinere Bildpunkte. Glücklicherweise gibt es für dieses Problem oft eine einfache Lösung: Da dieses Phänomen meist in herangezoomten Detailaufnahmen auftaucht, kann für die entsprechenden Kameras der Postprocessing-Filter schlicht deaktiviert werden (Abb. 9 rechts). Durch harte Kameraschnitte und eine ähnliche Größe der Pixel ist ein Unterschied zwischen nachträglicher Rasterung und skalierter Pixeltextur kaum wahrnehmbar. Leider funktioniert diese Maßnahme nicht immer. In einigen Blickwinkeln interpoliert der Shader z.B. die Augen der virtuellen Charaktere, die idealerweise über wenige einzelne Pixel darzustellen sind,  zu unscharfen Farbflecken (Abb. 10). Weil sich feste Pixelmuster für ausgewählte Modellpartien unter Beibehalt der räumlichen Transformationsfreiheit nur sehr schwer realisieren lassen, scheint dies ein Preis für diesen technischen Ansatz zu sein.

Auch Kamerabewegungen unterliegen hier Einschränkungen. In traditioneller, handgezeichneter Pixelgrafik finden Kamerabewegungen oft in Form von verschobenen Ebenen statt. Dabei bewegen sich die Pixel nur horizontal und vertikal in der Kameraebene und nicht in der Tiefe. Bewegt sich jedoch eine perspektivische Kamera im Raum, so verändert sich der räumliche Blickwinkel auf alle Objekte, was dazu führt, dass alle Pixel nicht nur verschoben, sondern perspektivisch neu berechnet werden. Folglich ändert sich die Farbe von potentiell jedem Pixel, was ein Flackern des gesamten Kamerabildes zur Folge hat. Die Illusion von statischer Pixelgrafik geht dabei völlig verloren und das Herunterrechnen eines hochaufgelösten Bildes wird für den Spieler deutlich wahrnehmbar. Kamerabewegungen sollten daher auf das Verschieben des Ausschnitts eines einmal gerenderten und pixelierten Gesamtbildes beschränkt werden, um Pixelflackern zu vermeiden.

Abb. 9: Befinden sich feine Details in der Textur, so kommt es beim Post-Processing zu Interferenzen (links). In einigen Fällen lässt sich dieses Problem durch Deaktivierung der Pixelierung und einer senkrechten Kameraperspektive lösen (rechts).

Abb. 10: Kleine Details, wie z.B. die Augen des Charakters, die über einzelne Pixel dargestellt werden müssten, gehen durch die Postprocessing-Pixelierung verloren. Links: Screenshot aus dem Spiel. Rechts: gewünschtes Ergebnis (Bildmontage).

Vorteile und Nutzen

Die Vorteile der hier vorgestellten Kombination aus vorgefertigter Pixelgrafik und der nachträglichen algorithmischen Pixelierung liegen in Flexibilität und Dynamik, die der 3D-Raum mit sich bringt. Szenen lassen sich räumlich anlegen, was die Erstellung von verschiedenen Blickwinkeln auf die selbe Lokalität vereinfacht. Wenn sich die Requisite ändert, entfallen außerdem zusätzliche manuelle Korrekturarbeiten über mehrere Perspektiven hinweg.  Es bietet sich an, Spezialeffekte wie Explosionslichter, einfach über die Echtzeitlichtsetzung der Game-Engine zu realisieren. Die Kanten entlang der Objektgeometrie werden in die Berechnung von Licht- und Schatten ebenso einbezogen wie Bumpmap-Kanäle in den Texturen. Dynamische Objekte, wie z. B. Charaktere, können sich ohne zusätzlichen Implementierungsaufwand unter Einbeziehung von Licht und Kamerawinkel drehen, gestikulieren und frei in der Szene bewegen.

Schließlich profitiert auch die Interaktion von der räumlichen Szene. Befindet sich die Spielfigur beispielsweise auf einer Anhöhe mit Blick ins Tal, so kann der Spieler auf das Tal klicken, um dorthin zu wandern. Da längere Distanzen in Spielen mit statischen Bildeinstellungen meist über mehrere Szenen hinweg verlaufen, muss die Programmierung dafür sorgen, dass die Spielfigur nun alle zwischen Anfangs- und Endpunkt liegenden Zwischenbildschirme durchwandert. Im Fall der klassischen Einzelbilderstellung ein aufwendiges Unterfangen. Dadurch dass dem Ansatz der halbautomatischen Pixelierung jedoch eine 3D-Szene zugrunde liegt, lassen sich Wegfindungsalgorithmen einsetzen. Bei Klick auf einen entfernten Punkt läuft die Spielfigur automatisch entlang des gefundenen Pfades bis zum Ziel. Auf dem Terrain verteilte Trigger schalten dabei zur jeweils geeigneten Kameraperspektive um.

 

Werbung

 

Blasphemie!

Nun kann man natürlich diskutieren, ob die hier vorgestellte, teils automatisierte Pixelierung überhaupt noch zu dem zählt, was im Allgemeinen unter dem Begriff „Pixel-Art“ verstanden wird. Für Verfechter der reinsten Form stellt die manuelle Bearbeitung jedes einzelnen Pixels durch den Künstler ein essentielles Merkmal dieses Gestaltungsstils dar. Selbst einfache Filter und Werkzeuge sind manchmal schon verpönt.

Obwohl ich glaube, dass halbautomatische Pixelierung durchaus dem Charme von rein handgemachter Pixelgrafik nahe kommen kann, bleiben einige deutlich sichtbare Unterschiede bestehen. So liegt es etwa in der Natur des Renderings frei beweglicher Objekte, dass unscharfe oder unattraktive Bildbereiche auftauchen können, was einen klaren Nachteil gegenüber handgemachter Pixel-Art darstellt. Algorithmische Glättungen, sei es in Form von Anti-Aliasing oder Bewegungsberechnungen, sehen immer ein Stück weit künstlicher aus als das Ergebnis filigranen Handwerks.

Der hier vorgestellte Ansatz ist daher nicht als Ersatz zu verstehen. Vielmehr bildet er einen eigenen Stil, der sich eben gerade durch seine Unterschiede zu klassischer Pixel-Art abgrenzt. Ein gewisses Retro-Gefühl kommt dennoch auf, zumal Spiele wie Alone in the Dark oder Silver auch schon in der Pixel-Ära Mitte der 90er-Jahre mit der Kombination von statischem Bildmaterial und Echtzeit-3D-Objekten experimentierten.

​Nachtrag – ​Was mittlerweile geschah

​Als ich dieses Projekt 2015 begann, war der hier beschriebene Pixel-Effekt noch sehr neu. Mittlerweile gibt es aber eine Reihe von Projekten, die ​eine 3D-Szene in Pixel-Art zu verwandeln versuchen. Viele davon ​erreichen großartige Ergebnisse, ​perfektionieren ​das Verfahren und beheben sogar einige der ​oben beschriebenen Probleme. Ziemlich coole ​Ergebnisse liefert zum Beispiel das Stylizer-Plugin für Unity, das im AssetStore erhältlich ist.

​Beispiel des Stylizer-Plugins, das 3D-Szenen in Retro-Pixelart verwandelt.