7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Programming

Erstellen Sie eine gemütliche, schneebedeckte Nachtszene mit Partikeleffekten

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Partikeleffekte sind in Spielen sehr häufig - es ist schwierig, ein modernes Spiel zu finden, das sie nicht verwendet. In diesem Tutorial werden wir einen Blick darauf werfen, wie man eine ziemlich komplexe Partikelmaschine baut und daraus eine lustige Schneeszene erstellt. Setzen Sie Ihren Wollhut auf und fangen wir an.

Hinweis: Obwohl dieses Tutorial mit AS3 und Flash geschrieben wurde, sollten Sie in fast jeder Spieleentwicklungsumgebung dieselben Techniken und Konzepte verwenden können.


Vorschau des Endbildes

Klicken und ziehen Sie die Maus, um mit dem Schneeeffekt zu interagieren.

Kein Blitz? Schauen Sie sich dieses Video der Demo auf YouTube an:


Konfiguration

Die obige Demo-Implementierung verwendet AS3 und Flash, wobei das Starling Framework für GPU das Rendern beschleunigt. Als Hintergrund wird ein vorgerendertes Bild der 3D-Szene (verfügbar im Quelldownload) verwendet. In den mittleren Ebenen platzieren wir Partikeleffekte, und die gesamte Szene wird mit einer Textur multipliziert, die die Lichtzuordnung darstellt.


Partikeleffekte

In Spielen müssen wir oft verschiedene visuelle und Bewegungsphänomene simulieren und häufig dynamische visuelle Effekte wie Feuer, Rauch und Regen anzeigen. Es gibt mehrere Möglichkeiten, wie wir dies tun können. Eine übliche Methode ist die Verwendung von Partikeleffekten.

Dies beinhaltet die Verwendung vieler kleiner Elemente - normalerweise Bilder, die auf die Kamera ausgerichtet sind -, aber sie können auch mit 3D-Modellen erstellt werden. Das Hauptziel besteht darin, die Position, den Maßstab, die Farbe und andere Eigenschaften einer Gruppe vieler Partikel (möglicherweise mehrere Tausend) zu aktualisieren. Dies wird eine Illusion erzeugen, wie der Effekt im wirklichen Leben aussieht.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects
Moderne Partikeleffekte: GPU-Partikel in der neuen Unreal Engine 4

In diesem Tutorial simulieren wir zwei Effekte: einen Schneeeffekt, der aus vielen Flocken-Sprites besteht, die vom Wind und der Schwerkraft beeinflusst werden, und einen subtilen Nebeleffekt, bei dem eine Handvoll großer Rauch-Sprites verwendet werden.


Implementieren von Emittern, Collidern und Force-Quellen

Typische Partikeleffekte bestehen aus einem oder mehreren Partikelemittern. Ein Emitter ist der Ort, von dem Partikel stammen; es kann verschiedene Formen annehmen und unterschiedliche Verhaltensweisen haben. Es fügt die Anfangsposition und den Winkel der Partikel hinzu und kann auch andere Startparameter wie die Anfangsgeschwindigkeit definieren.

Wir werden einen Emittertyp erstellen, einen Box-Emitter, der Partikel in einer von uns definierten Box erzeugt - Sie haben es erraten.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects

Um das Hinzufügen weiterer Emitter zu vereinfachen, verwenden wir ein Programmierkonstrukt namens Interface, das definiert, dass die Klasse, die es implementiert, über einen definierten Satz von Methoden verfügen muss. In unserem Fall benötigen wir nur eine Methode:

Die Implementierung im Box-Emitter ist sehr einfach. Wir nehmen einen zufälligen Punkt zwischen den minimalen und maximalen Punkten, die das Feld definieren:

Um dieses Beispiel interessanter und etwas fortgeschrittener zu machen, fügen wir das Konzept hinzu: einen Collider und Kraftquellen.

