Share
Ich bin sicher, dass Stage3D den meisten Lesern nicht fremd ist. Es ist die neue API, die AS3-Programmierern Zugriff auf die GPU gibt. Die Codierung gegen Opcodes in Stage3D ist jedoch möglicherweise nicht jedermanns bevorzugte Wahl, daher ist es ein Glück, dass es eine Abkürzung gibt: Starling, eine Bibliothek, die entwickelt wurde, um diese Low-Level-Programmierung zu verkapseln. Und mit Starling kommt auch die Erweiterung der Partikeleffekte. In diesem Tutorial werden wir die Partikelsysteme dieses Frameworks untersuchen und sehen, wie seine Anwendungen auf ein Shoot-Em-Game angewendet werden.
Überspringen Sie diesen Schritt, wenn Sie seit einiger Zeit mit FlashDevelop arbeiten. Für Anfänger, so installieren Sie ein Bibliothekspaket - in diesem Fall Starling und seine Partikelerweiterung. Beachten Sie, dass diese beiden Artikel nicht in einem Paket enthalten sind. Wir müssen sie also separat herunterladen.
Laden Sie zunächst das Starling-Framework und seine Partikelerweiterung aus ihren Repositorys herunter. Nach erfolgreichem Download entpacken. Scannen Sie das erste entpackte Verzeichnis nach src Ordner und fügen Sie die Starling Framework-Bibliothek, die im Bild unten hervorgehoben ist, in den Projektquellordner ein.
Scannen Sie den zweiten Ordner nach der Partikelerweiterung und kombinieren Sie sie. Sie können den hervorgehobenen Ordner unten in den Ordner ziehen Star Mappe. Das Bild unten zeigt das Endergebnis, zu dem Sie gelangen sollten.
Weitere Informationen zu FlashDevelop und zur Verwendung externer Bibliotheken finden Sie in den folgenden Lernprogrammen:
Wenn Sie Starling und seine Partikelerweiterung noch nicht kennengelernt haben, empfehlen wir Ihnen dringend, Lee Brimelows Video-Tutorials zu Starling und Partikeleffekten sowie Matthew Chungs Tutorial zum Umgang mit Animationszuständen mit Starling zu besuchen.
Wir werden hier in zwei Schritten einfach durch die Grundlagen blättern. Wenn Sie bereits mit Starling und seiner Partikelverlängerung vertraut sind, können Sie mit Schritt 4 fortfahren.
Aus dem zweiten Bild des vorherigen Schritts (dem unteren Teil) können Sie erkennen, dass zwei Klassen erstellt werden: Main.as und Testing.as. Die erste fungiert als Starthilfe für die letztere. Der größte Teil unseres Starling-Codes lebt also in Testing.as. Ich habe den wichtigen Code in hervorgehoben Main.as Hier:
private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt var myStarling: Starling = neuer Starling (Prüfung, Stufe); myStarling.simulateMultitouch = true; myStarling.start (); // Starling auf die Bühne einleiten // Maus- / Berührungsereignisse in Starling ausführen lassen // Schlüssel drehen und Motor starten!
… und Testing.as sollte so aussehen:
public class Testing erweitert Sprite public function testing () addEventListener (Event.ADDED_TO_STAGE, init); private Funktion init (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, init); // Code geht hier. stage.color = 0; // Bühnenfarbe in Schwarz umwandeln // Zeichne ein kleines Quad auf der Bühne, // Nur um sicherzustellen, dass alles richtig platziert ist // Beachten Sie, dass die obere linke Ecke des Sprites an der Bühnenmitte ausgerichtet ist. q: Quad = neues Quad (30, 30); addChild (q); q.color = 0xEEEEEE; q.x = stage.stageWidth >> 1; q.y = stage.stageHeight >> 1;
Und wenn alles richtig eingestellt ist, sollten Sie wie unten gezeigt zum Ergebnis kommen. Nicht viel, nur ein Sprite auf der Bühne.
Hinweis: Testing.as dehnt Sprite aus Starling.display.Sprite, nicht flash.display.Sprite. Die Klassen haben denselben Namen, sind aber nicht gleich.
Die Teilchenerweiterung von Starling enthält drei wichtige Klassen. Ihre Funktionalitäten sind unten aufgeführt.
| Name der Klasse | Funktionalität |
Particle.as | Ein einzelnes Teilchen mit einzigartigen Attributen. |
ParticleSystem.as | Steuert den Partikelfluss: Erzeugung, Animation und Recycling. |
ParticleDesignerPS.as | Eine Erweiterung von ParticleSystem.as Einfache Handhabung des Partikelsystems. |
Wir werden eine Instanz von erstellen ParticleDesignerPS.as. Dies erfordert die Eingabe der folgenden Argumente in den Klassenkonstruktor:
Keine Sorge, onebyonedesign.com wird Ihnen dabei helfen. Besuchen Sie ihre Partikeldesigner-Seite und passen Sie diese Initiationswerte nach Herzenslust an. Exportieren Sie dann alle Daten in das ZIP-Format. Diese ZIP-Datei enthält die XML-Datei und das Bild für den Partikeleffekt, den Sie gerade über ihre Webseite gestaltet haben!
Entpacken Sie diese und ziehen Sie sie in Ihren Quellordner in FlashDevelop. Siehe die hervorgehobenen Elemente im Bild unten.
Generieren Sie Importanweisungen, um diese beiden Elemente in Ihre zu übernehmen Testen Klasse. Sie müssen auch das neu schreiben drin Methode in Testen. Sie sind alle unten.
[Embed (source = "particle.pex", mimeType = "application / octet-stream")] private var InitValues: Class [Embed (source = "texture.png")] private var Beispiel: Klasse
private Funktion init (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, init); // Code geht hier. stage.color = 0; // Farbe der Bühne in Schwarz ändern var flow1: ParticleDesignerPS = new ParticleDesignerPS (XML (new InitValues ()), Texture.fromBitmap (new Sample ())); addChild (flow1); flow1.emitterX = stage.stageWidth >> 1; flow1.emitterY = stage.stageHeight >> 1; flow1.start (); Starling.Juggler.add (Fluss1);
Hier ist das Ergebnis, zu dem Sie gelangen sollten. Eher einfach, richtig?
Unser nächster Schritt besteht darin, die Interaktion mit dem Partikelsystem (diesem kleinen Feuer) zur Laufzeit zu ermöglichen. Wir verwenden die Maus, um die Eigenschaften des Feuers zu steuern. Bevor wir dies tun, möchte ich Sie jedoch etwas über das Konzept der Partikelsysteme informieren.
Partikel sind nur Sprites, die von einer Koordinate emittiert werden. Nach der Geburt werden sie in einem bestimmten Muster animiert. Dieses Muster kann für jedes Teilchen eindeutig sein oder für alle Teilchen gemeinsam sein. Aber seien Sie versichert, ihre physikalischen Eigenschaften werden sich mit der Zeit ändern. Zum Beispiel:
Auch ihr Leben auf der Bühne wird bei der Geburt bestimmt. Wenn jeder Partikel für immer auf der Bühne leben darf, haben wir eine Überbevölkerung und die Anwendungsleistung wird durch die Verwendung vieler grafischer Assets beeinträchtigt. Irgendwann stirbt das Partikel, aber es wird nicht von der Bühne geschaufelt. Stattdessen wird es recycelt, indem es in eine Geburtskoordinate verlagert wird und die Rolle eines neuen Partikels übernimmt. Es ist ein neues Teilchen, da dann ein neuer Satz von Eigenschaften für ihn definiert wird, bevor die Animation beginnt und ein weiterer Zyklus fortgesetzt wird.
(Das ist Objektpooling, und Sie können hier sehen, wie Sie es auf Ihre eigenen Nicht-Starling Flash-Projekte anwenden können.)
Okay, wie bezieht sich das auf unser Feuer? Nun, wir können Beschleunigungsfunktionen verwenden, um die Eigenschaften dieses Feuers mit der Zeit zu animieren. Im Rahmen des Starlings, ParticleDesignerPS steht am Ende dieser Hierarchie:
ParticleDesignerPS > Partikelsystem > DisplayObject > EventDispatcher > Objekt
Um ein Gleichgewicht zu finden, verfolgen wir nur die geerbten Eigenschaften von Partikelsystem. Werfen wir einen Blick auf diesen nächsten Schritt…
Accentsconagua
Partikelsystem und ParticleDesignerPS Unten sind die Eigenschaften von Partikelsystem.
| Eigentum | Beschreibung |
Kapazität | Maximale Partikel, die das System jederzeit tragen kann. Erhöht sich in Schritten von 500, wenn die Anzahl der Partikel ihre aktuelle Kapazität übersteigt. Schreibgeschützt. |
numParticles | Anzahl der Partikel im System zu einem bestimmten Zeitpunkt. Schreibgeschützt. |
Emissionspreis | Anzahl der pro Sekunde erzeugten Geburtskoordinaten. |
emitterX, EmitterY | Kontrollpunkt für den Behälter, in dem alle Partikel leben. |
|
| Context3DBlendFactor-Definition für Quelle und Ziel. Ziel bezieht sich auf die Pixelfarbe aus dem letzten Rendering und Quelle bezieht sich auf neue Pixelfarbe, die auf das Ziel gezeichnet werden soll. |
Textur | Aktuelles Bild als Textur von Partikeln abgetastet. Schreibgeschützt. |
Diejenigen ParticleDesignerPS sind in der nächsten Tabelle aufgeführt. Die meisten dieser Eigenschaften können nach Start- und Endzustand fein abgestimmt werden. Zum Beispiel werden alle erzeugten Partikel mit einer Größe von 1,0 initiiert und bei 0,1 beendet. Der Partikelfluss wird jedoch langweilig, wenn alle Partikel in solchen ähnlichen Zuständen initiiert und beendet werden ParticleDesignerPS Rückstellungen für Abweichungen des Anfangswerts und manchmal auch Abweichungen beim Beendigungswert.
Wenn wir in ihrem Beispiel eine Abweichung der ursprünglichen Größe des Partikels von 0,2 angeben, werden aufeinanderfolgende Partikel, die in das System hineingeboren oder recycelt werden, ihre Größe zwischen 0,8 und 1,2 einleiten und bei 0,1 enden.
| Eigentum | Beschreibung |
emitterXVariance, EmitterYVarianz | Variation der Geburtskoordinate. |
startSize, startSizeVariance | Anfangsgröße und Abweichung |
endSize, endSizeVariance | Abschlussgröße und Abweichung |
emitAngle, emitAngleVariance | Anfangsrichtung und Abweichung des Partikels |
Geschwindigkeit, Geschwindigkeitsabweichung | Anfangsgeschwindigkeit und Varianz des Partikels |
gravityX | Beschleunigung entlang der x-Achse auf die Anfangsgeschwindigkeit aller Partikel |
gravityY | Beschleunigung entlang der y-Achse mit der Anfangsgeschwindigkeit aller Partikel |
tangentialAcceleration, tangentialAccelerationVariation | Drehzahl der Partikelgeschwindigkeit und Varianz |
Es gibt zwei Arten von Teilchenströmen, die in vorgesehen sind ParticleDesignerPS: Schwerkraft und radial. In der Tabelle oben sind Eigenschaften dargestellt, die Sie anpassen können, wenn Sie den Schwerkraftfluss verwenden. Für die Schwerkraft liegt der Geburtskoeffizient der Teilchen bei emitterX und EmitterY. Für radial ist die Geburtskoordinate für Teilchen etwas weiter entfernt emitterX und EmitterY, und sie bewegen sich gegenüber es. Die folgende Tabelle zeigt die Eigenschaften der radialen Strömung.
| Eigentum | Beschreibung |
maxRadius, maxRadiusVariance | Maximaler Radius vom Mittelpunkt und Abweichung |
minRadius | Minimaler Radius von der Mitte |
rotationPerSecond, rotationPerSecondVariance | Drehzahl der Partikelgeschwindigkeit |
startColor, startColorVariance | Anfangsfarbe und Varianz |
endColor, endColorVariance | Abbruchfarbe und Abweichung |
Vielen Dank für den kleinen Umweg. Nun zu etwas ActionScript. In dem drin Auf diese Weise fügen wir einen Listener für Touch-Events hinzu.
stage.addEventListener (TouchEvent.TOUCH, Spur);
Und der Hörer wie unten.
Privater Funktions-Track (e: TouchEvent): void var touch: Touch = e.getTouch (stage); // Mapping auf das Koordinatengitter der Bühne // Wenn der Benutzer die Maus drückt und bewegt wird, wenn (touch.phase == TouchPhase.MOVED) // Berechnen Sie den Winkel, um den Partikelfluss zu var distX: Number = touch.globalX - flow1.emitterX; var distY: Anzahl = touch.globalY - flow1.emitterY; var angle: Number = Math.atan2 (distY, distX); t = neuer Tween (flow1, 1.5, Transitions.EASE_OUT_BACK); t.animate ("emitAngle", Winkel); Starling.Juggler.add (t); Um die Animation auszuführen, a Tween Instanz ist definiert. Seine Manipulation ist der von populären ähnlich Tween Motoren in vielerlei Hinsicht. Dann fügen wir es dem Jongleur der aktuellen Instanz von Starling hinzu. Dieses Jongleur - Objekt hilft dabei, das Tween Instanz im Laufe der Zeit.
Das Ergebnis ist unten. Klicken Sie und ziehen Sie Ihre Maus über die Bühne.
Lassen Sie uns jetzt unser Schiff aufstellen und eine Spur darauf legen. Die Assets stammen von opengameart.org und ich habe sie in das Download-Paket aufgenommen. Überprüfen Sie diese Site für andere freie Spielkunst.
Wir fangen von neuem mit einer anderen Klasse an, TestingShip.as. Importiere zuerst das Raumschiff-Image "boss1.png".
[Embed (source = "boss1.png")] private var Schiff: Klasse
… Gefolgt von einem kleinen Setup, um es in der drin Methode:
// das grafische Erscheinungsbild einrichten var shipBMP: Bitmap = new Ship () as Bitmap; // importiere das Asset in ein bmp var shipTEX: Texture = Texture.fromBitmap (shipBMP); // Sample bmp als Textur für das Bild var shipIMG: Image = new Image (shipTEX); // Bild mit Textur erstellt // Ausrichtung des Schiffs einstellen & Position shipIMG.rotation - = Math.PI * 0.5; // das Bild neu ausrichten shipIMG.x - = shipIMG.width >> 1; // weil sich der Ursprung des Bildes in der oberen linken Ecke befindet, shipIMG.y + = shipIMG.height >> 1; // wir positionieren das Bild neu theShip = new Sprite (); // und lege es in ein Sprite. Der Registrierungspunkt ist jetzt zentriert. theShip.addChild (shipIMG); // Sprite auf der Bühne platziert addChildAt (theShip, 0); // Navigationseigenschaften von Schiffslok = neuer Vector2D (stage.stageWidth >> 1, stage.stageHeight >> 1); lof = new Vector2D (0, 10); updateShip ();
Aktualisieren Sie seine Position und Ausrichtung gemäß loc (Standort) und lof (Sichtlinie).
private Funktion updateShip (): void theShip.x = loc.x; theShip.y = loc.y; theShip.rotation = lof.getAngle ();
Klicken Sie erneut auf die Bühne und ziehen Sie sie, um den Effekt zu sehen:
Okay, der Auspuff des Schiffes liegt auf dem Schiff selbst und das Raumschiff reagiert nicht auf Mausereignisse. Wir werden das jetzt beheben. Versetzen Sie einfach die emitterX und EmitterY des Partikelflusses in einiger Entfernung vom Raumschiff und Aktualisierung der Drehung des Raumschiffes mit lof.
(Beachten Sie, dass lof wird bei Mausereignissen aktualisiert. Sie sehen das Skript als nächsten Schritt.)
private Funktion updateShip (): void theShip.x = loc.x; theShip.y = loc.y; theShip.rotation = lof.getAngle (); // Update der Partikelspurverschiebung = new Vector2D (60, 0); offset.setAngle (lof.getAngle ()); flow1.emitterX = loc.x - offset.x; flow1.emitterY = loc.y - offset.y;
Versuchen wir jetzt, beim Versand eines Mausereignisses die Schiffsnavigation zu programmieren. Ich habe nur die wichtigen Zeilen kommentiert:
Privater Funktions-Track (e: TouchEvent): void var touch: Touch = e.getTouch (stage); if (touch.phase == TouchPhase.MOVED) var distX: Number = touch.globalX - flow1.emitterX; var distY: Anzahl = touch.globalY - flow1.emitterY; angle = Math.atan2 (distY, distX); t = neuer Tween (flow1, 1.5, Transitions.EASE_OUT_BACK); t.animate ("emitAngle", Winkel + Math.PI); t2 = neues Tween (theShip, 1.5, Transitions.EASE_OUT); t2.moveTo (touch.globalX, touch.globalY); // Das Schiff verschieben t2.onUpdate = Refresh // Diese Funktion muss aufgerufen werden, wenn die Tween-Engine ausgeführt wird. Starling.juggler.add (t); Starling.Juggler.add (t2); // zu Juggler hinzufügen private Funktion refresh (): void loc.x = theShip.x; // Standort aktualisieren loc.y = theShip.y; lof.setAngle (Winkel); // Orientierung aktualisieren updateShip (); // Update Und hier ist eine Show des Endergebnisses. Ziehen Sie die Maus über die Bühne und das Raumschiff wird dort hingehen.
Lassen Sie uns den Auspuff fein einstellen. Wenn sich das Schiff bewegt, wird der Auspuff definitiv stärker geblasen, richtig? Wir können das verstärken Emissionspreis und Geschwindigkeit Wenn Sie das Schiff bewegen, gehen Sie zurück Emissionspreis wenn es gestoppt ist Hier ist die Veranstaltung, hervorgehoben:
t2 = neues Tween (theShip, 1.5, Transitions.EASE_OUT); t2.moveTo (touch.globalX, touch.globalY); // Das Schiff verschieben t2.onUpdate = refresh // Diese Funktion muss aufgerufen werden, wenn die Tween-Engine ausgeführt wird. t2.onStart = beginState // wenn das Schiff zu bewegen beginnt t2.onComplete = endState //, wenn die Schiffsanimation beendet wird
Und hier sind die Funktionsaufrufe für diese Ereignisse.
private Funktion beginState (): void flow1.emissionRate = 250 flow1.speed = 100; private Funktion endState (): void flow1.emissionRate = 50 flow1.speed = 10;
Klicken und ziehen Sie erneut, und achten Sie auf die Länge des Auspuffs.
Partikel können auch ausdrücken, wie schnell sich das Schiff relativ zu seiner Umgebung bewegt. Überprüfen Sie die Ausgabe unten. Klicken Sie und ziehen Sie Ihre Maus herum. Beobachten Sie die Geschwindigkeit, mit der sich die umgebenden Partikel bewegen. Sie nehmen zu, wenn Sie mit dem Schiff interagieren, und verlangsamen sich, wenn Sie die Interaktion beenden. Sie richten ihre Rotation auch entsprechend aus.
Das Konfigurieren dieses Effekts ist für die von. Präsentierte App relativ einfach onebyonedesign.com. Wir müssen jedoch etwas ActionScript codieren, um es zur Laufzeit ändern zu können. Dies erfordert die nächsten Schritte.
Die Initiierung der Partikel folgt einem ähnlichen Format wie im vorherigen Beispiel. Sie können den Effekt mit der App aus optimieren onebyonedesign.com und in Ihre Bühne importieren. Ich codiere einfach direkt in ActionScript.
envr = new ParticleDesignerPS (XML (new InitValues ()), Texture.fromBitmap (new Sample ())); addChildAt (envr, 0); envr.blendFactorSource = Context3DBlendFactor.ONE envr.blendFactorDestination = Context3DBlendFactor.ONE envr.speed = 10; envr.speedVariance = 20; envr.startSize = 15; envr.startSizeVariance = 0; envr.endSize = 20; envr.endSizeVariance = 20 envr.lifespan = 5,0; envr.lifespanVariance = 4,0; envr.emissionRate = 10 envr.start (); Starling.juggler.add (envr);
Wir müssen den Partikelemitter auch etwas vor dem Schiff platzieren.
envrLoc = new Vector2D (100, 0); envrLoc.setAngle (Winkel);
Und aktualisieren Sie diesen Vektor zur Laufzeit.
// aktualisiere die Umgebung envr.gravityX = -40 * lof.x; // das Teilchen beschleunigt in entgegengesetzter Richtung envr.gravityY = -40 * lof.y; // des Sichtlinienvektors envr.emitterX = loc.x + envrLoc.x; envr.emitterY = loc.y + envrLoc.y;
Sie sehen, die emitterXVariance und EmitterYVarianz behandeln Sie die Achsen separat. Dies bedeutet, dass wir, wenn wir das Raumschiff drehen, ein Mittel benötigen, um die Länge der Ausbreitung entlang dieser beiden Achsen zu bestimmen.
Überprüfen Sie nun den Vektor auf die Sichtlinie. Es ist immer senkrecht zu der der Ausbreitungslinie (der dünnen dunklen Linie). Wir können diesen Vektor entsprechend skalieren und dessen x und y mit denen der Emittervarianz am Startpunkt schwenken. Überprüfen Sie die Demo unten. Klicken Sie und ziehen Sie Ihre Maus. Sie sehen den Partikelstrom lebhafter.
Skalieren Sie schließlich das Ausmaß der Ausbreitung und platzieren Sie es etwas weiter vor dem Schiff, damit die Spieler ihren Emissionspunkt nicht sehen können.
envrLoc = new Vector2D (200, 0); envrLoc.setAngle (Winkel);
// aktualisiere den Spread Spread = envrLoc.clone (); Ausbreitungsskala (0,5); envr.emitterXVariance = spread.y; envr.emitterYVariance = spread.x;
Schließlich, während das Schiff beschleunigt, vergrößern wir die Größenordnung von gravityX und gravityY, plus dem Auspuff entsprechend.
if (touch.phase == TouchPhase.MOVED) var distX: Number = touch.globalX - flow1.emitterX; var distY: Anzahl = touch.globalY - flow1.emitterY; angle = Math.atan2 (distY, distX); // animiere den Auspuff t = new Tween (flow1, 1.5, Transitions.EASE_OUT_BACK); t.animate ("emitAngle", Winkel + Math.PI); Starling.Juggler.add (t); // den Abgasstrom steuern1.speed = 350; flow1.endSize = 70; // orientiere das Schiff und den Winkel der Parallaxe lof.setAngle (Winkel); lof.setMagnitude (10); // die Größe der Beschleunigung anpassen envrLoc.setAngle (Winkel); if (touch.phase == TouchPhase.ENDED) // den Abgasstrom steuern1.speed = 100; flow1.endSize = 10; lof.setMagnitude (5); // die Größe der Beschleunigung anpassen Während Sie im Spiel vorankommen, werden Sie definitiv Schläge erleiden und Schaden erleiden. Wenn der Schaden stark wird, wird Ihr Schiff verbrennen. Ein solcher Effekt kann hier erzeugt werden; wir können das nutzen emissionXVarianz und EmissionYVarianz um den Brandbereich zu definieren. Ich habe sie im Code unten hervorgehoben.
envr = new ParticleDesignerPS (XML (new InitValues ()), Texture.fromBitmap (new Sample ())); addChildAt (envr, 2); envr.blendFactorSource = Context3DBlendFactor.ONE_MINUS_SOURCE_ALPHA envr.blendFactorDestination = Context3DBlendFactor.ONE; envr.emitterXVariance = theShip.width >> 2; envr.emitterYVariance = theShip.height >> 2; envr.emitAngle = 0; envr.emitAngleVariance = Math.PI; envr.speed = 0; envr.startSize = 40; envr.startSizeVariance = 0; envr.endSize = 10; envr.endSizeVariance = 0 envr.lifespan = 5,0; envr.lifespanVariance = 3,0; envr.emissionRate = 10; envr.start (); Starling.juggler.add (envr);
Die Stärke des Schadens wird durch die Verbrennungsfläche und -intensität angezeigt. Erhöhen und verringern Emissionspreis um dies zu simulieren. Ich habe Steuerelemente auf der Tastatur "A" und "S" hinzugefügt, um dies zu emulieren.
private function controlBurn (e: KeyboardEvent): void if (e.keyCode == Keyboard.A) if (envr.emissionRate.) < 150) envr.emissionRate += 10; if (envr.lifespan < 8) envr.lifespan += 0.5; if (e.keyCode == Keyboard.S) if(envr.emissionRate > 10) envr.emissionRate - = 10; wenn (envr.lifespan> 5) envr.lifespan - = 0,5;
Wenn Sie die Lebensdauer von Partikeln verlängern, scheint das Feuer stärker zu brennen. Nun, es braucht Zeit, um Partikel von ihrer ursprünglichen Größe bis zur Endgröße zu interpolieren. Wenn Sie also die Lebensdauer erhöhen, ist der Übergang vom größeren Anfang zu einer kleineren Endgröße länger. Je mehr große Partikel länger an der gleichen Stelle bleiben, vermischen sie sich zu einem intensiveren Feuer.
Drücken Sie die Taste "A", um das Feuer stärker zu brennen, und die Taste "S", um es etwas zu löschen. Die Farbe des Auspuffes hat sich geändert, um ihn von der Verbrennung zu unterscheiden:
Alle guten Spiele müssen irgendwann enden. Unabhängig davon, wer eliminiert wird, sollte eine gute Explosion für ein Ziel nicht fehlen. Wie wäre es also mit einer Atompilzwolke? Klicken Sie auf die Demo, um eine zu sehen.
Jetzt lasst es uns kodieren.
Dieser Partikelfluss unterscheidet sich ein wenig von dem, den wir gesehen haben. Bisher haben wir den Partikelstrom Typ 0 (Schwerkraft) verwendet, und dies ist Typ 1 (radial). Die Partikel bewegen sich tatsächlich mit konstanter Geschwindigkeit in die Mitte.
Ich habe die Abstrahlwinkelabweichung auf den höchsten Wert eingestellt, so dass Sie sehen, dass alle erzeugten Partikel einen Kreis bilden. Dann, durch Animieren des maximalen Radius und des minimalen Radius, in dem diese Partikel mit der Zeit leben sollten, verwenden Sie a Tween, wir erreichen dieses ergebnis.
explosion = new ParticleDesignerPS (XML (neue InitValues ()), Texture.fromBitmap (neues Sample ())); addChild (explosion); explosion.emitterX = stage.stageWidth >> 1; explosion.emitterY = stage.stageHeight >> 1; explosion.emitterType = 1; explosion.emitAngle = 0; explosion.emitAngleVariance = Math.PI; explosion.maxRadius = 10; explosion.maxRadiusVariance = 0; explosion.minRadius = 0;
Hier ist der Code zum Ausführen der Animation.
Privater Funktions-Track (e: TouchEvent): void var touch: Touch = e.getTouch (stage); if (touch.phase == TouchPhase.BEGAN) explosion.emitterX = touch.globalX; explosion.emitterY = touch.globalY; explosion.start (); t = neues Tween (Explosion, 1.0, Transitions.EASE_IN); t.animate ("maxRadius", 150); t.animate ("minRadius", 130); t.onStart = einfrieren t.onComplete = reset; Starling.Juggler.add (t); private Funktion freeze (): void stage.removeEventListener (TouchEvent.TOUCH, track); private Funktion reset (): void stage.addEventListener (TouchEvent.TOUCH, track); Explosionsstopp (); explosion.maxRadius = 10; explosion.minRadius = 0; Das war also ein langwieriges Tutorial. Lassen Sie uns hier eine kleine Zusammenfassung machen. Wir haben durchgemacht:
Wir haben hier einiges besprochen. Ein wichtiger Aspekt, den ich noch nicht durchgemacht habe, ist es, von zu erweitern Partikelsystem. Dies gibt Ihnen die Möglichkeit, Ihre eigenen Partikelspuren zu codieren, anstatt sich darauf zu verlassen ParticleDesignerPS. Ich muss das auf ein anderes Tutorial verschieben.
Danke fürs Lesen und bis zum nächsten Tutorial. Lassen Sie Kommentare zu Fehlern und zur Verwendung dieser Partikel-Engine in Ihrem Projekt, wenn Sie sie übernehmen.
