Laden Sie unser neues 2D-Beispielprojekt herunter: Verlorene Krypta

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Dec 18, 2019|12 Min.
Laden Sie unser neues 2D-Beispielprojekt herunter: Verlorene Krypta
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.

Wir haben unsere neuen 2D-Tools auf Herz und Nieren geprüft und eine 2D-Side-Scroller-Demo erstellt. In diesem Beitrag zeigen wir, wie diese integrierten 2D-Tools Ihnen helfen können, mit Unity High-End-Visualisierungen zu erstellen.

Hochqualifizierte Teams entwickeln schon seit Jahren großartige 2D-Spiele mit Unity, aber wir wollten allen - von einzelnen Künstlern bis hin zu großen Teams - noch mehr 2D-Werkzeuge zur Verfügung stellen, um großartige Spiele zu entwickeln. Und viele von ihnen werden als Teil von Unity 2019.3, das derzeit in der Beta-Phase verfügbar ist, produktionsreif sein.

Wir haben Lost Crypt mit der kompletten Suite von 2D-Tools erstellt. Diese lebendige Szene enthält Animationen, Lichteffekte, organisches Terrain, Shader und Post-Processing, alles nativ in 2D erstellt. Er zeigt, wie Teams und Projekte jeder Größe und für jede Plattform jetzt schneller ansprechende und schöne Ergebnisse erzielen können.

Lost Crypt sollte auf jedem Desktop-Computer gut laufen und wir haben auch eine Bildschirmsteuerung mit dem neuen Input System implementiert, falls Sie es auf einem iOS- oder Android-Gerät spielen möchten. In unseren Tests lief es mit 30 FPS auf gängigen Geräten wie einem iPhone 6S.

Vom Asset Store herunterladen

Einrichten des Projekts

Nachdem Sie Lost Crypt aus dem Asset Store heruntergeladen haben, empfehlen wir Ihnen, mit einem leeren neuen Projekt zu beginnen und 2D auszuwählen. Importieren Sie dann das Projekt aus Meine Assets im Paketmanager oder indem Sie auf Meine Assets auf Ihrer Asset Store-Seite klicken. Das Projekt enthält alle 2D-Pakete, die Sie benötigen. Es überschreibt dann die Projekteinstellungen und ändert die Rendering-Einstellungen auf den 2D-Renderer innerhalb der Universal Render Pipeline.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Nach dem Import sehen Sie die Hauptszene. Wenn Sie auf " Play" klicken, sollten Sie ganz normal spielen können, indem Sie die Pfeiltasten und die Leertaste zum Springen verwenden.

Die Skripte und die Spiellogik sind relativ einfach, da das Hauptaugenmerk der Demo darauf lag, die 2D-Werkzeuge zu nutzen, um die Konzeptkunst der Demo zu materialisieren.

Wir haben die Demo in verschiedene Aufgaben unterteilt und die 2D-Tools ausgewählt, die für die jeweilige visuelle Herausforderung am besten geeignet sind.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Charakter-Animation

Die Figur wurde in Photoshop entworfen und direkt mit dem 2D PSD Importer importiert. Öffne die Datei Sara.psb mit dem Sprite-Editor, um das Charakter-Setup und das Rig zu sehen. Wenn Sie die Datei mit Photoshop öffnen, werden Sie sehen, dass wir die verschiedenen Teile und Ebenennamen beibehalten haben.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Eine der Funktionen, die mit der Universal Render Pipeline zur Verfügung stehen, ist das neue Sprite-Lit-Material. Im Gegensatz zum üblichen Sprite-Default-Material erlaubt dieses Material den Sprites, auf 2D-Lichtverhältnisse zu reagieren.