Ein Collider ist ein Objekt, das aus einer oder mehreren Geometriedefinitionen besteht, die an einen Partikelemitter angehängt werden können. Wenn ein Partikel eine Interaktion mit dem Collider hat (d.h. wenn es in die Geometrie eintritt), erhalten wir ein Ereignis, um zu entscheiden, was wir tun möchten. Dies wird verwendet, um zu verhindern, dass sich Schneeflocken bewegen, wenn sie mit dem Boden kollidieren.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects

Auf die gleiche Weise wie bei den Emittern verwenden wir eine Schnittstelle, für die wir die folgende Funktion implementieren müssen:

Hinweis: Dies ist eine einfache Implementierung, daher berücksichtigen wir bei der Überprüfung auf Kollision nur die Position.

Die Implementierung des Box Colliders ist unkompliziert. Wir prüfen, ob der Punkt innerhalb der Grenzen der Box liegt:

Der andere Objekttyp, den wir einführen werden, ist eine Kraftquelle. Dies wirkt sich auf die Geschwindigkeit eines Partikels aus, basierend auf seinen Parametern und der Position und Masse des Partikels.

Die einfachste Quelle wird als gerichtete Kraftquelle bezeichnet, und wir definieren sie mit einem einzelnen Vektor D (der für die Kraftrichtung und -stärke verwendet wird). Die Positionen der Partikel werden nicht berücksichtigt. es übt nur die Kraft auf alle Partikel aus diesem Effekt aus. Auf diese Weise können wir Schwerkraft und Wind simulieren - für Wind ändert sich die Richtung zeitlich, um sich realistischer zu fühlen.

Eine andere Art von Kraftquelle hängt vom Abstand zwischen einem definierten Punkt und Partikeln ab und wird weiter vom Zentrum entfernt schwächer. Diese Quelle wird durch ihre Position P und ihren Stärkefaktor S definiert. Wir werden dies verwenden, um die Interaktion der Maus mit dem Schnee zu ermöglichen.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects
Arten von Kraftquellen, die wir erstellen

Die Kraftquellen verfügen über eine eigene Schnittstelle, für die die folgende Methode implementiert werden muss:

Dieses Mal haben wir jedoch mehrere Implementierungen: eine für eine Richtungskraftquelle und eine für eine Punktkraftquelle.

Die Implementierung der Richtungskraftquelle ist die einfachere von beiden:

Dies ist die Implementierung der Punktkraftquelle:

Beachten Sie, dass diese Methode kontinuierlich aufgerufen wird. Dies ermöglicht es uns, Kraftparameter zu ändern, wenn der Effekt aktiv ist. Wir werden diese Funktion verwenden, um den Wind zu simulieren und die Interaktivität der Maus zu erhöhen.


Effekt- und Partikelimplementierung

Der Hauptteil der Implementierung befindet sich in der Effektklasse, die für das Laichen und Aktualisieren von Partikeln verantwortlich ist.

Die Menge der zu spawnenden Partikel wird durch den Wert spawnPerSecond in der updatemethode bestimmt:

Das Aktualisieren ist etwas komplexer. Zuerst aktualisiert die Implementierung die Kräfte, dann ruft sie die Partikelsimulationsaktualisierung auf und prüft auf Kollisionen. Es ist auch dafür verantwortlich, Partikel zu entfernen, wenn sie nicht mehr benötigt werden.

Ich habe den wichtigsten Teil der Implementierung noch nicht erwähnt: wie wir Partikel darstellen. Die Particle klasse erbt von einem Objekt, das wir anzeigen können (Bild), und verfügt über einige Eigenschaften, die sich während der Aktualisierung ändern:

  • startingLife - wie lange ein Partikel am Leben bleiben kann.
  • movable - ob die Position des Partikels geändert werden soll (zum Einfrieren des Partikels).
  • velocity - wie viel sich das Partikel in einer festgelegten Zeit bewegen wird.
  • acceleration - wie stark sich die Geschwindigkeit des Partikels in einer festgelegten Zeitspanne ändert.
  • angularVelocity - wie schnell sich die Drehung in einer festgelegten Zeit ändert.
  • fadeInOut - Gibt an, ob wir einen verblassenden Alpha-Wert verwenden, um das Partikel reibungslos zu erstellen und zu zerstören.
  • alphaModifier - bestimmt den Basis-Alpha-Wert.
  • mass - die physikalische Masse des Partikels (wird bei der Berechnung der Beschleunigung aus Kräften verwendet).

