Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Machen Sie Plätschern mit dynamischen 2D-Wassereffekten

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Sploosh!  In dieser Lektion zeige ich Ihnen, wie Sie mit einfachen mathematischen, physikalischen und Partikeleffekten wunderschöne 2D-Wellen und Wassertröpfchen simulieren können.


Hinweis: Obwohl dieses Tutorial mit C# und XNA geschrieben wurde, sollten Sie die gleichen Methoden und Konzepte in fast jeder Spieleentwicklungsumgebung verwenden.


Vorschau Ergebnisse

Wenn Sie XNA haben, können Sie die Quelldateien herunterladen und die Demo kompilieren.  Ansonsten schau dir das folgende Demo-Video an:

In der Wassersimulation gibt es grundsätzlich zwei unabhängige Teile.  Zuerst werden wir Wellen mit einem Federmodell verwenden.  Zweitens werden wir Partikeleffekte verwenden, um Plätschern hinzuzufügen.


Wellen erzeugen

Um Wellen zu erzeugen, werden wir die Wasseroberfläche als eine Reihe von vertikalen Federn simulieren, wie in diesem Diagramm gezeigt:

Dadurch können die Wellen steigen und fallen.  Dann lassen wir Wasserteilchen zu benachbarten Teilchen ziehen, so dass sich die Wellen ausbreiten.

Federn und Hookes Gesetz

Eine der großen Eigenschaften von Federn ist, dass sie leicht nachzuahmen sind.  Federn haben eine gewisse natürliche Länge; wenn Sie die Feder dehnen oder zusammendrücken, wird sie versuchen, zu dieser natürlichen Länge zurückzukehren.

Die Kraft, die von der Feder zur Verfügung gestellt wird, ist durch Hookes Gesetz gegeben:

\[
F = -kx
\]

F ist die von der Feder erzeugte Kraft, k - ist eine konstante Feder und x - ist die Verschiebung der Federn aus ihrer natürlichen Länge.  Ein negatives Vorzeichen zeigt an, dass die Kraft in die entgegengesetzte Richtung wirkt, in die die Feder vorgespannt ist; Wenn Sie die Feder drücken, wird sie gedrückt und umgekehrt.

Die Federkonstante k bestimmt die Federsteifigkeit.

Um Federn zu simulieren, müssen wir herausfinden, wie man die Teilchen nach dem Hookes Gesetz bewegt.  Dazu brauchen wir noch mehrere Formeln aus der Physik.  Erstens, Newtons zweites Bewegungsgesetz:

\[
F = ma
\]

Hier ist F die Kraft, m ist die Masse und a ist die Beschleunigung.  Das bedeutet, dass sich die Kraft dem Objekt nähert und je leichter das Objekt ist, desto mehr beschleunigt es.

Die Kombination dieser beiden Formeln und Neuordnung gibt uns:

\[
a = - \ frac{k}{m} x
\]

Das gibt uns Beschleunigung für unsere Teilchen.  Wir nehmen an, dass alle unsere Teilchen dieselbe Masse haben werden, so dass wir k/m zu einer Konstanten kombinieren können.

Um die Position der Beschleunigung zu bestimmen, müssen wir eine numerische Integration durchführen.  Wir werden die einfachste Form der numerischen Integration verwenden - für jeden Frame machen wir einfach folgendes:

Dies wird als Euler-Methode bezeichnet.  Das ist nicht die genaueste Art der numerischen Integration, aber sie ist schnell, einfach und für unsere Zwecke geeignet.

Durch die Kombination all dieser Elemente bilden unsere Partikel auf der Wasseroberfläche folgende Rahmen:

Hier ist TargetHeight die natürliche Position des oberen Teils der Feder, wenn sie sich nicht dehnt und nicht schrumpft.  Sie müssen diesen Wert dort einstellen, wo die Wasseroberfläche sein soll.  Für die Demo habe ich sie auf halber Höhe des Bildschirms auf 240 Pixel eingestellt.

Spannung und Feuchtigkeit