Wir haben die Normal Maps des Charakters in den Sprite-Editor importiert, indem wir das Dropdown-Menü Sekundärtexturen verwendet haben. Sie können Normal- und Mask-Maps zu 2D-animierten Charakteren, regulären Sprites, Tilemaps und Sprite-Formen hinzufügen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Die Figur verfügt über 2D-IK-Solver in den Beinen, damit sich der Animator auf die korrekte Positionierung der Knöchel- und Fußspitzen konzentrieren kann, so dass die Beine realistisch folgen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Nachdem wir die Figur geriggt haben, haben wir die verschiedenen Animationen mit dem Animationswerkzeug und Animator erstellt, um diese Zustände zu steuern. In diesem Vortrag von der GDC 2019 können Sie sehen, wie das Tool funktioniert.

Der Pferdeschwanz der Figur ist ein anderes untergeordnetes GameObject und wird durch 2D-Physik gesteuert. Er reagiert realistisch auf Bewegungen, da jeder Knochen des Pferdeschwanzes eine 2D-Scharnierkomponente mit einigen Einschränkungen hat. So kann sich ihr Haar frei bewegen, ohne sich zu sehr zu kräuseln oder zu sehr auf die Bewegungen der Figur zu reagieren.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Tag/Nacht-Lichtzyklus

Eine der mächtigsten Möglichkeiten der dynamischen Beleuchtung von Sprites ist es, das Aussehen der Umgebung zu verändern. Mit denselben Sprites können Sie die Stimmung, die Tageszeit oder die Dunkelheit eines Gebiets verändern, was eine Fülle von Spielmechaniken eröffnet, von Stealth-Mechaniken bis hin zu lebendigen, reichhaltigen Welten.

Bild des 2D-Beispielprojekts mit ausgeschalteter und eingeschalteter Beleuchtung
Bild eines 2D-Beispielprojekts

Wir haben die Lichter in der Szene mit einfachen Skripten gesteuert, die einen Farbverlaufswert (Lichtfarbe von tagsüber bis nachts) enthalten, und die Lichter und Materialien ändern ihre Farbe entsprechend dem Zeitparameter im übergeordneten GameObjects. Mit dieser Art von Einrichtung können Sie visuell kontrollieren, wie verschiedene Lichter miteinander verschmelzen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Großes, strukturiertes Außengelände

Eine der Herausforderungen für die Entwickler von 2D-Spielen bestand in der Anfangszeit darin, organisches Terrain wie Hügel, Abhänge oder unregelmäßige Böden effizient zu gestalten, was nur durch sorgfältig gestaltete Kachelbögen erreicht werden konnte. Jahre später war dies einfacher zu erreichen, indem man mehrere Sprites verwendete, die Teile des Geländes darstellten, aber der Arbeitsablauf oder die Leistung könnte besser sein.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Mit 2D Sprite Shape können Sie Terrain und Collider ähnlich wie in einem vektorbasierten Zeichenprogramm erzeugen. Sie können die Pinsel (Sprite Shape Profiles) anpassen und mit der Erstellung beginnen, ohne sich Gedanken darüber machen zu müssen, dass Sie viele Sprites oder Collider anpassen müssen, während Sie die Umgebung iterieren.

Lost Crypt verwendet auch einige der Sprite Shape-Extras wie das NodeAttach-Skript, um Elemente am Spline zu befestigen, damit sie dem Spline folgen. In dieser Demo verwenden die Felsen dieses Skript und das ConformingSpline in der Blumen-Ebene, um der Form des Gras-Splines zu folgen. Sie können diese Funktion für das Gameplay oder für dekorative Elemente verwenden, wie wir es bei der Gras-Ebene im Vordergrund getan haben.

Aufbau der Krypta mit einem rasterbasierten Layout

Tilemaps sind wahrscheinlich eines der wichtigsten 2D-Werkzeuge, nicht nur um Speicherplatz mit kleinen Grafikstücken zu sparen, die "kachelbar" und wiederholbar sind, sondern auch, weil sie für das Leveldesign entscheidend sind.

Bild eines 2D-Beispielprojekts

In Lost Crypt haben wir den 2D Tilemap Editor (verfügbar über den Paketmanager) verwendet, um das Innere der Krypta nachzubilden, wobei einige zusätzliche Tilemap Extras (verfügbar auf GitHub) verwendet wurden, um den Prozess der Levelgestaltung effizienter zu gestalten. Wir haben zum Beispiel Rule Tile verwendet, einen Kacheltyp, mit dem man Kacheln wie Pinsel bemalen kann. Es wählt automatisch die richtige Kachel anhand der benachbarten Kacheln oder Enden aus.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Feuer-Effekte