Jedes Partikel hat eine update funktion, die mit Zeitdelta (dt) aufgerufen wird. Ich möchte den Teil dieser Funktion zeigen, der sich mit der Aktualisierung der Partikelposition befasst, die in Spielen üblich ist:

Dies geschieht mithilfe der Euler-Integration und weist Genauigkeitsfehler auf. Da wir es jedoch nur für visuelle Effekte verwenden, werden uns diese nicht stören. Wenn Sie für das Gameplay wichtige Physiksimulationen durchführen, sollten Sie sich mit anderen Methoden befassen.


Beispieleffekte

Schließlich sind wir an einem Punkt angelangt, an dem ich erklären werde, wie der tatsächliche Effekt implementiert wird. Um einen neuen Effekt zu erzielen, erweitern wir die Effect klasse.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects
Teilchenstrukturen

Lassen Sie es schneien

Wir werden mit dem Schneeeffekt beginnen. Platzieren Sie zuerst einen Box-Emitter oben auf dem Bildschirm und verwenden Sie ihn, um einige Partikel zu erzeugen. Ein Collider wird verwendet, um festzustellen, ob ein Partikel den Boden erreicht hat. In diesem Fall setzen wir seine movable Eigenschaft auf false.

Das Wichtigste, was wir sicherstellen müssen, ist, dass die Partikel zufällig genug sind, damit sie keine sichtbaren Muster auf dem Bildschirm erzeugen, was die Illusion schädigt. Wir machen das auf verschiedene Arten:

  • Zufällige Startgeschwindigkeit - jedes Partikel bewegt sich leicht unterschiedlich.
  • Zufällige Skalierung - abgesehen davon, dass die Größen unterschiedlich sind, verleiht dies dem Effekt mehr Tiefe, sodass er dreidimensionaler aussieht.
  • Zufällige Drehung - lässt jedes Partikel effektiv einzigartig aussehen, obwohl es dasselbe Bild verwendet.

Wir initialisieren jedes Schneeteilchen folgendermaßen:

Um ihnen eine realistische Bewegung beim Fallen vom Himmel zu ermöglichen, verwenden wir eine gerichtete Kraftquelle als Schwerkraft. Es wäre zu einfach, hier anzuhalten, daher werden wir eine weitere Richtungskraft hinzufügen, um den Wind zu simulieren, der sich zeitlich ändert.

Wir werden den Windwert mithilfe einer Sinusfunktion variieren. Dies wurde hauptsächlich durch Experimente festgestellt. Für die x-Achse erhöhen wir den Sinus auf die Potenz von 4, wodurch die Spitze schärfer wird. Alle sechs Sekunden gibt es einen Höhepunkt, der den Effekt eines starken Windstoßes erzeugt. Auf der y-Achse schwingt der Wind schnell zwischen -20 und 20.

Schauen Sie sich das Funktionsdiagramm an, um besser zu verstehen, was los ist.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects
Die x-Achse repräsentiert die Zeit; Die y-Achse repräsentiert die Windgeschwindigkeit. (Nicht maßstabsgetreu.)

Fügen Sie etwas Nebel hinzu

Um den Effekt zu vervollständigen, fügen wir einen subtilen Nebeleffekt hinzu, indem wir einen Box-Emitter verwenden, der die gesamte Szene abdeckt.

Da die Textur, die wir für das Partikel verwenden, relativ groß ist, wird der Emitter so eingestellt, dass eine kleine Anzahl von Partikeln erzeugt wird. Das Alpha-Niveau des Partikels ist von Anfang an niedrig, um zu verhindern, dass es die Szene vollständig verdeckt. Wir werden sie auch so einstellen, dass sie sich langsam drehen, um einen Windeffekt zu simulieren.

