Games

2D Pixel Perfect: Wie Sie Ihr Unity-Projekt für Retro-8-Bit-Spiele einrichten

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Mar 13, 2019|23 Min.
2D Pixel Perfect: Wie Sie Ihr Unity-Projekt für Retro-8-Bit-Spiele einrichten
Diese Website wurde aus praktischen Gründen für Sie maschinell übersetzt. Die Richtigkeit und Zuverlässigkeit des übersetzten Inhalts kann von uns nicht gewährleistet werden. Sollten Sie Zweifel an der Richtigkeit des übersetzten Inhalts haben, schauen Sie sich bitte die offizielle englische Version der Website an.

Bringen Sie Ihre 2D-Entwicklungserfahrung auf die nächste Stufe und erkunden Sie die nativen 2D-Tools von Unity.

Retro-Spiele mit einfachen Mechanismen und pixeliger Grafik können bei Veteranen schöne Erinnerungen wecken, sind aber auch für ein jüngeres Publikum zugänglich. Heutzutage werden viele Spiele als "Retro" bezeichnet, aber es erfordert viel Mühe und Planung, um einen Titel zu entwickeln, der wirklich nostalgisch aussieht und sich auch so anfühlt. Deshalb haben wir die Leute von Mega Cat Studios eingeladen, um mit uns über dieses Thema zu sprechen. In diesem Blogbeitrag erfahren Sie alles, was Sie brauchen, um authentische Grafiken für Spiele im NES-Stil zu erstellen, einschließlich wichtiger Unity-Einstellungen, Grafikstrukturen und Farbpaletten. Holen Sie sich unser Beispielprojekt und machen Sie mit!

Spielbeispiele

Mega Cat Studios aus Pittsburgh, Pennsylvania, hat die Entwicklung von sehr genauen Retro-Spielen zu einer Kunstform gemacht. Und zwar so sehr, dass mehrere ihrer Titel auch in Form von Kassetten erworben und auf Retro-Konsolen wie dem Sega Genesis gespielt werden können.

Retro-Spiele
Unity-Workflows für maximale Rückwärtsgewandtheit

Die jüngsten Erweiterungen der Unity-Workflows haben diese zu einer gut geeigneten Umgebung für die Entwicklung Ihrer Retro-Spiele gemacht. Das 2D-Kachelkartensystem wurde noch weiter verbessert und unterstützt nun Gitter-, Hex- und isometrische Kachelkarten! Darüber hinaus können Sie die neue Komponente Pixel Perfect Camera verwenden, um konsistente pixelbasierte Bewegungen und Bilder zu erzielen. Sie können sogar so weit gehen, dass Sie mit dem Post Processing Stack alle möglichen coolen Retro-Bildschirmeffekte hinzufügen. Bevor diese Arbeiten jedoch durchgeführt werden können, müssen Ihre Assets importiert und korrekt eingerichtet werden.

Vorbereiten von Sprite-Assets

Unsere Assets benötigen zunächst eine korrekte Konfiguration, um klar und deutlich zu sein. Wählen Sie für jedes Asset, das Sie verwenden, das Asset in der Projektansicht aus, und ändern Sie dann die folgenden Einstellungen im Inspektor:

  • Filtermodus auf 'Punkt' geändert
  • Komprimierung geändert in 'Keine
Filter-Modus

Andere Filtermodi führen zu einem leicht unscharfen Bild, das den von uns angestrebten scharfen Pixel-Art-Stil zunichte macht. Bei der Komprimierung werden die Daten des Bildes komprimiert, was zu einem gewissen Verlust an Genauigkeit gegenüber dem Original führt. Dies ist wichtig zu beachten, da es dazu führen kann, dass einige Pixel ihre Farbe ändern, was möglicherweise zu einer Änderung der gesamten Farbpalette führt. Je weniger Farben und je kleiner Ihr Sprite ist, desto größer ist der visuelle Unterschied, den die Komprimierung bewirkt. Hier ist ein Vergleich zwischen normaler Kompression (Standard) und keiner Kompression.

Normale Komprimierung / Keine Komprimierung sieht originalgetreu aus
Normale Komprimierung / Keine Komprimierung sieht originalgetreu aus

Ein weiterer Punkt, den Sie beachten sollten, ist die Einstellung der maximalen Größe für das Bild im Inspektor. Wenn die Größe Ihres Sprite-Bildes auf einer Achse größer ist als die Eigenschaft "Max Size" (standardmäßig 2048), wird es automatisch auf die maximale Größe angepasst. Dies führt in der Regel zu einem gewissen Qualitätsverlust und zu einem unscharfen Bild. Da manche Hardware Texturen über 2048 auf einer der beiden Achsen nicht richtig unterstützt, ist es eine gute Idee zu versuchen, innerhalb dieser Grenze zu bleiben.