Einige gängige Elemente in Spielen sind Feuereffekte, also haben wir in Lost Crypt einen solchen hinzugefügt. Wir begannen mit der Erstellung einiger GameObjects-Fackeln unter Verwendung des Partikelsystems und des Shader-Graphen für 2D und verwendeten den Sprite-Lit Master-Knoten für den Ausgangsshader. Wir haben die Feueranimation in einem herkömmlichen Sprite-Sheet erstellt, das das Particle-System zum Abspielen der Animation verwendet.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Der Shader, den wir für die Flamme erstellt haben, verwendet eine HDR-Tönungsfarbe, um die Intensität des Glühens um das Objekt herum mit Hilfe des Post-Processing von Volume zu erhöhen. Das übergeordnete GameObjects enthält einige Funkenpartikel und einige Lichter, die die Nische beleuchten.

Reflexion im Wasser

Ein weiterer häufiger Anwendungsfall für Shader sind Reflexionen und Brechungen (z. B. Wasser, Eis, Spiegel oder Monitore, die einen anderen Bereich des Levels anzeigen), die in Spielen recht häufig vorkommen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Den Wassereffekt in der Krypta haben wir komplett mit Shader Graph erzielt. Wir haben verschiedene Parameter (z. B. Wasserfarbe, Wellengeschwindigkeit und -verzerrung, Welleneffekt usw.) ausgesetzt, mit denen wir das endgültige Erscheinungsbild in der Szene anpassen können. Um ein gespiegeltes Bild der Umgebung zu projizieren, fügten wir eine zusätzliche Kamera hinzu, die das Bild in einer Textur ausgibt, die vom Shader Graph gelesen werden kann. Zusätzlich haben wir einen Durchgang mit Post Processing Bloom hinzugefügt, um die Kaustik des Wassers zum Leuchten zu bringen, was der Wasseroberfläche einen schönen Effekt verleiht.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Windanimation und Überblendungsstile
Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Eine Möglichkeit, die Umgebung zu animieren, bestand darin, die Äste der Bäume im Wind schwanken zu lassen. Um diesen Effekt zu erzielen, haben wir uns entschieden, nur einen Shader für das Laub der Prefab-Bäume zu verwenden - das schafft Abwechslung und vermeidet Wiederholungen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Im Diagramm Vegetation mit Windlicht können Sie sehen, wie wir zwei Effekte erzeugt haben. Eine davon ist der Animations- oder Schwankungseffekt, den wir durch Verschieben der Vertex-Position nach einigen Parametern, die ein Rauschmuster verändern, erzeugt haben. Der zweite Effekt verwendet den G- oder Grün-Kanal, um den Ton des Randlichts um das Laub herum anzupassen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Light Blend Styles sind eine Sammlung von Eigenschaften im 2D Renderer, die beschreiben, wie Lichter auf 2D Sprites wirken sollen. Sie können zum Beispiel einen Überblendungsstil erstellen, der sich nur auf einen bestimmten Kanal auswirkt. Wenn Sie in der Szene ein Licht hinzufügen, das diesen Überblendungsstil verwendet, wirkt es sich nur auf die Bereiche des Sprites aus, die durch die Kanalinformationen der Maskenkarte vorgegeben sind.

Im folgenden Beispiel verwendet das parametrische Licht unseren Überblendungsstil "Direkte Beleuchtung", der sich nur auf die Bereiche auswirkt, die im R-Kanal der Maskenkarte des Sprites angegeben sind.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Kinematisch und Partikel

