Share
In diesem Quick Tipp verwenden wir die ColorMatrixFilter und BlurFilter einen Motion-Trail-Effekt erstellen.
Wir haben diesen großartigen Autor dank FlashGameLicense.com, dem Ort zum Kaufen und Verkaufen von Flash-Spielen, gefunden.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Erstellen Sie in FlashDevelop ein neues Projekt (oder welchen Editor Sie verwenden), legen Sie die Abmessungen der SWF-Datei auf 600x400 und den Hintergrund auf Schwarz (# 000000) fest..
Um die Szene einzurichten, werden wir zwei haben Sprites, Eine ist für die Hauptanzeige, zu der wir alle Anzeigeobjekte hinzufügen werden, und die andere ist für den Bewegungsspureffekt, der die Hauptanzeige als Referenz verwendet.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Und füge das hinzu Sprites zum Bühne.
// // Displays einrichten // Wir müssen unsere beiden Displays zur Bühne hinzufügen addChild (_mtDisplay); addChild (_mainDisplay);
Jetzt werden wir unser Sternbild für die Verwendung einbetten oder wenn Sie Ihr eigenes Bild verwenden möchten.
[Einbetten (source = '… /… /images/star.png')] var star: Klasse;
Das letzte, was wir für das Setup tun wollen, ist ein Schleife Funktion. Dies wird für jeden Frame aktualisiert, z. B. zum Positionieren und Aktualisieren des Bewegungspfads. Erstellen Sie also eine weitere Funktion und einen Ereignis-Listener, um sie bei jedem Frame aufzurufen.
Ihre Main.as Klasse sollte so aussehen.
package rtmTrail import flash.display.Sprite; import flash.events.Event; public class Main erweitert Sprite public function Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Bilder laden [Einbetten (source = '… /… /images/star.png')] var star: Class; // // Displays einrichten // Wir müssen unsere beiden Displays zur Bühne hinzufügen addChild (_mtDisplay); addChild (_mainDisplay); // Füge einen neuen Event Listener für unsere Schleifenfunktion hinzu, // wenn wir // den Frame zum Bewegen der Sprites eingeben und unseren MotionTrail-Effekt aktualisieren addEventListener (Event.ENTER_FRAME, loop); private Funktionsschleife (e: Event): void private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Um den Motion Trail zu testen, werden wir zehn erstellen Sprites aus dem Sternbild und positionieren Sie sie an beliebigen Orten. Zusätzlich erstellen wir eine Punkt das sagt uns die Geschwindigkeit und Richtung, in die sie sich bewegen werden. Zuerst müssen Sie zwei erstellen Arrays um diese Informationen zu speichern; einer ist für die Sprite und der andere ist für die Punkt.
private var _sprites: Array = neues Array (); private var _spritesDir: Array = neues Array (); private var _txt: TextField = neues TextField ();
Fügen Sie dies dem hinzu drin Funktion zum zufälligen Erstellen und Platzieren von zehn Sternen.
// Zeichne einige Sterne var spr: Sprite; var bmp: Bitmap; für (var i: int = 0; i < 10; i++) spr = new Sprite(); bmp = new star(); spr.addChild(bmp); bmp.smoothing = true; spr.x = Math.random() * 240 + 80; spr.y = Math.random() * 240 + 80; // We are going to add the new sprite into the _sprites Array and a // Point that tells us where to move the sprite in the _spritesDir Array. _sprites.push(spr); _spritesDir.push(new Point(Math.random() * 6, Math.random() * 6)); // Last thing to do is add it to our main Display _mainDisplay.addChild(spr);
Jetzt das erstellen Textfeld füge das hinzu.
Accentsconagua
// füge ein Textfeld hinzu _txt.defaultTextFormat = new TextFormat ("arial", 18, 0xFF00FF); _txt.text = "Echtzeitbewegungsspur" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Jetzt müssen wir in unser einziehen Schleife Funktion für Sprite Bewegungssteuerung. Ziemlich einfach, benutze a zum Schleife durchlaufen Sprite Wir haben und wenn es die Kante trifft, invertieren Sie das x oder y der Punkt so geht es in die andere richtung. Wir müssen das Sprite in der Schleife auch um die Werte in der verschieben Punkt und, um es interessanter zu machen, drehen Sie es langsam.
private Funktionsschleife (e: Event): void // Aktualisieren Sie die Sprite-Formen für (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -_spritesDir [i] .x; if (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Verschiebe die Sprite-Form _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Sprite-Form drehen _sprites [i] .rotation + = 2;
Um das zu bewegen Textfeld Oben nach links müssen wir nur von der x jedes Frame, und wenn es aus dem Bildschirm geht, setzen Sie es wieder auf die rechte Seite des Bildschirms.
private Funktionsschleife (e: Event): void // Aktualisieren Sie die Sprite-Shapes für (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -_spritesDir [i] .x; if (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Verschiebe die Sprite-Form _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Sprite-Form drehen _sprites [i] .rotation + = 2; // Verschiebe Text _txt.x - = 4 if (_txt.x < -200) _txt.x = 600;
Wenn Sie es getestet haben, sollten Sie so etwas sehen (mit den Sternen und dem Text, die sich natürlich auf dem Bildschirm bewegen).
Jetzt ist es an der Zeit, unser zu machen MotionTrail Klasse. Was diese Klasse tun wird, ist ein DisplayObject die zu einer eigenen Anzeige gezeichnet wird (a Sprite) und mit ein paar Filtern, verblasst und unscharf.
Also mach dein neues MotionTrail.as Klasse und lass es das verlängern Sprite Klasse.
Für ein wenig Vorbereitung auf die nächsten Schritte erstellen wir zunächst einige Variablen _Anzeige um eine Referenz der Hauptanzeige zu speichern, a BitmapData zu zeichnen a Rechteck die Größe der Bühne und a Punkt in der oberen linken Ecke für die Filter. Das letzte ist ein Array für die ColorMatrixFilter.
package rtmTrail import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.DisplayObject; import flash.display.Sprite; import flash.geom.Point; import flash.geom.Rectangle; public class MotionTrail erweitert Sprite öffentliche Funktion MotionTrail (display: DisplayObject) // Verweis auf die für die Bewegungsspur verwendete Anzeige _display = display; // Ein BitmapData-Objekt zum Zeichnen erstellen // Wenn Sie dieses Objekt für Ihr eigenes Projekt verwenden möchten und die Abmessungen nicht 600x400 sind, müssen Sie es hier und das Rechteck unter _bitmapData = new BitmapData (600, 400) ändern wahr 0x000000); // Einige Sachen, die die Filter eingeben müssen, damit sie funktionieren _rect = new Rectangle (0, 0, 600, 400); _pnt = neuer Punkt (0, 0); _cMatrix = neues Array (); // Füge ein wenig Transparenz hinzu, damit die Aufmerksamkeit nicht vom Hauptdisplay abhängt. Alpha = 0.6; addChild (neue Bitmap (_bitmapData)); private var _display: DisplayObject; private var _bitmapData: BitmapData; private var _rect: Rechteck; private var _pnt: Punkt; private var _cMatrix: Array;
Da wir diese Klasse gemacht haben, müssen wir sehr schnell wieder zurückkehren _mtDisplay Variable und ändern Sie es aus der Sprite Klasse zum MotionTrail Klasse, zusammen mit der Eingabe der _mainDisplay Variable.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: MotionTrail = new MotionTrail (_mainDisplay);
Um unser zu schaffen Matrix für die ColorMatrixFilter, Die Grundidee besteht darin, die Farben auszublenden, so dass wir langsam alle Werte auf null reduzieren. Fügen Sie dies dem hinzu Konstrukteur.
// Matrix für ColorMatrixFilter erstellen _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 0]) // Rot _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Grünes _cMatrix = _cMatrix.concat ([0, 0, 0,92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) // Alpha
Dadurch wird jeder Wert jedes Pixels mit 0,92 multipliziert, und dabei wird jedes Bild kleiner und kleiner, bis es im Grunde bei 0 seine Grenze erreicht. Je näher die Werte an 1,0 liegen, desto länger dauert es, bis Null erreicht wird, was bedeutet ein längerer Weg (und umgekehrt: je näher der Wert 0,0, desto kürzer der Weg).
Jetzt erstellen wir die ColorMatrixFilter und das BlurFilter.
Das ColorMatrixFilter wird das verwenden Array Wir haben gerade gemacht und wir werden zwei schaffen BlurFilters. Ich fand das mit zwei BlurFilters gibt einen schönen Impulseffekt und es verwischt nicht zu langsam oder zu schnell, aber wenn Sie eher einen haben, ist das auch gut.
Fügen Sie zuerst die Variablen für die Filter hinzu.
private var _cFilter: ColorMatrixFilter; private var _bFilter: BlurFilter; private var _bFilter2: BlurFilter;
Erstellen Sie die Filter im Konstruktor
_cFilter = neuer ColorMatrixFilter (_cMatrix); _bFilter = neuer BlurFilter (2, 2, 1); _bFilter2 = neuer BlurFilter (8, 8, 1);
Nun ist es an der Zeit, eine Funktion zum Aktualisieren unserer Motion Trails zu erstellen. Machen Sie eine Funktion, die aufgerufen wird aktualisieren in dem MotionTrail Klasse. Um den Weg zu machen, müssen wir das Hauptdisplay auf das Symbol ziehen BitmapData Jeder Frame, der den Spureffekt bewirkt.
public function update (): void // Anzeige auf BitmapData zeichnen _bitmapData.draw (_display);
Sie sollten jetzt eine Spur haben, wenn Sie sie ausführen, aber natürlich verschwinden die Bewegungsspuren, und wir lassen sie mit den Filtern, die wir im letzten Schritt erstellt haben, verschwinden.
Jetzt können wir die Filter auf die anwenden BitmapData. Wir benutzen das Gleiche BitmapData für die Quelle, die _richtig und _pnt Variablen für die sourceRect und destPoint und zuletzt ist der Filter, den wir anwenden möchten.
Da wir ein paar Filter haben, möchten wir nicht alle auf jeden Frame anwenden, da dies die Geschwindigkeit zu sehr verlangsamen würde. Stattdessen wechseln wir die ColorMatrixFilter und BlurFilter in verschiedenen Frames arbeiten und die BlurFilters genauso auch.
Um sie umzuschalten, haben wir eine Variable, die den Frame überwacht und den Moduloperator zur Überprüfung verwendet.
private var _count: Anzahl = 0;
public function update (): void // Anzeige auf BitmapData zeichnen _bitmapData.draw (_display); // Effekte auf BitmapData anwenden if (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); else if (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); else _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Anzahl erhöhen _count ++;
Nun das das aktualisieren Funktion ist beendet, wir fügen sie unserem hinzu Schleife Funktion.
// Bewegungsunschärfe aktualisieren _mtDisplay.update ();
Genial! Wir sind mit diesem Quick-Tipp fertig und können ihn testen.
Sie sollten dasselbe Ergebnis wie das Beispiel-swf erhalten haben, und Sie können jetzt versuchen, es zu erweitern. Es gibt viele verschiedene Effekte, die Sie machen können, die meisten davon, wenn Sie den ColorMatrixFilter verstehen.
Sie können beispielsweise die Farbe des Pfades in Rot einblenden, indem Sie Folgendes tun:
// Roter Wert jedes Mal um 30 versetzen _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Rot _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Grün _cMatrix = _cMatrix.concat ([0, 0, 0,92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) // Alpha
Oder Sie können auch die Farben wechseln, um alle Pfade blau zu machen:
// Nur blaue Spuren _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Rote _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Grüne _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Danke fürs Lesen. Ich hoffe, Sie alle haben daraus etwas gelernt und es wird sich in Zukunft als nützlich erweisen, möglicherweise ein cooles neues Spiel, das diesen Effekt verwendet.