Maximale Größe auf 2048 eingestellt / Jetzt mit der maximalen Größe auf 4096 eingestellt
Maximale Größe auf 2048 eingestellt / Jetzt mit der maximalen Größe auf 4096 eingestellt

Oben sehen Sie ein Sprite aus einem Spritesheet, das 2208 auf einer Achse mit einer maximalen Größe von 2048 war. Wie Sie sehen können, ermöglicht die Erhöhung der Eigenschaft Max Size auf 4096, dass das Bild eine angemessene Größe hat und keine Qualitätseinbußen auftreten.

Wenn Sie Ihr Sprite oder Sprite Sheet vorbereiten, stellen Sie sicher, dass Sie den Pivot-Einheitsmodus auf "Pixel" statt auf "Normalisiert" einstellen.

Modus "Pixel

Dadurch wird der Drehpunkt des Sprites auf Pixeln basieren und nicht auf einem glatten Bereich von 0 bis 1 auf jeder Achse des Bildes. Wenn das Sprite nicht exakt von einem Pixel aus schwenken würde, würde die Pixelgenauigkeit verloren gehen. Pivots können für Sprites im Sprite-Editor gesetzt werden, der vom Inspektor aus geöffnet werden kann, wenn Sie ein Sprite-Asset ausgewählt haben.

Sprite-Inspektor
Installation des 2D Pixel Perfect Pakets

Mit den vorbereiteten Assets können wir unsere Kamera so einstellen, dass sie "pixel-perfekt" ist. Ein pixel-perfektes Ergebnis sieht sauber und klar aus. Zu den verräterischen Anzeichen für Pixelkunst, die nicht pixelgenau dargestellt wird, gehören Unschärfe (Aliasing) und einige Pixel, die rechteckig erscheinen, obwohl sie quadratisch sein sollten.

Das 2D Pixel Perfect-Paket kann über den Paketmanager in Unity importiert werden. Klicken Sie in der Symbolleiste auf das Menü "Fenster" und dann auf "Paketmanager". Klicken Sie in dem neuen Fenster auf "Erweitert" und vergewissern Sie sich, dass Sie "Vorschaupakete anzeigen" aktiviert haben. Wählen Sie 2D Pixel Perfect aus der Liste auf der linken Seite und wählen Sie oben rechts im Fenster die Option Installieren.

Pixel perfekt

Das war's. Jetzt können Sie die pixelgenaue Kamerakomponente verwenden.

Ein hohes Maß an Pixel-Perfektion

Die Pixel Perfect Camera Komponente ist eine Ergänzung und Erweiterung der Unity Kamera Komponente. Um sie hinzuzufügen, gehen Sie zu Ihrer Hauptkamera und fügen Sie ihr die Komponente Pixel Perfect Camera hinzu. Wenn die Pixel Perfect Camera-Komponente nicht vorhanden ist, folgen Sie den oben genannten Anweisungen, um sie zunächst in das Projekt zu importieren.

Komponente hinzufügen

Schauen wir uns nun die verfügbaren Einstellungen an.

Kamera-Komponente

Zunächst empfehle ich, die Option "Im Bearbeitungsmodus ausführen" zu aktivieren und das Anzeige-Seitenverhältnis in der Spielansicht auf "Freies Seitenverhältnis" einzustellen, damit Sie die Größe der Spielansicht frei ändern können. Die Komponente zeigt in der Spielansicht hilfreiche Meldungen an, die erklären, wenn die Anzeige bei einer bestimmten Auflösung nicht pixelgenau ist.

Seitenverhältnis

Jetzt kannst du jede Einstellung durchgehen, um zu sehen, was sie bewirkt und wie sie das Aussehen deines Spiels beeinflusst!

  • Assets Pixel pro Einheit - Dieses Feld bezieht sich auf die Einstellung, die Sie im Inspektor für jedes Asset wählen können. Als Faustregel gilt, dass jedes Asset, das in der Spielwelt verwendet wird, dieselbe Pixelanzahl pro Einheit (PPU) verwenden sollte, und diesen Wert geben Sie hier ebenfalls an. Wenn Ihre Spielwelt aus einem Raster von Kacheln und Sprites besteht, von denen jede 16 mal 16 Pixel groß ist, würde eine PPU von 16 Sinn machen - jede Kachel des Rasters wäre eine Einheit in Weltraumkoordinaten. Stellen Sie sicher, dass Sie das von Ihnen gewählte PPU hier eintragen.
  • Referenzauflösung - Stellen Sie hier die Auflösung ein, mit der alle Assets angezeigt werden sollen. Wenn Sie einen Retro-Look wünschen, bedeutet dies in der Regel eine sehr geringe Auflösung. Die native Auflösung des Sega Genesis beträgt zum Beispiel 320x224. Wenn wir ein Spiel von Sega Genesis portieren, würden wir eine Referenzauflösung von 320x224 verwenden. Für den allgemeinen 16:9-Gebrauch sollten 320x180 sowie 398x224 (wenn Sie stattdessen die vertikale Auflösung beibehalten wollen) gut funktionieren.
  • Upscale Render Texture - Dies bewirkt, dass die Szene so nah wie möglich an der Referenzauflösung gerendert und dann hochskaliert wird, um sie an die tatsächliche Bildschirmgröße anzupassen. Da diese Einstellung zu einem gefüllten Bildschirm führt, empfehlen wir sie, wenn Sie eine pixelgenaue Vollbilddarstellung ohne Ränder wünschen. Upscale Render Texture' wird auch das Aussehen von Sprites beim Drehen erheblich beeinflussen.