Lost Crypt hat eine kurze Filmsequenz, wenn unser Abenteurer den Zauberstab in der Krypta ergreift. Um den Moment noch ein wenig spezieller zu gestalten, haben wir die Stimmung der Umgebung verändert und die Partikel zum richtigen Zeitpunkt mit Timeline gespawnt, da wir den Wechsel zur Nacht beobachten wollen. Um die in den Wald fliegenden Partikel zu verfolgen, haben wir die Cinemachine-Kameras umgeschaltet, indem wir auch eine Überblendkamera für die Animationsspur verwendet haben.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Der leuchtende Ring, der erscheint, wenn du den Zauberstab ergreifst, besteht aus Sprite-Lichtern. Die Ringgrafik dehnt sich einfach aus und verblasst, wodurch eine Aura entsteht, die die Umgebung erhellt.

Den Partikelglüheffekt haben wir hauptsächlich mit dem Bloom-Effekt in der Volume-Nachbearbeitung erzielt. Außerdem verwendet der Material/Shader für die Partikel und die Spur eine HDR-Farbe, um festzulegen, wie viel Intensität der Nachbearbeitungseffekt auf dieses Objekt anwenden soll.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Animierte Gespenster

Sieh dir den Wald genau an - du kannst dort einige gespenstische Kreaturen sehen. Zu diesem Zweck haben wir einen Shader erstellt, der auch für andere Geister verwendet werden kann. Sie sind transparent, aber ein Fresnel-Effekt fügt den Kanten des Sprite etwas Glanz hinzu, so dass sie wie schwebende Kreaturen wackeln.

Ein interessanter Effekt im Shader ist die Verfolgung der Transformationsposition des GameObjects des Zauberstabs. Wenn sich der Zauberstab zum Beispiel in der Nähe der Ghule befindet, werden sie heller. Um das zu erreichen, haben wir ein kleines Skript an den Zauberstab angehängt, das seine Position im Material-Shader aktualisiert.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts

Die Ghouls haben auch eine kleine Animation, die von einer Grafik zur anderen wechselt. Zu diesem Zweck haben wir eine Maskenkarte mit unterschiedlichen Grafiken in jedem Kanal erstellt: R mit einem Bild, G mit dem anderen Bild und B für den Fresnel-Effekt.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Nachbearbeitung des Volumens

Für den letzten Schliff haben wir einige Nachbearbeitungseffekte hinzugefügt, die in der Universal Render Pipeline enthalten sind. Wir haben zum Beispiel ein leeres GameObjects erstellt und ihm die Komponente Volume zugeordnet. In Lost Crypt verwenden wir Bloom, Weißabgleich und Vignette, aber es gibt viele andere Effekte, die in 2D-Projekten verwendet werden können, wie Bewegungsunschärfe, Farbkorrektur oder Filmkorn-Effekte.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Nachbereitung

Wir hoffen, dass die Lost Crypt-Demo Ihnen hilft zu verstehen, wie Sie unsere integrierte Suite von 2D-Tools für ähnliche Anwendungsfälle nutzen können. Wenn Sie Fragen zur Verlorenen Krypta haben, können Sie uns im Forum erreichen.

Wenn Sie spezielle Fragen zu unseren 2D-Werkzeugen haben, lesen Sie die entsprechenden Threads im 2D-Bereich des Forums und unter Beta & Experimentelle Funktionen.

Bild eines 2D-Beispielprojekts
Bild eines 2D-Beispielprojekts
Nehmen Sie an einem Lost Crypt-Webinar am 9. Januar um 10:00 Uhr EST (16:00 Uhr CET) teil.

Möchten Sie einen Blick hinter die Kulissen von Lost Crypt in Echtzeit werfen? Melden Sie sich für unser lebendiges Webinar an, in dem Global Content Evangelist Andy Touch erklärt, wie wir 2D-Lichter, Shader und Post-Processing in Lost Crypt eingesetzt haben. Das 2D-Team aus der Forschung und Entwicklung wird ebenfalls anwesend sein, um Ihre Fragen zu den 2D-Tools oder zum Projekt selbst zu beantworten.

Register

Es gibt nur eine begrenzte Anzahl von Plätzen, also melden Sie sich bald an und tragen Sie eine Erinnerung in Ihren Kalender ein.