Hero background image
Erstellen von 2D-Spezialeffekten in Unity mit dem VFX Graph und dem Shader Graph

Dieser Artikel erklärt, wie Spezialeffekte im Unity-Beispielprojekt Happy Harvest mit dem VFX Graph und Shader Graph (Unity 2022 LTS) erstellt wurden.

Sie können Folgendes herunterladen und installieren Fröhliche Ernte aus dem Unity Asset Store herunterladen und installieren.

Auf dieser Seite werden einige der Techniken und Werkzeuge vorgestellt, die in zwei kostenlos erhältlichen E-Büchern für Fortgeschrittene ausführlich erläutert werden:

Bitte lesen Sie die anderen Artikel dieser Serie, um zu erfahren, wie Sie die Effekte und das Bildmaterial in Happy Harvest nachbauen können:

  1. Charaktererstellung und -anpassung mit Unity 2D-Animation
  2. Erweiterte Tilemap-Erstellung mit Unity Tilemap 2D
  3. 2D-Licht- und Schattentechniken mit dem URP
Visuelle Effekte in 2D-Projekten
Visuelle Effekte in 2D-Projekten

In Unity können Sie visuelle 2D-Effekte mit verschiedenen Methoden erstellen. Um zum Beispiel einen Feuereffekt zu erzeugen, können Sie die Flammen Frame für Frame animieren, ein Sprite mit einem in Shader Graph erstellten Shader animieren oder feurige Partikel erzeugen. Für die letztgenannte Methode können Sie das integrierte Partikelsystem wählen, das auf der CPU läuft, oder Sie nutzen den VFX-Graph und die Leistung des Grafikprozessors, um Millionen von Partikeln zu erzeugen. Beide Systeme können in einem Projekt verwendet werden, so dass Sie für einen bestimmten Effekt auswählen können, welches am besten geeignet ist.

Dieser Artikel konzentriert sich auf VFX Graph, der in 2D-Spielen ab Unity 2022 LTS verwendet werden kann.

Bei der Erstellung von Spezialeffekten in einem Unity 2D-Projekt sind einige wichtige Punkte zu beachten:

  • Kameras Wenn Sie eine perspektivische Kamera verwenden, finden Ihre Effekte in einem dreidimensionalen Raum statt, wie es in 3D-Spielen der Fall ist. Wenn Sie eine orthografische Kamera verwenden, müssen Sie den Renderer des Systems so einrichten, dass er die richtige Sortierebene verwendet. Lesen Sie hier mehr über die Kameraperspektive.
  • Nachbearbeitung Sie können Nachbearbeitungseffekte auf Ihr 2D-Projekt anwenden, wenn Sie die Universal Render Pipeline (URP) wählen, z. B. das Hinzufügen eines Bloom-Effekts zu einem Partikeleffekt über das URP-Volumen-Framework.
  • Effekte können auf unterschiedliche Weise erzielt werden. Beispielsweise kann ein GameObject, das einen Effekt darstellt, mehrere untergeordnete GameObjects haben, die verschiedene Systeme verwenden, wie Sprites mit benutzerdefinierten Shadern oder mehrere Partikelsysteme.
  • Animationsclips: Mit Animationsclips können Sie sanfte Sprite-basierte Animationseffekte inszenieren. Sie können sogar das Skelett-Animationssystem von Unity (sparsam) verwenden, um Teile eines Sprites in einer Sprite-Animation zu steuern.
  • Unity Asset Store Um Ihrem Projekt visuelle Effekte hinzuzufügen, besuchen Sie den Unity Asset Store, in dem Sie viele vorgefertigte 2D-Effekte finden.
Der VFX-Graph für 2D
Der VFX-Graph für 2D

Visual Effect Graph Assets sind kompatibel mit dem 2D Renderer unter Verwendung von Shader Graph in Unity 2022 LTS. Um einen neuen VFX-Graphen in Ihrem Projekt zu erstellen, folgen Sie den Schritten in der Dokumentation.

Die Ausgabekontexte in einem VFX-Diagramm legen fest, wie der Effekt gerendert werden soll. Output Contexts für Meshes wie Output Particle Quad bieten die Möglichkeit, einen Shader Graph hinzuzufügen. Es spielt keine Rolle, ob Sie mit einer beleuchteten oder unbeleuchteten Ausgabe beginnen, da das Beleuchtungsmodell geändert wird, um sich an den Shader-Graphen anzupassen. Sie können die unten aufgeführten Standard-Shader oder Ihre eigenen Shader Graph-basierten Shader verwenden.

Für 2D-Projekte in URP können Sie einen dieser drei Sprite-basierten Shader-Graphen verwenden:

  • Lit: Zum Empfang von Licht aus dem 2D-Lichtsystem
  • Unbeleuchtet: Unbeeinflusst vom 2D-Beleuchtungssystem
  • Benutzerdefiniert: So implementieren Sie ein benutzerdefiniertes 2D-Beleuchtungsmodell