Ich habe bereits erwähnt, dass eine konstante Feder k die Federsteifigkeit reguliert.  Sie können diesen Wert anpassen, um die Eigenschaften des Wassers zu ändern.  Eine niedrige Federkonstante bewirkt, dass sich die Feder löst.  Das bedeutet, dass die Kraft dazu führt, dass große Wellen langsam oszillieren.  Umgekehrt erhöht eine hohe konstante Feder die Spannung der Feder.  Kräfte werden kleine Wellen erzeugen, die schnell schwanken.  Eine hohe konstante Quelle lässt das Wasser wie eine Mischung aus Jello aussehen.

Achtung: Die Federkonstante nicht zu hoch einstellen.  Sehr steife Federn verwenden sehr starke Kräfte, die in sehr kurzer Zeit stark variieren.  Das ist nicht sehr gut mit der numerischen Integration, die die Federn simuliert, kombiniert als eine Reihe von diskreten Sprüngen mit regelmäßigen Zeitintervallen.  Eine sehr starre Feder kann sogar eine Schwingungsdauer haben, die kürzer ist als Ihr Zeitschritt.  Schlimmer noch, Eulers Integrationsmethode neigt dazu, die Energie zu erhöhen, da die Nachahmung weniger genau wird, was zur Explosion der starren Federn führt.

Es gibt immer noch ein Problem mit unserem Federmodell.  Sobald die Feder zu schwingen beginnt, wird sie niemals aufhören.  Um dieses Problem zu lösen, müssen wir etwas Befeuchtung anwenden.  Die Idee ist, Kraft in die entgegengesetzte Richtung zu übertragen, so dass sich unsere Feder bewegt, um sie zu verlangsamen.  Das erfordert eine kleine Anpassung unserer Federformel:

\[
a =-\frac{k}{m} x - dv
\]

Hier ist v die Geschwindigkeit, d ist der Dämpfungskoeffizient eine weitere Konstante, die Sie einstellen können, um das Gefühl von Wasser einzustellen.  Das sollte ziemlich klein sein, wenn Sie möchten, dass Ihre Wellen schwanken.  Die Demo verwendet einen Dämpfungsfaktor von 0,025.  Ein hoher Dämpfungsfaktor lässt das Wasser dick wie Melasse aussehen, während ein niedriger Wert es ermöglicht, dass die Wellen lange schwingen.

Die Wellen propagieren lassen

Jetzt, wo wir den Feder machen können, benutzen wir sie, um Wasser zu modellieren.  Wie im ersten Diagramm gezeigt, simulieren wir Wasser mit einer Reihe von parallelen vertikalen Federn.  Natürlich, wenn die Federn alle unabhängig sind, werden sich die Wellen niemals wie echte Wellen ausbreiten.

Zuerst zeige ich den Code und dann gehe ich dahin:

Dieser Code wird in jedem Frame Ihrer Update() -Methode aufgerufen.  Hier sind die Federn eine Anordnung von Federn, die von links nach rechts angeordnet sind.  leftDeltas ist eine Anordnung von Schwimmern, die den Höhenunterschied zwischen jeder Feder und ihrem linken Nachbarn hält.  rechtsDeltas ist das Äquivalent für rechtshändige Nachbarn.  Wir behalten alle diese Höhenunterschiede in den Arrays bei, da die letzten beiden if-Anweisungen die Höhe der Federn ändern.  Wir müssen den Höhenunterschied messen, bevor eine der Höhen geändert wird.

Der Code beginnt mit der Einführung des Hookeschen Gesetzes für jeden Feder, wie oben beschrieben.  Dann betrachtet er den Höhenunterschied zwischen jeder Feder und ihren Nachbarn, und jede Feder zieht ihre benachbarten Federn zu sich selbst und verändert die Positionen und die Geschwindigkeit der Nachbarn.  Der Schritt des Schrittes des Nachbarn wird achtmal wiederholt, so dass sich die Wellen schneller ausbreiten.