1. Original (nicht gedreht) 2. Ohne Upscale Render-Textur (um 45 Grad gedreht, Pixel-Perfektion geht verloren, da die Pixelgröße an den diagonalen Kanten variiert) 3. Mit Upscale Render Texture (um 45 Grad gedreht, bleibt die Pixel-Perfektion erhalten, da alle Pixel die gleiche Größe haben, aber das Sprite sieht im Vergleich zum Original weniger genau aus).
1. Original (nicht gedreht) 2. Ohne Upscale Render-Textur (um 45 Grad gedreht, Pixel-Perfektion geht verloren, da die Pixelgröße an den diagonalen Kanten variiert) 3. Mit Upscale Render Texture (um 45 Grad gedreht, bleibt die Pixel-Perfektion erhalten, da alle Pixel die gleiche Größe haben, aber das Sprite sieht im Vergleich zum Original weniger genau aus).
  • Pixel Snapping (nur verfügbar, wenn Upscale Render Texture deaktiviert ist) - Wenn diese Option aktiviert ist, werden Sprite-Renderer automatisch an einem Weltraumraster ausgerichtet, wobei die Größe des Rasters auf der von Ihnen gewählten PPU basiert. Beachten Sie, dass dies keine Auswirkungen auf die Transformationspositionen der Objekte hat. Das Ergebnis ist, dass Sie immer noch nahtlos zwischen Objekten interpolieren können, aber die visuelle Bewegung bleibt pixelgenau und rasant.
  • Beispiel:
Pixel Snapping deaktiviert. Mit unserem Hintergrund an der Position (0, 0) und unserem Charakter-Sprite an (1.075, 0), erhalten wir einige Pixel, die nicht korrekt ausgerichtet sind. Beachten Sie, dass es einige Pixel gibt, die nur halb vom Schatten verdeckt werden. Pixel Snapping aktiviert. Gleiche Positionen - Hintergrund (0, 0) und Zeichen-Sprite (1,075, 0). Die Pixel rasten perfekt zusammen.
Pixel Snapping deaktiviert. Mit unserem Hintergrund an der Position (0, 0) und unserem Charakter-Sprite an (1.075, 0), erhalten wir einige Pixel, die nicht korrekt ausgerichtet sind. Beachten Sie, dass es einige Pixel gibt, die nur halb vom Schatten verdeckt werden. Pixel Snapping aktiviert. Gleiche Positionen - Hintergrund (0, 0) und Zeichen-Sprite (1,075, 0). Die Pixel rasten perfekt zusammen.
  • Rahmen beschneiden (X und Y) - Damit wird der angezeigte Bereich des Weltraums so beschnitten, dass er genau der Referenzauflösung entspricht, und es werden schwarze Ränder hinzugefügt, um die Lücken an den Bildschirmrändern zu füllen.
  • Füllung strecken - Wird verfügbar, wenn Sie sowohl x als auch y für Rahmen zuschneiden aktivieren. Dies bewirkt, dass die Kamera auf die Spielansicht skaliert wird, so dass sie auf den Bildschirm passt und das Seitenverhältnis erhalten bleibt. Da diese Skalierung nicht nur in ganzzahligen Vielfachen der Referenzauflösung erfolgt, geht die Pixelgenauigkeit bei jeder Auflösung verloren, die kein ganzzahliges Vielfaches der Referenzauflösung ist. Der Vorteil dabei ist, dass Sie zwar bei vielen Auflösungen die Pixelgenauigkeit verlieren, aber keine schwarzen Balkenränder haben und stattdessen einen vollständig ausgefüllten Bildschirm erhalten. Beachten Sie, dass die übliche Warnmeldung nicht angezeigt wird, obwohl es häufig zu Unschärfen durch Dehnungsfüllung kommt.