Denken Sie daran, die Option VFX Graph unterstützen im SRP-Ziel innerhalb von Shader Graph zu aktivieren.

Die in Ihrem Shader-Diagramm exponierten Eigenschaften werden in Ihrem VFX-Diagramm angezeigt. Sie können sie bei Bedarf überschreiben, z. B. wenn Sie möchten, dass ein VFX Graph Partikelsystem die Farbänderung des Shaders über die Zeit steuert.

Lassen Sie es regnen mit VFX Graph
Lassen Sie es regnen mit VFX Graph

Regen ist ein gängiger partikelbasierter Effekt in Spielen. Im Folgenden werden die wichtigsten Schritte zur Erstellung des Regens in Happy Harvest mit VFX Graph und der GPU beschrieben, die die Bewegung vieler einzelner Partikel ermöglichen:

Die Regenpartikel (in der Hierarchie als Visual Effect Rain bezeichnet) werden in der Sortierebene gerendert, über dem Boden, aber hinter den Objekten. Der Grund dafür ist, dass Wasserspritzeffekte entstehen, wenn die Tropfenpartikel auf den Boden treffen, um zu simulieren, wie echter Regen reagiert. Wenn die Regentropfen auf einer vertikalen Fläche wie einem Laternenpfahl zu sehen sind, könnte dies falsch aussehen. In der realen Welt beeinflusst das Licht die gesamte Umgebung, einschließlich der Regentropfen. In Happy Harvest verwendet der VFX-Graph für den Regen einen Sprite-Lit-basierten Shader-Graph im Ausgabekontext, um die Regenpartikel zu beleuchten. Ohne eine Lit Shader Graph-Anpassung für den Regen kann sich sein Farbton nicht ändern, um das im Laufe des Tages wechselnde Licht zu reflektieren. Bild für Bild wird gespritzt: Wenn das Regenpartikel stirbt, löst ein Trigger On Die Block ein GPU-Ereignis aus, das ein einzelnes Daumenkino-Partikel hervorbringt, das eine einfache Splash-Animation abspielt. Happy Harvest verwendet den Flipbook Shader Graph UV Block, um die verschiedenen Rahmen innerhalb der Textur darzustellen. Alternativ können Sie den Flipbook Player Block in VFX Graph verwenden, um denselben Effekt zu erzielen.

Regenpartikel erscheinen im Vordergrund (in der Hierarchie als visueller Effekt Regen im Vordergrund bezeichnet). Da sie simulieren, dass sie sich in der Nähe der Kameralinse befinden, spritzt das Wasser beim Auftreffen auf den Boden nicht.

Eine Abwandlung des vorherigen Effekts wird mit dem Blitzeffekt Donner verwendet(Visueller Effekt Regen Vordergrund Donner). Mit der Komponente VFX Output Event Play Audio wird ein Soundeffekt für das Donnern hinzugefügt. Diese Komponente wird mit den Beispielskripten der Output Event Handler geliefert; der Output Event Context löst sie im Diagramm aus. Ein Blitzlichtgewitter: Ein einfacher, aber effektiver Weg, diesen Effekt zu erzeugen, bestand darin, einen einzelnen Partikel auf der Basis von VFX Graph zu erzeugen, der in der Mitte der Kameraposition initialisiert wurde und groß genug war, um den Bildschirm auszufüllen. Der Color Over Lifetime Block im Output-Knoten ändert die Farbe des Partikels durch Auswertung eines Gradienten über die Zeit. In diesem Farbverlauf simulieren die Transparenzänderungen das Aufblitzen und Verblassen des Blitzes.

Optimieren mit Kamerakacheln
Optimieren mit Kamerakacheln

Der Regen wirkt sich auf die gesamte Szene in Happy Harvest aus, aber da nur ein Teil davon durch die Kamera sichtbar ist, sind viele der berechneten Partikel unnötig. Sie können die Option " Frustum Culling " im Inspektor aktivieren, um das Rendern dieser Partikel zu vermeiden, oder Sie können die Kamerakacheln verwenden, ein Trick, der in der Demo verwendet wird.

Mit der Kamerabearbeitung können Sie Partikel in einem Kasten erstellen und rendern, der zu Ihrer Szenenansicht passt, so dass der Eindruck entsteht, dass die Partikel überall in der Szene simuliert werden. Es werden keine Partikel außerhalb der Kamera erzeugt, so dass Sie die Menge der erzeugten Partikel und die Kapazitätszuweisung des Effekts ohne zusätzliche Einstellungen reduzieren können.

