Fügen Sie 2D-Sprites mithilfe von handgezeichneten normalen Karten Tiefe hinzu


Pixelkunst ist ewig, aber dies bedeutet nicht, dass die Werkzeuge und Techniken für die Arbeit damit auf dem Niveau von 1993 bleiben sollten.

Der britische Spieleentwickler Cardboard Sword arbeitet an dem zweidimensionalen Stealth-Plattformspiel The Siege and the Sandfox , das in Unreal Engine 4 mit Paper2D erstellt wurde. Das Team veröffentlicht eine Reihe von Entwicklungstagebüchern, in denen andere Entwickler in die Verwendung dieser Tools in ihren eigenen Spielen eingeführt werden.

Eines der wichtigsten technischen Merkmale von The Siege and the Sandfox ist die Verwendung von handgezeichneten Kachelsätzen und Sprites mit normalen Karten, sodass Sie in diesem Spiel dreidimensionale Beleuchtungsmethoden mit einer ziemlich traditionellen zweidimensionalen Pixelkunst verwenden können.

Eine der Art Direktoren von Cardboard Sword, Kate Duke-Cox, erzählte Gamasutra kürzlich, wie das Unternehmen zu dieser Technik kam, warum sie zum Spiel passt und wie Sie ähnliche Techniken in Ihren eigenen 2D-Spielen anwenden können.

Fügen Sie ein Gefühl von Tiefe hinzu


Was sind die Vorteile normaler Karten im Vergleich zu herkömmlicher flacher Beleuchtung in einem 2D-Spiel?

Kate Duke-Cox : Die Aufgabe des Art Directors besteht ausschließlich darin, einen individuellen Stil zu finden und den gewünschten Effekt zu erzielen. Wir wollten, dass unsere Kunst reich, tief und „konvex“ ist. Normalen erlaubten es, dieses Ziel zu erreichen und der Welt und ihren Objekten ein Gefühl von Form und Stärke zu verleihen.


Dieses Bild, das Keith Duke Cox im August 2017 auf Twitter gepostet hat, ist ein beeindruckendes Beispiel für eine Technik.

Zum Beispiel verleiht die Verwendung von Normalen Gefahrenquellen ein greifbareres Aussehen. Das Licht reagiert korrekter auf die Oberfläche, und ohne Normalen wurde das Gefühl eines sehr flachen „Blattes Papier“ erzeugt.


Bei korrekter Verwendung können normale Karten den Objekten in der Szene ein Gefühl von Tiefe und Gewicht verleihen, das flache 2D-Bilder nicht erreichen können.

Die Verwendung normaler Karten ist eher eine visuelle Lösung als eine funktionale Gameplay-Wahl. Wir wollten, dass der Spieler tiefer in die Umgebung eintaucht, damit der Parkour ein Gefühl von Tiefe und physischer Authentizität vermittelt und nicht den Eindruck von Papierschnittmustern, die für einige Pixelspiele typisch sind. Wenn Sie sich für helle und einfache Farben oder im Retro-Stil entscheiden, ist eine flache Beleuchtung durchaus geeignet.

Was hat Sie anfangs dazu bewegt, normale Karten für die 2D-Beleuchtung zu verwenden? Wie haben Sie davon erfahren oder wo haben Sie eine Qualitätsimplementierung gesehen?

Das Anwenden von Normalen auf 2D-Grafiken war eine natürliche Fortsetzung ihrer Verwendung in 3D, was auf älteren Systemen, die wir bei der Erstellung des Stils inspiriert hatten, nicht möglich war. Natürlich waren wir nicht die ersten, die sie in modernen Pixelkunstspielen verwendeten, aber die Ergebnisse waren unterschiedlich.

Zuerst haben wir uns geweigert, diesen Effekt zu verwenden, da er bei vielen der Effekte, die wir gesehen haben, den Charme und die Ästhetik der Pixelkunst zerstörte und ihr zu viel metallischen Glanz verlieh. Bei unserem ersten Versuch, handgezeichnete normale Karten von Pixeln für Pixelkunst zu erstellen, haben wir sehr detaillierte Normalen erhalten - schließlich ist dies ihr Hauptziel in 3D-Grafiken. Aber jedes Plättchen in unserem Spiel hat eine Größe von nur 32 x 32 Pixel, sodass nicht zu viele Pixel übrig bleiben, um Oberflächeninformationen zu übertragen. Infolgedessen verwandelte sich das Ergebnis in ein lautes Chaos.