Charakter und Hintergrund unscharf durch Dehnungsfüllung
Charakter und Hintergrund unscharf durch Dehnungsfüllung
Empfehlungen zur Verwendung der Pixel Perfect Camera

Wenn Sie ein pixelgenaues und flottes Display wollen, das für eine Vielzahl von Anwendungsfällen geeignet ist, empfehle ich es Ihnen:

  • Verwenden Sie eine Referenzauflösung, die nie größer als die Fensterauflösung eines Players ist (z. B. 320x180).
  • Upscale-Rendertextur aktivieren oder deaktivieren
  • Aktivieren Sie es, wenn Sie Drehungen außerhalb von 90, 180 und 270 verwenden und wenn Sie den visuellen Effekt auf gedrehte Sprites bevorzugen.
  • Eine hochskalierte Rendertextur kann bei einigen Auflösungen zu einem nicht pixelgenauen Bild führen, je nach Referenzauflösung. Experimentieren Sie damit und mit verschiedenen Bildschirmauflösungen, indem Sie auf dem Pixel die Option "Im Bearbeitungsmodus ausführen" aktivieren. Perfect Camera-Komponente, um festzustellen, ob dies ein Problem für Ihre Auflösung ist. Wenn Sie auf diese Weise ein pixelgenaues Bild bei allen Zielauflösungen erzeugen können, bietet dies die beste pixelgenaue Vollbilddarstellung.
  • Aktivieren oder deaktivieren Sie Pixel Snapping je nach Wunsch
  • Das ist mehr eine persönliche Vorliebe als alles andere. Ohne das Einrasten ist die Bewegung viel flüssiger, aber die Pixel können nicht richtig ausgerichtet sein.
  • Aktivieren Sie Frame X und/oder Y beschneiden, wenn Sie keine hochskalierte Rendertextur verwenden.
  • Wenn Sie mit der hochskalierten Rendertextur nicht durchgängig ein pixelgenaues Ergebnis erzielen können, sorgt das Beschneiden von X und/oder Y für ein pixelgenaues Bild bei jeder Auflösung, die größer ist als die Referenzauflösung, erzeugt aber bei einigen Auflösungen große Ränder an den Bildschirmrändern.
  • Dehnbare Füllung deaktivieren

Wir empfehlen, die Kamera so einzustellen, dass sie für das Seitenverhältnis 16:9 optimiert ist, wenn möglich einschließlich der Referenzauflösung. Zum Zeitpunkt der Erstellung dieses Artikels spielen die meisten Gamer auf 16:9-Monitoren mit einer Auflösung von 1920x1080. Zum Beispiel ist die Referenzauflösung 320x180 16:9 und hat daher keine schwarzen Balken, wenn sie mit 1920x1080 oder einer anderen Auflösung, die ein gerades Vielfaches von 320x180 ist, wie z. B. 1280x720, abgespielt wird.

In der Symbolleiste von Unity können Sie unter Bearbeiten > Projekteinstellungen > Player die vom Spiel unterstützten Seitenverhältnisse einschränken. Wenn Sie feststellen, dass eine bestimmte Konfiguration in dem von Ihnen gewünschten Verhältnis funktioniert, aber in bestimmten Seitenverhältnissen schlecht aussieht, können Sie hier verhindern, dass das Fenster in diesen Verhältnissen angezeigt wird. Denken Sie jedoch daran, dass nicht alle Benutzer eine Bildschirmeinstellung haben, die mit Ihren Einschränkungen gut funktioniert, daher wird dies nicht empfohlen. Aktivieren Sie stattdessen das Zuschneiden, damit diese Nutzer Ränder haben und nicht in einer Auflösung spielen müssen, die nicht auf ihren Bildschirm passt.

Erstellung authentischer NES-Grafiken im Stil des NES

Nachdem wir uns nun damit beschäftigt haben, wie man Unity für pixelgenaue Grafiken einrichtet, wollen wir uns nun die Grundlagen der Erstellung von Grafiken für Spiele ansehen, die den Einschränkungen des klassischen Nintendo Entertainment Systems folgen. Diese Konsolengeneration legt den Künstlern, die versuchen, ein authentisches Bild zu schaffen, eine Vielzahl von Beschränkungen auf. Zu diesen Einschränkungen gehören Dinge wie die verwendeten Paletten sowie die Größe und Anzahl der Objekte auf einem Bildschirm. Außerdem ist es wichtig, die Referenzauflösung von 256x240 zu beachten, wenn man diese Konsole "anvisiert".

Palettes