Es gibt noch einen konfigurierbaren Wert, hier Spread genannt.  Es steuert die Geschwindigkeit der Wellenausbreitung.  Es kann Werte von 0 bis 0.5 annehmen, während größere Werte die Geschwindigkeit der Wellenausbreitung erhöhen.

Um die Bewegung der Wellen zu starten, fügen wir eine einfache Splash() Methode hinzu.

Jedes Mal, wenn Sie Wellen schlagen möchten, rufen Sie Splash().  Der Index-Parameter bestimmt, auf welcher Feder der Splash erscheinen soll und der Speed-Parameter bestimmt, wie groß die Wellen sein werden.

Rendern

Wir werden die XNA PrimitiveBatch-Klasse aus dem XNA PrimitivesSample verwenden.  Die PrimitiveBatch-Klasse hilft uns, Linien und Dreiecke direkt mit dem Grafikprozessor zu zeichnen.  Sie benutzen es so:

Es sollte beachtet werden, dass Sie standardmäßig die Eckpunkte des Dreiecks im Uhrzeigersinn zeigen müssen.  Wenn Sie sie im Uhrzeigersinn hinzufügen, wird das Dreieck verworfen und Sie werden es nicht sehen.

Für jede Pixelbreite ist keine Feder erforderlich.  In der Demo habe ich eine Quelle 201 verwendet, die sich entlang eines 800 Pixel breiten Fensters ausbreitet.  Dss ergibt genau 4 Pixel zwischen jeder Feder, wobei die erste Feder 0 ist und die letzte 800 Pixel.  Sie könnten wahrscheinlich noch weniger Federn verwenden und trotzdem glattes Wasser haben.

Wir wollen dünne dünne Trapeze zeichnen, die sich vom unteren Rand des Bildschirms bis zur Wasseroberfläche erstrecken und die Federn wie in diesem Diagramm gezeigt verbinden:

Da Grafikkarten Trapeze nicht direkt zeichnen, müssen wir jedes Trapez in Form von zwei Dreiecken zeichnen.  Um es ein wenig besser aussehen zu lassen, machen wir das Wasser auch dunkler, wenn es tiefer wird, und malen die unteren Ecken in blau.  Die GPU interpoliert automatisch die Farben zwischen den Scheitelpunkten.

Hier ist das Ergebnis:


Erstellen Sie ein Spritzer

Die Wellen sehen gut aus, aber ich würde gerne einen Spritzer sehen, wenn der Stein ins Wasser fällt.  Die Partikeleffekte sind dafür ideal.

Teileffekte

Der Partikeleffekt verwendet eine große Anzahl feiner Partikel, um einen visuellen Effekt zu erzeugen.  Sie werden manchmal für Dinge wie Rauch oder Funken verwendet.  Wir werden Partikel für Wassertropfen im Spray verwenden.

Das erste, was wir brauchen, ist eine Klasse von Teilchen:

Diese Klasse speichert einfach die Eigenschaften, die ein Partikel haben kann.  Dann erstellen wir eine Liste von Partikeln.

In jedem Frame müssen wir Partikel aktualisieren und zeichnen.

In jedem Frame müssen wir Partikel aktualisieren und zeichnen.  Dann entfernen wir alle Partikel, die sich außerhalb des Bildschirms oder unter Wasser befinden, kopieren alle Partikel, die wir in der neuen Liste behalten wollen, und Zuweisen von Partikeln.  Dann zeichnen wir die Partikel.

Unten ist die Textur, die ich für Partikel verwendet habe.

Wenn wir jetzt einen Splash erstellen, erzeugen wir eine Menge Partikel.

Sie können diese Methode über die Splash() - Methode aufrufen, mit der wir Wellen erzeugen.  Die Geschwindigkeit des Parameters ist die Geschwindigkeit, mit der der Stein ins Wasser gelangt.  Wir werden große Spritzer machen, wenn sich der Stein schneller bewegt.

GetRandomVector2(40) liefert einen Vektor mit einer zufälligen Richtung und einer Zufallslänge zwischen 0 und 40.  Wir wollen einen Bit der Zufälligkeit der Positionen hinzuzufügen, die die Partikel müssen nicht alle an der gleichen Stelle erscheinen.  FromPolar() gibt Vector2 mit der angegebenen Richtung und Länge zurück.

