Particles

Gabriel Schowe

Partikelsysteme

Um den Antrieb des Raumschiffes oder eine Explosion darzustellen, kann man eine Animation programmieren oder Partikel benutzen. Für die Darstellung im Space-Game entschieden wir uns für Partikel. Partikel sind kleine zwei dimensionale Objekte, die aber eine drei dimensionale Position im Raum besitzen und von der Grafikkarte berechnet werden, damit der Prozessor nicht vollständig ausgelastet wird. Für den Antrieb braucht man einen konstanten Strahl an Partikeln in eine Richtung mit der selben Farbe und eine passende Textur für die Objekte. Three.js bietet hierzu eine Librarie namens PointsMaterial an. Der PointsMaterial Konstruktor erstellt einen Partikel mit Farbe, Textur, Größe, Seitenverhältnis Anpassungen, VertexColors und fog. Der Antrieb wurde durch eine Funktion realisiert, die bei jedem Renderer durchlauf die Position der Partikel um einen kleinen Betrag verschiebt. Aus Performancegründen wurden für den Antrieb einmal eine bestimmte Anzahl Partikel initialisiert, die dann an ihrem Endpunkt zurückgesetzt werden. Die ganzen Funktionen sind in einem RayParticleRender niedergeschrieben.

Explosion

Bei der Explosion müssen die Partikel zufällig in alle Richtungen fliegen und dabei möglichst kugelförmig bleiben. Die Animation der Explosion wird bei einem Treffer des Lasers auf Asteroiden und Power-UPs, sowohl auch bei der Rakete, verwendet. Da die Explosionen unterschiedlich ausfallen sollen, wurde die Klasse individueller gestaltet, so dass man die Methode an einer Stelle aufruft und sie dann anpasst, bis sie den Bedingungen entspricht.

Die Individualität wird durch die Variablen "particleColor, nParticles, particleTexture, lifetime, startVector, speed, size" realisiert. Die Lifetime gibt hierbei an, wie lange ein Partikel sich bewegen soll, bevor es aus der "Scene" entfernt wird, da diese keinen Zielpunkt besitzen. Dies ist soweit von Bedeutung, damit die Partikel sich nicht endlos durch die Scene bewegen. Die Explosion ist durch eine einfache Funktion dargestellt.

particle.velocity.x += (Math.random() - 0.5) * this.speed;

Die Funktion weist jedem Partikel beim Update eine zufällige Richtung zu auf allen 3 Koordinanten. Der "Speed" wird ebenfalls von den Nutzern vorgegeben, damit die Partikel in kurzer Zeit weiter streuen, um so die gewünschte Effekte zu erzielen. Nach ausgiebigen Testen der Partikelanzahl sind die Werte zwischen 2500, für eine kleine Explosion, und 10.000, für eine große Explosion, gewählt.

Implosion

Mit der Erstellung einer Explosion kam der Gedanke auf, dass dies auch umgekehrt funktionieren würde. Als genauer festgelegt wurde, wie die Raketenexplosion animiert werden soll, sollte beim Aufprall erst eine Implosion kommen, dann eine Explosion, gefolgt von einem Halo. Die Implosion war der Explosion ähnlich, da sie aber Grundlegend anders funktioniert, musste sie als eigenständige Klasse erstellt werden. PointsMarterial und die Update-Funktion sind mit kleinen Änderungen übernommen. Die Berechnung der Geschwindigkeit und Richtung der Partikel muss anders berechnet werden. Die Implosion sollte kugelförmiger dargestellt werden als die Explosion und die Partikel besitzen diesmal einen Endpunkt, der mit einer gewissen Anziehungskraft auf sie wirken sollte. Folglich wurde anhand der Definition eines Kreises

var angle = Math.PI 2 Math.random();

particle.x += Math.cos(angle) Math.cos(lambda) radius;

dieser Definiert und erstellt. Bei der Update-Funktion wurde die derzeitige Geschwindigkeit vervierfacht, damit die Partikel stärker mit laufender Zeit angezogen werden.

Halo

Der Halo sollte als Ring dargestellt werden mit einer gewissen Höhe. Die Partikel erhalten bei der ersten Erstellung ihre Position mit:

particle.x += Math.cos(angle) * radius + Math.random() - 0.5;

particle.y += (Math.random()-0.5)*2;

Durch die Begrenzung der y-Achse entsteht so ein sich ausdehnender Ring. Dieser wurde dann ans Ende der Implosion gehängt, um so eine Raketenexplosion passender darzustellen. Als variabler Parameter ist der Radius hinzugefügt, damit die Ringe unterschiedlicher Größe dargestellt werden können.

Shockwave

Die "Shockwave" ist ein Waffentyp, die der Darstellung der Explosion ähnelt, jedoch an der Position des Schiffes aufgerufen wird. Der Unterschied hier liegt bei dem Radius, da die Shockwave sich kugelförmig vom Mittelpunkt ausbreiten soll. Da sich diese dadurch in starken Punkten von der Explosion unterscheidet, wurde hierzu ebenfalls eine neue Klasse geschrieben. Die Shockwave verwendet zur Kreisberechnung den selben Code wie die Implosion. Unterscheiden tun sich beide nur in der Updatefunktion, da die Shockwave sich ausdehnt und somit mit

particle.x += particle.velocity.x 0.1 + (Math.random() - 0.5) 0.1;

die Position der 3D-Koordinanten der Partikel geupdatet wird.

Der Partikelhändler

Der Partikelhändler wurde zum leichteren aufrufen der benötigen Partikeleffekte geschrieben. Im Partikelhändler werden die derzeitigen Aufrufe der einzelnen Funktionen in Arrays gespeichert. Mit "add(Animationsname)" kann die benötigte Animationen aufgerufen werden. Zur einfachen Bedienung wurden nur Parameter, wie Farbe und Anzahl, zur Verfügung gestellt. Lediglich die Position der Explosion muss noch übergeben werden. Angaben wie Speed und Size bekommen Default-Werte, falls diese vorher nicht gesetzt wurden. Die restlichen Parameter, wie Textur, Radius und Partikelanzahl werden von dem Partikelhändler gesetzt, um so Dateipfade oder Partikelmassen einzugrenzen. Mit der Methodik "addExplosion: addExplosion," kann nun von außen auf diese Funktionen zugegriffen und aufgerufen werden. Bei "addImplosion" wird von dem Partikelhändler auch die passende Explosion und der Halo erstellt, um so die Animation in der richtigen Reihenfolge die Partikeleffekte aufzurufen. Eine Trennung einzelner Teile der Implosion wurden zum Ende des Praktikums noch nicht benötigt.