Bei der Erstellung von Kunstwerken für das NES gibt es eine Reihe von Einschränkungen, die der Künstler beachten muss. Einige davon gelten unabhängig davon, welche Retro-Konsole ein Künstler zu emulieren versucht, während viele andere spezifisch für das NES selbst sind. Die erste und möglicherweise wichtigste dieser Einschränkungen betrifft die Art und Weise, wie Farbpaletten in einem Bild verwendet werden. Das NES ist in Bezug auf seine Farbpalette ziemlich einzigartig, da die gesamte Farbpalette der Konsole fest in die Konsole einprogrammiert ist. Das NES wählt die in einem Bild zu verwendenden Farben aus, indem es eine Reihe von Werten an den Grafikprozessor des NES sendet, der dann die mit diesen Werten verbundenen Farben zurückgibt. Unten sehen Sie ein Bild der Farbpalette des NES:

Palettes

Diese Farben können nicht geändert werden, da sie Teil der Konsole selbst sind. Jedes Spiel, das Sie jemals für diese Konsole gesehen haben, verwendet Kombinationen dieser Farben, um ihre Bilder zu erstellen.

Unterpaletten

Um die im Spiel verwendeten Kombinationen zu erstellen, werden Unterpaletten erstellt und entweder den Sprites im Spiel oder den Hintergrundelementen zugewiesen. Das NES teilt seine Palette in Unterpaletten auf, die Sprites und Hintergründen zugewiesen werden können. Jede Unterpalette enthält eine gemeinsame Farbe, die in allen Unterpaletten verwendet wird, und drei einzigartige Farben. Es kann vier Unterpaletten für die Hintergründe und vier Unterpaletten für die Sprites laden. Im Falle der Sprites wird die gemeinsame Farbe am Anfang jeder Unterpalette als Transparenz behandelt.

Unterpaletten

Dies ist ein Beispiel für eine Reihe von Unterpaletten, die in einem Spiel verwendet werden. Die obere Reihe stellt die Hintergrund-Unterpaletten dar und die untere Reihe die Sprite-Unterpaletten. In diesem Beispiel wird Schwarz als gemeinsame Farbe verwendet, die für alle Unterpaletten gilt. Da die gemeinsame Farbe auf Sprites als Transparenz behandelt wird, ist ein zweiter schwarzer Paletteneintrag für die Sprite-Unterpaletten erforderlich, um sie als sichtbare Farbe zu verwenden.

Zuordnung von Unterpaletten

Die Beschränkungen für die Verwendung der Paletten werden noch enger, wenn der Künstler dazu übergeht, wie die Paletten im Spiel verwendet werden. Um dies zu erklären, ist eine weitere Diskussion darüber erforderlich, wie Retro-Konsolen Kunst speichern, verwenden und darstellen. Das Bildmaterial jeder Retro-Konsole wird im Spiel als 8x8 Pixel große Kacheln gespeichert. Mit diesem kachelbasierten Ansatz können Künstler Platz sparen, indem sie die Kacheln für verschiedene Dinge wiederverwenden. (Zum Beispiel können Teile eines Bürgersteigs wiederverwendet werden, um einen Vorsprung an einem Gebäude zu schaffen). Ein weiterer wichtiger Punkt bei der kachelbasierten Speicherung ist, dass die Farbinformationen im Allgemeinen nicht zusammen mit den Grafiken gespeichert werden. Alle Kacheln sind in einer monochromen Farbpalette gehalten. Auf diese Weise kann jeder Kachel, die im Spiel angezeigt wird, eine Unterpalette zugewiesen werden, so dass dieselbe Kachel gleichzeitig mit verschiedenen Unterpaletten auf dem Bildschirm angezeigt werden kann. Dies ist von Bedeutung, wenn Sie Grafiken erstellen, die einer Retro-Konsole auf einer modernen Plattform entsprechen, da dies Auswirkungen darauf hat, wie Sie den Grafiken Paletten zuweisen.

Das NES ordnet die Paletten den Sprites und Hintergründen anders zu. Es ordnet Unterpaletten für Sprites auf einer Kachel-für-Kachel-Basis zu. Das bedeutet, dass jeder 8x8-Kachel in einem Sprite eine der vier Sprite-Unterpaletten zugewiesen werden kann.

Dieser Ninja-Charakter verwendet zwei Unterpaletten, um ihm eine größere Farbtiefe zu verleihen. Auf der rechten Seite sehen Sie die Aufteilung in einzelne 8x8 Sprite-Kacheln. Mit dieser geteilten Ansicht wird es offensichtlicher, dass das helle Teal und das dunkelste Rot, die im Schwert und im Stirnband verwendet werden, nur für diese Spielsteine gelten, während die dunkelvioletten und schwarzen Umrissstücke in den übrigen drei Spielsteinen verwendet werden.
Dieser Ninja-Charakter verwendet zwei Unterpaletten, um ihm eine größere Farbtiefe zu verleihen. Auf der rechten Seite sehen Sie die Aufteilung in einzelne 8x8 Sprite-Kacheln. Mit dieser geteilten Ansicht wird es offensichtlicher, dass das helle Teal und das dunkelste Rot, die im Schwert und im Stirnband verwendet werden, nur für diese Spielsteine gelten, während die dunkelvioletten und schwarzen Umrissstücke in den übrigen drei Spielsteinen verwendet werden.