Hier ist das Ergebnis:

Metabälle als Partikel verwenden

Unsere Sprays sehen ziemlich anständig aus, und einige großartige Spiele, wie zum Beispiel World of Goo, haben Explosionen von Partikeleffekten, die genau wie unsere aussehen.  Ich werde Ihnen jedoch die Technik zeigen, um das Spray flüssiger aussehen zu lassen.  Die Technik verwendet Metabasen, organische Blasen, von denen ich bereits ein Lehrbuch geschrieben habe.  Wenn Sie an Details zu den Metaballs und deren Funktionsweise interessiert sind, lesen Sie dieses Tutorial.  Wenn Sie nur wissen möchten, wie Sie sie auf unsere Spritzer anwenden können, lesen Sie weiter.

Metaballs sehen wie Flüssigkeit aus, weil sie miteinander verschmelzen, wodurch sie sich für unsere flüssige Spritzer macht.  Um metabally zu machen, müssen wir eine neue Klasse Variablen hinzuzufügen:

Was wir initialisieren wie folgt aus:

Dann ziehen wir metaballs:

Die Wirkung des Metaballs hängt von der Anwesenheit einer Teilchenstruktur ab, die verschwindet, wenn Sie sich weiter vom Zentrum entfernen.  Hier ist, wie es aussieht:Die Wassertröpfchen verschmelzen nun zusammen, wenn sie in der Nähe sind. 

So sieht es aus:

Sie sind jedoch nicht mit der Wasseroberfläche verschmelzen.  Sie verschmelzen jedoch nicht mit der Wasseroberfläche. Wir können dies beheben, indem wir der Oberfläche des Wassers einen Gradienten hinzufügen, der es allmählich verschwinden lässt und es zu unserem Ziel macht, einen Metaball zu erzeugen.

Fügen Sie der obigen Methode den folgenden Code in Zeile 9 hinzuGraphicsDevice.SetRendertarget(null):

Nun werden Partikel mit der Wasseroberfläche verschmelzen

Hinzufügen eines Abschrägungseffekt

Wasserteilchen schauen ein wenig flach, und es wäre schön, wenn sie etwas Schatten zu geben.  Im Idealfall wäre, können Sie es im Shader getan.  Damit dieses Tutorial einfach ist, verwenden wir einen schnellen und einfachen Trick: wir werden die Partikel jetzt dreimal mit verschiedenen Schattierungen und Verschiebungen zeichnen, wie in dem Diagramm unten gezeigt.

Dazu wollen wir Partikel metaballa neues Rendering-Ziel erfassen.  Dann werden wir dieses Ziel einmal für jede Farbwiedergabe zeichnen.

Zuerst erklärt eine neue RenderTarget2D sowie für metaballs:

Dann wird anstelle des Zeichnens metaballsTarget direkt in den Pufferpuffer, wollen wir es auf particleTarget ziehen.  Wechseln Sie dazu zu der Methode, in der wir die Metabälle zeichnen, und ändern Sie einfach diese Zeilen:

... damit:

Dann verwenden Sie den folgenden Code, um die Teilchen dreimal mit verschiedenen Schattierungen und Offsets zu ziehen:


Schlussfolgerung

Das ist für die Basis 2D Wasser.  Um zu demonstrieren, habe ich einen Stein, die Sie ins Wasser werfen.  Ich zeichne Wasser mit etwas Transparenz auf die Oberseite des Felsens, so dass es aussieht, als wäre es unter Wasser und verlangsamt es, wenn es aufgrund der Wasserbeständigkeit unter Wasser ist.

Um die Demo ein wenig schöner zu machen, ging ich auf und fand opengameart.org Bild für Felsen und Himmel Hintergrund.  Sie können einen Stein und Himmel bei http://opengameart.org/content/rocks zu finden und opengameart.org/content/sky-backdrop entsprechend.

Advertisement
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.