Aber dann sahen wir Gwenael Massets Kunst für tote Zellen , in der Pixelkunst mit Normalen sehr gut gemacht wurde, und beschlossen, ihm eine zweite Chance zu geben. [Hier ist ein Artikel über die Verwendung von 3D-Modellen in diesem zweidimensionalen Spiel.] Dieses Mal haben wir eine normale Karte verwendet, nicht für die kleinen Details von Oberflächen, die in 3D-Grafiken zu sehen sind. Jetzt wurde die normale Karte verwendet, um große Formen der Pixelkunst zu „gestalten“.

Formen mit normalen Karten formen


Können Sie kurz über den Prozess der Entwicklung eines Assets sprechen, insbesondere über die Unterschiede bei der Erstellung eines ähnlichen einfachen Sprite-2D-Assets?

Normalerweise wird Pixelkunst unter Berücksichtigung der "allgemeinen" Lichtrichtung gezeichnet. In unserem Fall fiel bei den meisten Sprites und Vordergrundkacheln das Hauptlicht von oben und leicht nach rechts, und Hintergrundkacheln hatten ein allgemeineres „Kameralicht“, um dunkle Räume zu simulieren und den Spieler nicht vom Vordergrund abzulenken.

Dies bedeutete, dass beim Rendern der Normalen für Sprites und Kacheln bereits die Details und Materialien der Oberflächen ausgewählt wurden. Wir haben festgestellt, dass dieser Ansatz tatsächlich sehr gut funktioniert hat. Er meinte, dass alle Formen und Details, die wir in den Normalen nachahmen mussten, bereits sehr offensichtlich und auffällig waren.

Abhängig von der Art des Sprites, zu dem die Normalen hinzugefügt wurden, haben wir eine Kombination aus dem Zeichnen der Farben der Ecken der Normalen aus der „Kugel normaler Karten“ (tatsächlich ist dies eine Kugel, die als Palette aller möglichen Winkel dient, die auf der Karte tangentialer Normalen gezeichnet werden können) und dem Zeichnen in separaten RGB-Kanälen verwendet Graustufen mit anderen Tools wie ND, Crazybump oder AwesomeBump. Sie halfen bei einigen Formen und mischten verschiedene Teile der Normalen richtig zusammen.


Wir haben Nvidia TextureTools für Photoshop verwendet, um Vektoren nach Abschluss des Zeichnens einer normalen Karte anzupassen / zu normalisieren.

Was sind die Vorteile des Zeichnens manueller normaler Karten wie dieser mit vorgefertigten Tools wie Sprite DLight?

Als wir nach Möglichkeiten suchten, Normalen für ein 2D-Objekt ohne High-Poly-Modell zu erstellen, fanden wir Anwendungen, die diese Aufgabe bis zu einem gewissen Grad ausführten.

Wir haben die Tutorials untersucht, um herauszufinden, wie normale Karten erstellt werden. Wir haben jedoch festgestellt, dass sie entweder Annahmen treffen, die auf den Farbwerten der Pixel basieren und keine vollständig genauen oder vollständig falschen Ergebnisse liefern, oder mehrere Bilder in Graustufen benötigen, um Licht aus verschiedenen Karten zu simulieren Richtungen, im Wesentlichen die normalen Kartenkanäle unabhängig zu erstellen.

Das Programm kann nicht wissen, welche Höhe und welchen Winkel ein Pixel in einem Sprite hat, insbesondere wenn es sich um ein Pixelkunstspiel mit einer sehr begrenzten Palette handelt, bei dem eine Farbe verwendet wird, um die vielen Tiefen und Winkel eines Objekts anzuzeigen. Es ist jedoch erwähnenswert, dass wir diese Programme nicht tatsächlich verwendet haben, sondern lediglich die Aussichten für ihre Anwendung bewertet haben.

Es gibt zwei Standardmethoden für die beschleunigte automatisierte Generierung normaler Karten: Graustufenkonvertierung und Formerkennung. Wir haben Tests mit allen drei Methoden durchgeführt und festgestellt, dass die manuelle Zeichenmethode definitiv die besten Ergebnisse liefert.



Graustufenkonvertierung und Formerkennung können bessere Effekte erzielen als hier gezeigt, aber selbst bei erheblichen Arbeits- und Zeitkosten sind sie immer noch nicht so genau und gut wie manuelles Zeichnen.

Verwenden normaler Karten in nativen 2D-Spielen


Welchen Rat können Sie Entwicklern geben, die Ihren eigenen Weg gehen möchten?