Hintergründe hingegen sind wesentlich restriktiver. Hintergründe weisen ihre Paletten in 16x16-Blöcken zu. Die Zuordnungen der Unterpaletten für den gesamten Hintergrund eines Bildes werden als Attributtabellen bezeichnet. Diese Attributtabellen sind der Grund dafür, dass die meisten Retro-Kunstwerke stark von sich wiederholenden Kachelsegmenten Gebrauch machen. Diese Segmente werden in der Regel aus 16x16 Kacheln zusammengesetzt, damit sie in eine Attributtabelle passen. Obwohl es sich um eine Reaktion auf eine Hardware-Beschränkung handelte, wurde dieser auf 16x16 Kacheln basierende Ansatz für Hintergründe zu einem bestimmenden Merkmal von Retro-Kunstwerken und ist absolut notwendig, wenn man versucht, sie nachzubilden.

Dies ist ein Beispiel für einen schönen RPG-Stil Stadt Hintergrund innerhalb der Grenzen gemacht
Dies ist ein Beispiel für einen schönen RPG-Stil Stadt Hintergrund innerhalb der Grenzen gemacht
Sprite-Überlagerung

Auch wenn es den Künstlern freisteht, für jede 8x8-Kachel eines Sprites verschiedene Unterpaletten zu verwenden, kann es vorkommen, dass sie in einem Sprite eine größere Farbtiefe als die bereits vorhandene wünschen. Hier kann Sprite-Layering zum Einsatz kommen. Beim Sprite-Layering wird ein Sprite einfach in zwei separate Sprites aufgeteilt und diese dann übereinander gelegt. So können Künstler die Beschränkung auf eine Unterpalette pro 8x8-Kachel umgehen. Auf diese Weise können Künstler die Anzahl der Farben, die in einem einzigen 8x8-Feld verwendet werden können, im Wesentlichen verdoppeln. Der einzige große Nachteil dabei ist, dass das Rendering von Sprites begrenzt ist. Das NES kann nur 64 8x8-Sprite-Kacheln auf einmal auf dem Bildschirm darstellen, und nur 8 Sprite-Kacheln in derselben horizontalen Linie miteinander. Sobald diese Zahlen erreicht sind, werden keine weiteren Sprite-Kacheln mehr auf dem Bildschirm dargestellt. Aus diesem Grund flackerten viele NES-Spiele, wenn viele Sprites gleichzeitig auf dem Bildschirm zu sehen waren. Auf diese Weise werden nur bestimmte Sprites auf abwechselnden Frames angezeigt. Diese Grenzen sind etwas, worauf Künstler achten müssen, wenn sie Sprites übereinander legen, denn dadurch verdoppelt sich zwar die Anzahl der Farben, aber auch die Anzahl der Sprite-Kacheln auf derselben horizontalen Linie.

Dies ist ein Beispiel für Sprite Layering in Aktion. Von links nach rechts: die ursprüngliche dreifarbige Version des Geisterpiraten-Sprites. Von dort aus teilte der Künstler das Bild in zwei Teile auf, den Körper/Hut und das Gesicht/die Hände, und wies ihnen verschiedene Farben zu. Schließlich sehen Sie das Ergebnis, wenn Sie die beiden Teile übereinander legen.
Dies ist ein Beispiel für Sprite Layering in Aktion. Von links nach rechts: die ursprüngliche dreifarbige Version des Geisterpiraten-Sprites. Von dort aus teilte der Künstler das Bild in zwei Teile auf, den Körper/Hut und das Gesicht/die Hände, und wies ihnen verschiedene Farben zu. Schließlich sehen Sie das Ergebnis, wenn Sie die beiden Teile übereinander legen.

Sprite-Layering kann auch mit dem Hintergrund durchgeführt werden, um die Grenzen der Attributtabelle zu umgehen. Dieser Trick wird in der Regel für statische Bilder wie Story Screens und Charakterporträts verwendet, um ihnen eine größere Farbtiefe zu verleihen. Zu diesem Zweck zeichnete der Künstler einen Teil des Bildes als Hintergrund und legte dann Sprites darüber, um den Rest auszufüllen.

