Share
În acest sfat rapid vom folosi ColorMatrixFilter și BlurFilter pentru a crea un efect Motion Trail.
Am gasit acest autor minunat datorita FlashGameLicense.com, locul unde puteti cumpara si vinde jocuri Flash.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Creați un nou proiect în FlashDevelop (sau orice editor care îl utilizați), setați dimensiunile swf la 600x400 și fundalul negru (# 000000).
Apoi, pentru a stabili scena vom avea două Sprites, unul este pentru afișajul principal la care vom adăuga toate obiectele de afișare, iar celălalt este pentru efectul Motion Trail care utilizează afișajul principal ca referință.
privat var _mainDisplay: Sprite = Sprite nou (); privat var _mtDisplay: Sprite = Sprite nou ();
Și adăugați Sprites la Etapă.
// // Afișarea setărilor // Trebuie să adăugăm cele două afișaje în AddChild (_mtDisplay); addChild (_mainDisplay);
Acum vom încorpora imaginea noastră stea pentru utilizare sau dacă doriți să utilizați propria imagine.
[Embed (sursa = '... / ... /images/star.png')] var stea: Clasa;
Ultimul lucru pe care dorim să-l facem pentru configurare este crearea unui a buclă funcţie. Acest lucru va fi actualizat în fiecare cadru, pentru lucruri cum ar fi poziționarea și actualizarea Motion Trail. Așa că faceți o altă funcție și un ascultător al evenimentului să o numiți în fiecare cadru.
Ta Main.as clasa ar trebui să arate așa ceva.
pachet rtmTrail import flash.display.Sprite; importul flash.events.Event; clasa publică principală extinde Sprite funcția publică Main (): void if (stage) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); funcția privată init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Încărcați imagini [Embed (sursă = '... / ... /images/star.png')] var stea: Clasă; // // Configurați afișajele // Trebuie să adăugăm cele două afișaje în etapa addChild (_mtDisplay); addChild (_mainDisplay); // Adăugați un nou Listener de evenimente pentru funcția noastră de buclă ori de câte ori introduceți // cadrul pentru a muta spritele și a actualiza efectul MotionTrail addEventListener (Event.ENTER_FRAME, bucla); buclă de funcții private (e: Eveniment): void privat var _mainDisplay: Sprite = Sprite nou (); privat var _mtDisplay: Sprite = Sprite nou ();
Pentru a testa Motion Trail vom crea zece Sprites din imaginea stelei și poziționați-le în locuri aleatorii. În plus, vom crea un a Punct care ne spune viteza și direcția pe care o vor mișca. Primul lucru pe care trebuie să-l faceți este să creați două Arrays pentru a stoca aceste informații; unul este pentru spiriduș iar cealaltă este pentru Punct.
privat var _sprites: Array = Array nou (); privat var _spritesDir: Array = Array nou (); privat var _txt: TextField = TextField nou ();
Adăugați această funcție la init pentru a crea și plasa la întâmplare zece stele.
// Desenați câteva stele var spr: Sprite; var bmp: Bitmap; pentru (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);
Acum pentru a crea TextField adaugă asta.
Accentsconagua
// Adăugați un câmp de text Prea _txt.defaultTextFormat = TextFormat nou ("arial", 18, 0xFF00FF); _txt.text = "Traseul de mișcare în timp real" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Acum trebuie să ne mutăm în noi buclă funcția pentru spiriduș controlul mișcării. Destul de simplu, folosiți a pentru buclă pentru a trece prin fiecare spiriduș avem și dacă atinge marginea inversă x sau y din Punct așa că merge în direcția opusă. De asemenea, trebuie să mutăm sprite în buclă cu valorile din Punct și, pentru ao face mai interesant, rotiți încet-o.
funcția privată (e: Event): void // Actualizarea formelor Sprite pentru (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 = -sprite Dir [i] .x; dacă (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -spriteDir [i] .y; // Mutați Sprite Shape _sprites [i] .x + = SpritesDir [i] .x; _sprite [i] .y + = _spritesDir [i] .y; // Rotire Sprite Shape _sprites [i] .rotation + = 2;
Pentru a muta TextField în partea de sus spre stânga trebuie doar să scăpăm din X dețineți fiecare cadru, iar dacă acesta se oprește din ecran, setați-l înapoi în partea dreaptă a ecranului.
funcția privată (e: Event): void // Actualizarea formelor Sprite pentru (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 = -sprite Dir [i] .x; dacă (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -spriteDir [i] .y; // Mutați Sprite Shape _sprites [i] .x + = SpritesDir [i] .x; _sprite [i] .y + = _spritesDir [i] .y; // Rotire Sprite Shape _sprites [i] .rotation + = 2; // Mutați textul _txt.x - = 4 dacă (_txt.x < -200) _txt.x = 600;
După ce ați testat-o, ar fi trebuit să vedeți ceva de genul acesta (cu stelele și textul care se mișcă în jurul ecranului, desigur).
Acum este timpul să ne facem MotionTrail Clasă. Ceea ce va face această clasă este să ia un a DisplayObject care este atras de propriul ecran (a spiriduș) și folosind un cuplu filtru, estompată și neclară.
Deci, fă-ți noua MotionTrail.as Clasă și lăsați-o să se extindă spiriduș Clasă.
Pentru o mică pre-configurare pentru pașii următori, vom crea câteva variabile, mai întâi _afişa pentru a stoca o referință a afișajului principal, a BitmapData pentru a atrage, a Dreptunghi dimensiunea scenei și a Punct în colțul din stânga sus al filtrelor. Ultimul este un mulțime pentru ColorMatrixFilter.
pachet 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 extinde Sprite funcția publică MotionTrail (display: DisplayObject) // Referință la afișajul folosit pentru traseul de mișcare _display = display; // Efectuați un obiect BitmapData pentru a desena // Dacă doriți să utilizați acest lucru pentru propriul proiect și dimensiunile nu este 600x400 //, atunci va trebui să îl schimbați aici, iar dreptunghiul de mai jos _bitmapData = BitmapData nou (600, 400 , adevărat, 0x000000); // Unele lucruri pe care filtrele au nevoie să le funcționeze _rect = new Rectangle (0, 0, 600, 400); _pnt = punct nou (0, 0); _cMatrix = Array nou (); / / Adăugați o mică transparență, astfel încât să nu se ia atenția din afișajul principal alfa = 0,6; addChild (Bitmap nou (_bitmapData)); privat var _display: DisplayObject; privat var _bitmapData: BitmapData; privat var _rect: dreptunghi; privat var _pnt: Punct; privat var _cMatrix: Array;
De când am făcut această clasă, trebuie să ne întoarcem rapid la _mtDisplay și modificați - o de la spiriduș Clasă la MotionTrail Class, împreună cu introducerea codului _mainDisplay variabil.
privat var _mainDisplay: Sprite = Sprite nou (); privat var _mtDisplay: MotionTrail = nou MotionTrail (_mainDisplay);
Pentru a ne crea Matrice pentru ColorMatrixFilter, ideea de bază este să stingem culorile departe, astfel încât să reducem încet toate valorile înapoi la zero. Adăugați această funcție la constructor.
// Crează matrice pentru ColorMatrixFilter _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0] _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]
Aceasta va înmulți fiecare valoare a fiecărui pixel cu 0,92 și, așa cum se întâmplă, fiecare cadru va deveni mai mic și mai mic până când va atinge în esență limita sa la 0. Astfel, cu cât sunt mai apropiate valorile de 1.0, cu atât este mai mare să ajungeți la zero, ceea ce înseamnă un traseu mai lung (și vice-versa: cu cât este mai aproape de 0.0 cu cât este mai mică traseul).
Acum creăm ColorMatrixFilter si BlurFilter.
ColorMatrixFilter va folosi mulțime tocmai am făcut și vom crea două BlurFilters. Am descoperit că folosind două BlurFilters dă un efect de puls frumos și nu se estompează prea lent sau prea repede, dar dacă aveți mai degrabă unul care este bine prea.
Adăugați mai întâi variabilele pentru filtre.
privat var _cFilter: ColorMatrixFilter; privat var _bFilter: BlurFilter; privat var _bFilter2: BlurFilter;
Creați filtrele în constructor
_cFilter = noul ColorMatrixFilter (_cMatrix); _bFilter = BlurFilter nou (2, 2, 1); _bFilter2 = BlurFilter nou (8, 8, 1);
Acum este timpul să creați o funcție de actualizare a traseelor noastre de mișcare. Faceți o funcție numită Actualizați în MotionTrail Clasă. Pentru a face traseul trebuie să desenați afișajul principal la BitmapData fiecare cadru care face efectul traseului.
public funcția de actualizare (): void / / Draw Display pe BitmapData _bitmapData.draw (_display);
Acum ar trebui să aveți un traseu dacă îl executați, dar, desigur, Motion Trails se estompează și o vom face să se estompeze cu filtrele pe care le-am făcut în ultimul pas.
Acum putem aplica filtrele la BitmapData. Noi folosim același lucru BitmapData pentru sursa, _rect și _pnt variabile pentru sourceRect și destPoint respectiv, ultima este filtrul pe care dorim să-l aplicăm.
Deoarece avem câteva filtre, nu vrem să le aplicăm pe fiecare cadru, deoarece acest lucru ar încetini prea mult lucrurile. În schimb, vom schimba ColorMatrixFilter și BlurFilter pentru a lucra în diferite cadre și pentru a comuta BlurFilters în același fel.
Pentru a le schimba, vom avea o variabilă pentru a ține evidența cadrului și pentru a verifica operatorul modulului.
privat var _count: Număr = 0;
public funcția de actualizare (): void / / Draw Display pe BitmapData _bitmapData.draw (_display); // Aplicați Efecte la BitmapData dacă (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); altfel dacă (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); altceva _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Cresterea numarului _count ++;
Acum, că Actualizați funcția este terminată, o adăugăm la noi buclă funcţie.
// Actualizați mișcarea de mișcare _mtDisplay.update ();
Minunat! Am terminat cu acest sfat rapid și puteți continua și testați-l.
Ar fi trebuit să obțineți același rezultat ca eșantionul swf și acum puteți încerca să îl extindeți. Există o mulțime de efecte diferite pe care le puteți face, majoritatea dacă înțelegeți ColorMatrixFilter.
De exemplu, ați putea decolora culoarea traseului în roșu, făcând acest lucru:
// Valoarea roșie a offset-ului cu 30 de fiecare dată _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) Verde _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]
Sau puteți schimba culorile făcând toate albastrele:
// Numai trasee albastre _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Green _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]
Vă mulțumim pentru lectură. Sper că ați învățat cu toții ceva din acest lucru și se va dovedi util în viitor, posibil un nou joc cool folosind acest efect.