Um in Happy Harvest die Kamerakacheln zu verwenden, wird der Regenspawn mit Hilfe der Form "Position festlegen" an die Abmessungen der Kamera angepasst: AABox. Das Kameraformat (geben Sie die Größe manuell ein, verwenden Sie die MainCamera direkt, oder verwenden Sie den aspectRatio-Slot) wird mit einem Größenmultiplikator skaliert, um den Kameraeinstellungen in der Szene zu entsprechen. Die AABox ist etwas größer als die tatsächliche Kameragröße, um einen durch das Culling verursachten Popping-Effekt zu vermeiden. Der Shape-Spawn-Modus ist auf Oberfläche eingestellt, da in einem 2D-Projekt nicht auf dem gesamten Volumen gespawnt werden muss (da die Z-Achse nicht verwendet wird).

Sobald diese Einrichtung abgeschlossen ist, benötigen Sie einen Kachel-/Warp-Positionsblock in der Systemausgabe. Diese ist mit der Kamera Transform verknüpft, um ihre Position und die Abmessungen der Kamera anzupassen, wie Sie es auch im Initialisierungskontext des Systems tun möchten.

Diese Technik gilt auch für Regeneffekte in 3D, mit der Ausnahme, dass der Modus "Shape Spawn" auf "Volume" und mit einem anderen Wert als Null für die Z-Achse eingestellt werden sollte, wenn Sie eine Tiefenwirkung wünschen.

Der Feuereffekt
Der Feuereffekt

Ein weiterer häufiger Effekt in Spielen ist Feuer. In Happy Harvest gibt es ein gemütliches Lagerfeuer auf dem Hof und im Kamin des Bauernhauses. Der Feuereffekt besteht aus drei Gruppen von Partikeln: Flammen, Funken und Rauch, die alle aus demselben Graphen namens VFX_Fire hervorgehen.

Animieren der Flamme

Die fließende Animation der Flamme erfolgt auf der Shader-Ebene in Shader Graph und zeigt, was man mit der Leistung der GPU und der Shader erreichen kann.

Wenn Sie das ShaderGraph_Firefileim Projekt öffnen, werden Sie feststellen, dass ein einzelnes Sprite(Mask texture2D) verwendet wird, um eine Maske zu erstellen, die der Flamme eine ovale Form verleiht. Die Animation und das Sprite werden über ein scrollendes "Voronoi"-Muster mit Rauschen und einer Tönungsfarbe für die Flamme und den Hintergrund erstellt. Die Alphamaske verwendet dieselbe Flammenform, jedoch mit einem Sättigungsoperator, der eine deutlichere Kontur erzeugt.

Funken- und Raucheffekte, die dem Feuer polierte Details hinzufügen, verwenden den Standard-Lit-Shader-Graph. Eine Kombination von Änderungen an den Blöcken für Geschwindigkeit, Skalierung und Ausgangsposition erzeugt einen lebendigen Effekt, für den nur ein Sprite erforderlich ist. Das Diagramm für die Funken- und Raucheffekte enthält Hinweise, die Ihnen helfen, die Effekte in Ihrem eigenen Projekt nachzubilden.

Wasserfliesen-Animation
Wasserfliesen-Animation

Das Wasser verwendet cartoonartige Kaustik- oder Welleneffekte mit Transparenz, so dass es zum Gesamtkunststil der Demo passt. Der Wasser-Shader ist für die Arbeit mit Tilemaps optimiert, die den größten Teil der Umgebung der Demo ausmachen.

Das standardmäßige 2D-Lichtmaterial namens Wasser befindet sich im Tilemap-Renderer der Tilemap. Dieses wurde gegen ein benutzerdefiniertes Material mit dem Wasser-Shader ausgetauscht. Alle Kacheln innerhalb einer Tilemap werden mit demselben Material gerendert, daher wird diese Tilemap nur für die Wasserkacheln verwendet.

Im Graphen ShaderGraph_Water werden die Wassereffekte ebenfalls aus einem gestreckten, invertierten Voronoi-Rauschmuster erzeugt, um die Kaustik zu simulieren (eine gängige Methode in der Wasser-Kaustik). Die oszillierende Bewegung ist ein Produkt aus Kacheln und versetztem UV, auf das ein Rauscheffekt angewendet wird.

Brechungseffekt

Der Brechungseffekt wird mit dem Lerp-Knoten in die Oberflächentextur eingeblendet. Die Brechung verwendet die Textur der Kamerasortierschicht, die einen Schnappschuss des Kamerarenderings bis zur definierten Sortierschicht darstellt, was bedeutet, dass alle Elemente in früheren Sortierschichten in dieser Textur erscheinen. In Happy Harvest erfolgt das Rendering bis zur Sortierebene Objects, die für Elemente wie die Figur verwendet wird. Die UV der Textur der Kamera-Sortierschicht wird mit einer Normalen-Map verzerrt, die mit dem Normalen- und Höhen-Knoten erzeugt wird, der die gleiche Voronoi-Textur wie die Oberflächentextur verwendet.