Das Porträt des Geisterpiraten verwendet auch Sprite-Layering, um ihm eine größere Tiefe zu verleihen. Sein grüner Schädel wird auf dem Bildschirm als Sprite gerendert, während sein Kragen und sein Hut als Teil des Hintergrunds gerendert werden. Dadurch kann der Künstler mehr Farben innerhalb einer 16x16-Fläche verwenden, um die Beschränkung der Attributtabelle vollständig zu umgehen.
Das Porträt des Geisterpiraten verwendet auch Sprite-Layering, um ihm eine größere Tiefe zu verleihen. Sein grüner Schädel wird auf dem Bildschirm als Sprite gerendert, während sein Kragen und sein Hut als Teil des Hintergrunds gerendert werden. Dadurch kann der Künstler mehr Farben innerhalb einer 16x16-Fläche verwenden, um die Beschränkung der Attributtabelle vollständig zu umgehen.
Grafiken Banken

Um die nächste große Einschränkung des NES zu erklären, müssen wir zunächst auf die Tatsache zurückkommen, dass die Grafiken in Kacheln gespeichert werden. Grafikkacheln werden in 256 Kachelseiten gespeichert, und die Kacheln dieser Seiten können nicht an verschiedenen Stellen in den VRAM geladen werden, so dass es schwierig ist, Kacheln aus verschiedenen Seiten im laufenden Betrieb zu mischen und anzupassen. Der VRAM des NES ist nur in der Lage, 512 dieser Kacheln auf einmal darzustellen. Über diese Einschränkung hinaus werden die Kacheln für Sprites und Hintergrund in zwei Hälften geteilt. Das bedeutet, dass es nur 256 Sprite-Kacheln und 256 Hintergrundkacheln zu einem bestimmten Zeitpunkt anzeigen kann. Dies kann sehr einschränkend sein, wenn der Künstler eine große Vielfalt an Sprites und Hintergrundelementen darstellen möchte.

Dies ist eine visuelle Darstellung der Hintergrund- und Sprite-Kacheln eines Spiels, die in den VRAM geladen werden. Die Konsole sorgt dafür, dass Hintergründe und Sprites auf separaten Seiten geladen werden.

Um dieser Einschränkung entgegenzuwirken, verfügt das NES über eine Funktion, die es dem Künstler ermöglicht, jede Seite in Teilseiten, so genannte Bänke, aufzuteilen. Während das NES also nicht in der Lage ist, einzelne Kacheln von verschiedenen Punkten in den Grafikdaten zu laden, ist es in der Lage, verschiedene Abschnitte einer Seite zu verschiedenen Zeiten zu laden. Bei den meisten Spielen werden diese Bänke entweder 1K- oder 2K-Bänke sein. Eine 1K-Bank entspricht einem Viertel einer Seite oder 64 Kacheln, während eine 2K-Bank die Hälfte einer Seite oder 128 Kacheln ist. Der Künstler muss entscheiden, ob er jede Bank für Sprites oder Hintergrundelemente reservieren möchte, da beide Arten von Bänken verwendet werden müssen. Das bedeutet, dass Sie keine 1K-Bänke sowohl für die Sprites als auch für die Hintergründe haben können. Eine Seite muss 1K-Banken und die andere 2K-Banken verwenden. Im Allgemeinen neigen die meisten Spiele dazu, 1K-Bänke für die Sprites und 2K-Bänke für die Hintergründe zu verwenden, da die Hintergrund-Tilesets eher statisch sind und weniger Abwechslung brauchen.

Hier sieht man, wie das obige Bild in Banken aufgeteilt wurde. Der Hintergrundbereich auf der linken Seite verwendet 2K-Bänke, d.h. er ist in der Mitte geteilt, während der Sprite-Bereich auf der rechten Seite 1K-Bänke verwendet. Jede Bank kann im laufenden Betrieb frei gewechselt werden.

Die Nützlichkeit von 1K-Banken für Sprites ist ziemlich bedeutend. Wenn das Spielersprite eine große Anzahl von Animationen hat, die zusammen mit allen anderen Sprites, die geladen werden müssen, nicht auf eine einzige Seite passen, können einzelne Aktionen in 1K-Bänken gespeichert werden und dann je nach Aktion auf dem Bildschirm ausgetauscht werden. Es ermöglicht auch eine größere Vielfalt an Sprites, die in einem einzigen Bereich eines Spiels verwendet werden können. Wenn der Spieler beispielsweise in einem Spielbereich auf sechs verschiedene Arten von Feinden trifft, die Sprite-Seite aber nur den Spieler und drei andere Arten von Sprites zulässt, kann das Spiel, wenn eine Feindart vom Bildschirm verschwunden ist, eine der Feindbänke gegen eine neue Feindart austauschen.