Um dem Beispiel etwas mehr Atmosphäre zu verleihen, habe ich eine leichte Textur hinzugefügt, die sich auf der obersten Szenenebene befindet. Die Überblendung wird auf Multiplizieren eingestellt. Die Partikeleffekte werden jetzt viel interessanter sein, da ihre weiße Grundfarbe geändert wird, um sie an das Licht anzupassen, und die Szene als Ganzes sich stärker integriert anfühlt.

Creating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle EffectsCreating a Snowy Night Scene Using Particle Effects

Verbessernde Leistung

Ein üblicher Weg, um die Simulation vieler Partikel zu optimieren, ist das Konzept des Pooling. Durch das Pooling können Sie Objekte wiederverwenden, die bereits erstellt wurden, aber nicht mehr benötigt werden.

Das Konzept ist einfach: Wenn wir mit einem bestimmten Objekt fertig sind, legen wir es in einen "Pool"; Wenn wir dann ein anderes Objekt des gleichen Typs benötigen, prüfen wir zuerst, ob sich ein "Ersatz" im Pool befindet. Wenn ja, nehmen wir es einfach und wenden neue Werte darauf an. Wir können zu Beginn der Simulation eine bestimmte Anzahl dieser Objekte in den Pool einfügen, um sie für später vorzubereiten.

Tipp: Weitere Informationen zum Pooling finden Sie in diesem Artikel.

Eine andere Möglichkeit, Partikeleffekte zu optimieren, besteht darin, sie zu einer Textur vorab zu berechnen. Auf diese Weise verlieren Sie viel Flexibilität. Der Vorteil besteht jedoch darin, dass das Zeichnen eines Effekts dem Zeichnen eines einzelnen Bilds entspricht. Sie würden den Effekt auf dieselbe Weise wie eine normale Sprite-Sheet-Animation animieren.

Creating a Snowy Night Scene Using Particle Effects
Feuerpartikeleffekt in Sprite-Sheet-Form

Sie müssen jedoch vorsichtig sein: Dies ist nicht gut für Vollbildeffekte wie Schnee geeignet, da diese viel Speicherplatz beanspruchen würden.

Eine billigere Möglichkeit, Schnee zu simulieren, besteht darin, eine Textur mit mehreren Flocken im Inneren zu verwenden und dann eine ähnliche Simulation wie die von uns durchgeführte durchzuführen, jedoch mit weitaus weniger Partikeln. Dies kann gut aussehen, erfordert aber zusätzlichen Aufwand.

Hier ist ein Beispiel dafür (aus der Intro-Szene von Fahrenheit, auch bekannt als Indigo Prophecy):


Schlussfolgerung

Bevor Sie mit dem Schreiben Ihrer eigenen Partikel-Engine beginnen, sollten Sie überprüfen, ob die Technologie, mit der Sie Ihr Spiel erstellen, bereits Partikeleffekte aufweist oder ob eine Bibliothek eines Drittanbieters vorhanden ist. Trotzdem ist es sehr nützlich zu wissen, wie sie implementiert sind, und wenn Sie ein gutes Verständnis dafür haben, sollten Sie keine Probleme haben, eine bestimmte Variante zu verwenden, da sie auf ähnliche Weise implementiert sind. Partikel-Engines können sogar mit Editoren geliefert werden, die eine WYSIWYG-Möglichkeit zum Bearbeiten ihrer Eigenschaften bieten.

Wenn der gewünschte Effekt in einem Sprite-Sheet-basierten Partikeleffekt erzielt werden kann, würde ich TimelineFX empfehlen. Es kann verwendet werden, um schnell atemberaubende Effekte zu erzielen, und verfügt über eine große Bibliothek von Effekten, die Sie verwenden und ändern können. Leider ist es nicht das intuitivste Werkzeug und wurde seit einiger Zeit nicht mehr aktualisiert.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.