Sehen Sie sich dieses Tutorial mit der Lost Crypt 2D-Demo an, um eine Schritt-für-Schritt-Anleitung für andere Wassereffekte in 2D zu erhalten.

VFX im Gameplay
VFX im Gameplay

Die bisher besprochenen Effekte interagieren nicht mit dem Spielgeschehen in Happy Harvest; sie sind Teil der Umgebung und spielen unabhängig davon, was in der Demo passiert. In den meisten Spielen müssen Sie jedoch einige der Effekte auslösen, wenn eine Aktion in der Umgebung und/oder mit der Spielfigur stattfindet. Schauen wir uns einige ausgelöste Effekte in Happy Harvest an.

Auswirkungen bei der Verwendung von Gegenständen

Einige Effekte sind mit den Zeichenwerkzeugen verbunden, wie z. B. die Wasserkanne. Die Prefab für die Wasserkanone, Prefab_Tool_WaterCan, hat drei Animationsclips, die das Sprite je nach der Richtung, in die die Figur blickt, ändern (nach oben, nach unten, zur Seite). In diesen Animationen gibt es ein Animationsereignis, das eine Funktion innerhalb einer Tool Animation Event Handler-Komponente aufruft.

Dieses Skript aktiviert oder deaktiviert die entsprechenden Instanzen von VFX-Grafiken für jede Position, die vom Inspektor referenziert werden.

Auswirkungen bei der Iteration mit Kacheln

Einige Effekte finden auf den Plättchen statt, z. B. das Graben und Ernten. Dadurch wird sichergestellt, dass sie keine Probleme mit den Charakteranimationen oder Positionswechseln verursachen. Wenn es an der Zeit ist, eine Zelle zu bearbeiten, wirkt der Bodenbearbeitungseffekt auf diese Zelle, und wenn es an der Zeit ist zu ernten, ruft die Zelle den Ernteeffekt auf.

Wenn der Bodenbearbeitungseffekt ausgelöst wird, verweist er auf den Effekt "TillingPuff_prefab" aus der TerrainManager-Komponente, die an das Grid-GameObject angehängt ist. Er bewegt sich in die Mitte des Plättchens und spielt dann. Andere Effekte wie die Ernte rufen den VFX-Graphen auf, auf den das ScriptableObject Data/Crops verweist. Bei der Initialisierung des TerrainManager-Skripts wird ein VFX-Pool-Dictionary erstellt (die Variable im Skript m_HarvestEffectPool), das mehrere VFX-Prefabs instanziiert, die bei Bedarf abgespielt werden.

Kleine Aufmerksamkeiten, die den Unterschied machen
Kleine Aufmerksamkeiten, die den Unterschied machen

Kleine Effekte in Happy Harvest geben der Demo den letzten Schliff und machen die Erkundung noch angenehmer. Einige davon sind:

  • VFX_DustParticles: Verbreitung von Umgebungsstaub in der Umwelt
  • VFX/Wasser: Für subtile Wasserwellen und Spritzer
  • VFX_Leaves: Löst Blätter aus, die von Büschen fallen, wenn der Spieler vorbeigeht
  • Charakter Löst eine Rauchwolke aus, die an der Figur befestigt ist; diese wird mit dem eingebauten Partikelsystem erzeugt
  • P_VFX_Moths: Löst Motten aus, die in der Nähe von Scheinwerfern fliegen; dies geschieht ebenfalls mit dem Built-In Particle System

Jeder der VFX Graph-basierten Effekte in der obigen Liste enthält Hinweise, die den Zweck jedes Knotens erklären.

Holen Sie sich das kostenlose E-Book über visuelle Effekte in Unity
Holen Sie sich das kostenlose E-Book über visuelle Effekte in Unity

Erstellt von einem erfahrenen Unity-Entwickler mit Unterstützung von Unity-Ingenieuren und technischen Künstlern, ist dies unser bisher umfangreichstes Handbuch für die Entwicklung visueller Effekte. Das E-Book bietet einen vollständigen Überblick über die Verwendung der Authoring-Tools für visuelle Effekte in Unity, um jede Art von Effekt zu erzeugen: Wasser und Flüssigkeit, Rauch, Feuer, Explosionen, Wetter, Aufprall, Magie, Elektrizität - die einzige Grenze ist Ihre Vorstellungskraft.

Sehen Sie sich auch diese beiden Video-Tutorials an, in denen gezeigt wird, wie man mit VFX Graph Spezialeffekte erzeugt:

Haben Ihnen diese Inhalte gefallen?