Einer der einzigen großen Nachteile der Verwendung von 1K-Bänken für Sprites und 2K-Bänken für Hintergründe ist die Art und Weise, wie das NES die Hintergrundanimation handhabt. Um ein Hintergrundelement für ein NES-Spiel zu animieren, muss der Künstler doppelte Bänke der animierten Hintergrundelemente erstellen. Jede neue Duplikatbank enthält das nächste Bild der Animation für jedes der animierten Elemente. Diese Bänke werden dann wie bei einem Daumenkino nacheinander ein- und ausgeblendet, um die Animation zu erstellen. Wenn der Künstler halbseitige Bänke für die Hintergründe verwendet, kann die Speicherung all dieser doppelten Bänke eine Menge Platz beanspruchen. Eine Möglichkeit, dies zu umgehen, besteht darin, alle animierten Hintergrundelemente für das gesamte Spiel in einer einzigen Bank zu speichern. Das bedeutet aber auch, dass dem Künstler nur 128 Kacheln für die statischen Elemente jedes Hintergrunds zur Verfügung stehen. Es ist Sache des Künstlers, zu entscheiden, welche Art von Banken er für seine Kunst verwenden will, und wie er dabei am besten vorgeht.

Layering-Tricks

Viele Spiele aus dieser Zeit verwenden Tricks, um Effekte wie Parallaxen-Scrolling im Hintergrund zu erzeugen, aber auch diese stellen die Künstler und Designer vor eine Herausforderung. Während die späteren 16-Bit-Konsolen mehrere Hintergrundebenen zuließen, ist dies auf dem NES nicht möglich. Alle Hintergründe sind ein einziges abgeflachtes Bild. Um ein Gefühl von Tiefe und Überlagerung zu erzeugen, wurden verschiedene Programmiertricks eingesetzt. Um zum Beispiel einen Parallaxenhintergrund zu erstellen, kann der Entwickler ein Register setzen, das erkennt, wann eine bestimmte horizontale Linie (eine so genannte Rasterlinie) auf dem Bildschirm gerendert wird. Mit diesem Register können sie dann die Geschwindigkeit und die Richtung des Bildlaufs auf dem Bildschirm steuern. Auf diese Weise können sie eine horizontale Reihe des Hintergrunds erstellen, die mit einer anderen Geschwindigkeit als der Rest des Hintergrunds scrollt. Der Trick für die Künstler und Designer an diesem Punkt ist, darauf zu achten, dass der Hintergrund immer noch ein flaches Bild ist. Wenn eine Plattform oder ein anderes Element, das sich vor dem sich langsamer bewegenden Hintergrund befinden soll, in diesem Bereich platziert wird, wird auch dieses Element langsamer als der Rest des Bildes verschoben. Das bedeutet, dass die Designer darauf achten müssen, wo sie die Hintergrundelemente in der Szene platzieren, und dass die Künstler den Hintergrund so gestalten müssen, dass der Effekt nahtlos ist.

In diesem Beispielbildschirm könnte der rot hervorgehobene Bereich so eingestellt werden, dass er langsamer rollt als der restliche Hintergrund, um Tiefe zu simulieren. Das darüber liegende Heads-Up-Display wird so eingestellt, dass es sich nicht mitbewegt, obwohl es ebenfalls Teil des flachen Hintergrundbildes ist.

Es gibt noch einen weiteren Trick für Künstler, die eines ihrer Hintergrundelemente im Vordergrund erscheinen lassen möchten. Auf dem NES können die Entwickler die Priorität eines Sprites auf einen Wert kleiner als Null setzen. In diesem Fall wird das Sprite hinter allen nicht-transparenten Hintergrundpixeln angezeigt. Die Prioritäten der Sprites können auch während des Spiels geändert und ausgelöst werden, so dass bestimmte Elemente die Priorität eines Sprites nach Bedarf ändern können.

Fazit

Wenn jemand versucht, ein Projekt zu erstellen, das einer Retro-Konsole nachempfunden ist, müssen viele technische Überlegungen angestellt werden, die für die moderne Entwicklung nicht unbedingt von Belang sind. Aufgrund der Art und Weise, wie ältere Maschinen Bilder rendern und mit dem geringen Spielraum von CPU und GPU umgehen, mussten die Designer kreativ sein, um die Einschränkungen der Hardware zu umgehen. In der heutigen Zeit ist es wichtig, sich mit diesen Einschränkungen und Techniken vertraut zu machen, um das Aussehen und das Design der Spiele aus dieser Zeit wirklich nachempfinden zu können. Im nächsten Beitrag werden wir uns mit den Design-Beschränkungen der 16-Bit-Ära befassen sowie mit der Unity-Arbeit, die erforderlich ist, um ein echtes "Old TV"-Gefühl zu erzeugen. Die 2D Pixel Perfect-Anleitung für 16-Bit-Retro-Visuals ist jetzt hier erhältlich.

---

Entwerfen Sie zum ersten Mal Level mit Tilemap? In diesem Einsteiger-Tutorial auf Unity Learn lernen Sie das Worldbuilding in 2D kennen.