Das manuelle Erstellen genauer 2D-Normalen ist keine leichte Aufgabe. Die Arbeit an allen Vordergrund- und Hintergrundkachelsätzen dauerte ungefähr 3 Mannmonate. Machen Sie sich daher bereit, viel Zeit zu investieren, um qualitativ hochwertige Ergebnisse zu erzielen.

Schnell erstellte Normalen für 2D-Grafiken, insbesondere Pixelgrafiken, sehen normalerweise schlecht aus. Systeme wie „Erstellen einer Lösung mit einer Schaltfläche“ führen häufig zur Erstellung schwacher Assets, die beim Rendern in einem Spiel noch schlechter aussehen als unbeleuchtete Pixelkunst. Testen Sie einen kleinen Teil des Spiels (eine kleine Auswahl von Vordergrund, Hintergrund, Objekten und Charakteren) und finden Sie heraus, was zu Ihnen und zum Stil Ihres Spiels passt.

Andererseits sind die Kosten für das Hinzufügen von Normalen zu unserer Welt in Bezug auf das Rendern sehr gering. Für fast die gesamte Spielwelt hatten wir zwei normale 2k-Karten. Sie beanspruchen nicht viel Speicher und einige zusätzliche Texturen für den normalen Rendering-Durchlauf wirken sich nicht zu stark auf die Draw-Aufrufe aus. Lichtquellen führen dynamisch nur eine Beleuchtung durch, sie werfen nicht Schatten auf alles im Spiel, daher sind sie auch sehr kostengünstig.

Wenn Sie noch nicht verstehen, wie die Normalen des Tangentenraums funktionieren und was sie bedeuten, können Sie sie selbst durch eine kurze Studie viel einfacher zeichnen.

Um diese Methode verwenden zu können, mussten Sie vorhandene Assets anpassen und nicht von Beginn der Entwicklung an implementieren. Können Sie denjenigen Ratschläge geben, die versuchen, die vorgefertigten Sprite-Grafiken durch normale Karten zu ergänzen?

Wenn wir es neu machen müssten, würden wir dasselbe tun: zuerst diffuse Grafiken erstellen und dann die Normalen mit Pixelkunst als Referenz zeichnen.

Vielleicht würden wir einige Objekte etwas anders zeichnen. Es gab Probleme in der Pixelkunst, wenn ein Pixel beispielsweise einen klebenden Nagel oder eine Niete anzeigen konnte, aber dieses Pixel in der normalen Karte kann nur einer Ecke entsprechen, sodass wir einige Elemente größer machen konnten, um die Winkel im Bild besser zu vermitteln.

Wenn Sie eine niedrigere Auflösung als in unseren Kachelsätzen (32 x 32) verwenden, wird Sie die Größe möglicherweise zu sehr einschränken. Mit einer Auflösung von 16 x 16 oder 8 x 8 können Sie Form oder Volumen wahrscheinlich nur dann nicht übertragen, wenn eine Fliese kein großes Teil ist, z. B. ein Stein oder ein Betonblock.

In der Pixelkunst sehen klare Farbverläufe nicht so gut aus wie voluminöse Oberflächen mit scharfen Winkeln. Wenn Ihr Grafikstil dies zulässt, empfehle ich, auf normalen Oberflächen mehr Winkel als Farbverläufe zu verwenden. Wenn Sie beispielsweise einen Lauf haben, stellen Sie sicher, dass jedes einzelne Brett, aus dem es besteht, einen eigenen Winkel hat und der Lauf selbst mehr achteckig als rund ist.

Haben Sie Ratschläge für Entwickler, die diese Techniken außerhalb von Unreal verwenden möchten? Zum Beispiel in Unity oder in Gamemaker.

Bevor Sie beginnen, überprüfen Sie die Ausrichtung der normalen Karte. Der Ansatz zum Zeichnen von Normalen ist für alle Engines gleich, nur was jeder Farbkanal der Karte bedeutet, ist unterschiedlich.

Normalerweise ändert sich bei verschiedenen Motoren nur die Y-Achse (grüner Kanal). Unreal verwendet die Normalen des Y-seitigen Koordinatensystems von DirectX, aber Unity verwendet die Normalen Y + des rechtsseitigen Koordinatensystems OpenGL (wie es uns scheint), daher sollte der grüne Kanal auf den Kopf gestellt werden.

Wenn Sie jedoch falsch gemalt haben, reicht meistens ein einfaches Umdrehen des grünen Kanals aus. Sie werden sehen, dass der Kanal verwirrt ist, wenn das Bild entgegen dem erwarteten Ergebnis beleuchtet wird.

Source: https://habr.com/ru/post/de430754/


All Articles