Share
In deze Quick Tip gebruiken we de ColorMatrixFilter en BlurFilter om een Motion Trail-effect te creëren.
We vonden deze geweldige auteur dankzij FlashGameLicense.com, dé plek om Flash-spellen te kopen en verkopen.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Maak een nieuw Project in FlashDevelop (of welke editor je ook gebruikt), stel de afmetingen van de swf in op 600x400 en de achtergrond op zwart (# 000000).
Om vervolgens de scène in te stellen, zullen we er twee hebben Sprites, één is voor het hoofdscherm waaraan we alle weergave-objecten toevoegen en de andere is voor het Motion Trail-effect dat het hoofdscherm als een referentie gebruikt.
private var _mainDisplay: Sprite = new Sprite (); privé var _mtDisplay: Sprite = nieuwe Sprite ();
En voeg de Sprites naar de Stadium.
// // Displays instellen // We moeten onze twee weergaven toevoegen aan de Stage-addChild (_mtDisplay); addChild (_mainDisplay);
Nu gaan we onze sterrenafbeelding voor gebruik insluiten, of als u uw eigen afbeelding wilt gebruiken.
[Embed (source = '... / ... /images/star.png')] var star: Class;
Het laatste dat we willen doen voor de setup is het maken van een lus functie. Dit wordt elk frame bijgewerkt, voor zaken als het positioneren en updaten van de Motion Trail. Dus maak een andere functie en een gebeurtenislistener om het elk frame te noemen.
Jouw Main.as klasse zou er ongeveer zo uit moeten zien.
pakket rtmTrail import flash.display.Sprite; import flash.events.Event; public class Hoofd breidt uit openbare functie Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); private function init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Afbeeldingen laden [Embed (source = '... / ... /images/star.png')] var star: Class; // // Displays instellen // We moeten onze twee schermen toevoegen aan de fase addChild (_mtDisplay); addChild (_mainDisplay); // Voeg een nieuwe gebeurtenis-luisteraar toe voor onze loop-functie telkens wanneer we // het frame invoeren om de sprites te verplaatsen en ons MotionTrail-effect addEventListener (Event.ENTER_FRAME, loop) bij te werken; persoonlijke functie lus (e: Event): void private var _mainDisplay: Sprite = new Sprite (); privé var _mtDisplay: Sprite = nieuwe Sprite ();
Om de Motion Trail te testen, gaan we er tien maken Sprites van het sterrenbeeld en plaats ze op willekeurige plaatsen. Daarnaast gaan we een maken Punt dat vertelt ons de snelheid en richting waarin ze zullen bewegen. Het eerste dat u moet doen, is er twee maken arrays om deze informatie op te slaan; een is voor de sprite en de andere is voor de Punt.
private var _sprites: Array = new Array (); private var _spritesDir: Array = new Array (); private var _txt: TextField = new TextField ();
Voeg dit toe aan de in het functie om willekeurig tien sterren te maken en te plaatsen.
// Teken enkele sterren var spr: Sprite; var bmp: Bitmap; for (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);
Nu om het te maken TextField Voeg dit toe.
Accentsconagua
// Voeg een tekstveld toe _txt.defaultTextFormat = new TextFormat ("arial", 18, 0xFF00FF); _txt.text = "Real Time Motion Trail" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Nu moeten we naar onze lus functie voor sprite bewegingscontrole. Redelijk eenvoudig, gebruik a voor lus om ze allemaal te doorlopen sprite we hebben en als het de rand invers raakt, de x of y van de Punt dus het gaat de andere kant op. We moeten ook de sprite in de lus verplaatsen door de waarden in de Punt en, om het interessanter te maken, draai het langzaam.
persoonlijke functielus (e: Event): void // Werk de Sprite Shapes bij voor (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; // Verplaats de Sprite Shape _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Roteer Sprite Shape _sprites [i] .rotation + = 2;
Verplaatsen van de TextField over de bovenkant aan de linkerkant hoeven we alleen af te trekken van de X eigenschap elk frame en als het van het scherm verdwijnt, zet het dan terug naar de rechterkant van het scherm.
persoonlijke functielus (e: Event): void // Werk de Sprite Shapes bij voor (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; // Verplaats de Sprite Shape _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Roteer Sprite Shape _sprites [i] .rotation + = 2; // Verplaats tekst _txt.x - = 4 if (_txt.x < -200) _txt.x = 600;
Na het te hebben getest, had je zoiets moeten zien (waarbij de sterren en tekst natuurlijk over het scherm bewogen).
Nu is het tijd om onze te maken MotionTrail Klasse. Wat deze klas gaat doen, is een nemen DisplayObject die naar zijn eigen scherm wordt getrokken (a sprite) en het gebruik van een paar filters, vervaagd en wazig.
Dus maak je nieuwe MotionTrail.as Klasse en laat het uitbreiden sprite Klasse.
Voor een kleine pre-setup voor de komende stappen gaan we een paar variabelen maken, eerst de _weergeven om een referentie van het hoofddisplay op te slaan, a BitmapData tekenen naar, a Rechthoek de grootte van het podium en een Punt in de linkerbovenhoek voor de filters. Het laatste is een reeks voor de ColorMatrixFilter.
pakket 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 klasse MotionTrail breidt uit openbare functie MotionTrail (display: DisplayObject) // Verwijzing naar het display dat wordt gebruikt voor het bewegingspad _display = display; // Maak een BitmapData-object om naartoe te tekenen naar // Als u dit voor uw eigen project wilt gebruiken en de dimensies niet 600x400 // zijn, dan zou u dit hier moeten wijzigen en de rechthoek onder _bitmapData = new BitmapData (600, 400 , waar, 0x000000); // Sommige dingen die de filters moeten invoeren om te werken _rect = new Rectangle (0, 0, 600, 400); _pnt = nieuw punt (0, 0); _cMatrix = nieuwe array (); // Voeg een beetje transparantie toe zodat het geen aandacht wegneemt van het hoofdscherm alpha = 0.6; addChild (nieuwe Bitmap (_bitmapData)); privé var _display: DisplayObject; private var _bitmapData: BitmapData; privé var _rect: Rectangle; private var _pnt: Point; private var _cMatrix: Array;
Aangezien we deze klas hebben gemaakt, moeten we snel terug naar de _mtDisplay variabele en verander het van de sprite Klasse voor de MotionTrail Klasse, samen met het invoeren van de _mainDisplay veranderlijk.
private var _mainDisplay: Sprite = new Sprite (); privé var _mtDisplay: MotionTrail = nieuwe MotionTrail (_mainDisplay);
Om onze te maken Matrix voor de ColorMatrixFilter, het basisidee is om de kleuren weg te laten verdwijnen, zodat we alle waarden langzaam terugbrengen tot nul. Voeg dit toe aan de bouwer.
// Maak matrix voor ColorMatrixFilter _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 0]) // Rood _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Groen _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Hiermee vermenigvuldigt u elke waarde van elke pixel met 0,92 en bij elk frame wordt deze kleiner en kleiner totdat deze in feite zijn limiet bereikt op 0. Dus hoe dichter de waarden bij 1,0 liggen, hoe langer het duurt om nul te bereiken, wat betekent een langer pad (en omgekeerd: hoe dichter bij 0,0 hoe korter het pad).
Nu maken we de ColorMatrixFilter en de BlurFilter.
De ColorMatrixFilter gaat het gebruiken reeks we hebben net gemaakt en we gaan er twee maken BlurFilters. Ik vond dat met twee BlurFilters geeft een leuk pulseffect en vervaagt niet te langzaam of te snel, maar als je er liever een hebt, is dat ook goed.
Voeg eerst de variabelen voor de filters toe.
privé var _cFilter: ColorMatrixFilter; privé var _bFilter: BlurFilter; privé var _bFilter2: BlurFilter;
Maak de filters in de constructor
_cFilter = new ColorMatrixFilter (_cMatrix); _bFilter = nieuwe BlurFilter (2, 2, 1); _bFilter2 = nieuwe BlurFilter (8, 8, 1);
Nu is het tijd om een functie te maken om onze Motion Trails bij te werken. Maak een functie genaamd bijwerken in de MotionTrail Klasse. Om het parcours te maken, moeten we het hoofdscherm tekenen naar de BitmapData elk frame dat het pad effect geeft.
public function update (): void // Teken weergave op BitmapData _bitmapData.draw (_display);
Je zou nu een trail moeten hebben als je het uitvoert, maar natuurlijk verdwijnen Motion Trails en zullen we het vervagen met de filters die we in de laatste stap hebben gemaakt.
Nu kunnen we de filters toepassen op de BitmapData. We gebruiken hetzelfde BitmapData voor de bron, de _rect en _pnt variabelen voor de sourceRect en destPoint respectievelijk, en laatste is het filter dat we willen toepassen.
Omdat we een paar filters hebben, willen we ze niet allemaal op elk frame toepassen, omdat dat te veel zou vertragen. In plaats daarvan gaan we de ColorMatrixFilter en BlurFilter om in verschillende frames te werken en de BlurFilters op dezelfde manier.
Om ze om te wisselen, hebben we een variabele om het frame bij te houden en de module-operator te gebruiken om te controleren.
private var _count: Number = 0;
public function update (): void // Teken weergave op BitmapData _bitmapData.draw (_display); // Toepassen Effecten op BitmapData als (_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); // Verhoogtelling _count ++;
Nu dat het bijwerken functie is voltooid, voegen we deze toe aan onze lus functie.
// Update Motion Blur _mtDisplay.update ();
Geweldig! We zijn klaar met deze snelle tip en je kunt het testen.
Je had hetzelfde resultaat moeten hebben als het voorbeeld swf en nu kun je proberen het uit te breiden. Er zijn veel verschillende effecten die u kunt maken, vooral als u de ColorMatrixFilter begrijpt.
U kunt bijvoorbeeld de kleur van het pad vervagen door dit als volgt te doen:
// Offset Rood Waarde elke keer met 30 _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Groen _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Of je kunt ook de kleuren omschakelen om alle sporen blauw te maken:
// Alleen blauwe sporen _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Rood _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Groen _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Bedankt voor het lezen. Ik hoop dat jullie hier allemaal iets van hebben geleerd en het zal in de toekomst nuttig blijken te zijn, mogelijk een coole nieuwe game met dit effect.
