Create en Sparkling Bomb Musepeker med flint Partikler
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette er en nybegynner til middels nivå tutorial som jeg vil forklare grunnleggende i flint partikkel system. Vi vil også ta en titt på hvordan du oppretter en glitrende bombe musepekeren. Det er noe jeg har laget og brukt i et minne spill som du kan sjekke ut her hvis du er nysgjerrig.
Jeg antar sette opp CLASSPATH du har kjennskap til Actionscript 3.0, grunnleggende objektorientert programmering og. Dette er all kunnskap som lett kan bli funnet på Activetuts + derimot, så ikke mist motet hvis du ikke vet det ennå.
Med det sagt, la oss begynne å tjene partikler!
Hva er Flint?
Flint partikkel system er et bibliotek skrevet i Actionscript 3 av Richard Herre. Det er utgitt under MIT-lisensen og det er åpen kildekode. Med andre ord, er Mr.Lord gjør oss alle en stor tjeneste
Prosjektets hjemmeside er her:.. Http://www.flintparticles.org/
ASDocs finner du her: http://flintparticles.org/docs/. Denne siden er en må ha. Jeg foreslår at du går der et par ganger for å bli kjent med oppsettet for alle klassene litt bedre. Seriøst, kan du bruke denne siden. Det vil være ganger når du kan følge denne opplæringen fint uten det, men så snart du ønsker å vite de eksakte detaljene i en klasse konstruktør eller lignende, må du gå her og les deg opp på den.
Så, Hva gjør det? Det er bare en måte å lage partikler. Partikler kan være alt fra en piksel - eller muligens fraksjoner av en piksel - til større punktgrafikk. Det er bra om flint er de mange måtene du kan lage og manipulere disse partiklene. FLINT selv støtter rende partikler i 3D, som støtter både Papervision 3D og Away3D.
Til slutt Flint er en programmatisk design verktøyet. De beste resultatene, etter min mening, oppnås når du visualisere resultatet av den effekten du ønsker å opprette ved kanskje å trekke det i photoshop. Etter at du bare konvertere den til kode. For å gjøre det, men du må selvfølgelig vite hvor du skal begynne
Sjekk ut flint eksempler side for en ripe på overflaten av hva som er mulig med flint. Http://flintparticles.org/examples.
Også, jeg vil du skal sjekke ut en veldig bra eksempel på hvordan du lykkes med å bruke dette som et designverktøy. En fransk MMORPG kalt "Dofus" med produksjon status ukjent har dette på sin blogg, ved hjelp av flint: http://devblog.dofus.com/fr/billets/52-lumiere.html. Så enkelt, men likevel utrolig vakker!
Forberedelser og oppsett
Jeg skal jobbe på koden for denne opplæringen bruker FlashDevelop. Hvis du ikke vet hva det er eller har ikke prøvd det ennå foreslår jeg at du gjør. Ikke bare er det et fantastisk verktøy, det er også gratis, så du virkelig har ingenting å tape. Hvis du bruker Flex /Flash Builder eller Powerflasher FDT jeg gjetter du har ingen problemer med å følge med denne opplæringen.
Hvis du bare ønsker å jobbe med Flash IDE og kanskje litt annen tekst editor av ditt valg kan du likevel følge med uten problemer i det hele tatt. Bare sørg for at du forstår hvordan ting fungerer når du setter et dokument Class stedet for å jobbe med kode på tidslinjen.
Siden vi har å gjøre med et bibliotek av kode må du sette opp classpathen riktig.
Last ned Flint fra her: http://code.google.com/p/flint-particle-system/downloads/list. På tidspunktet for å skrive denne opplæringen den nyeste versjonen er 2.1.2. Gå videre og laste ned enten SWC bibliotekfiler eller kildekoden. Jeg skal bruke SWC-filer og importere dem inn i min FlashDevelop prosjektet. Bruke SWC-filer av ren kode (ingen vanlig Flash "komponenter") støttes bare i Flash CS4 imidlertid så sørg for at du bruker den vanlige kildekoden hvis du er på CS3.
Skulle denne siden noensinne forandre deg vil alltid finne lenker til den nyeste nedlasting på hoved Flint prosjektsiden
Trinn 1:. Opprett et nytt prosjekt
First off, opprette et nytt Flash AS3 prosjektet i Flash IDE. Gjør det 600x400 piksler, 30 FPS og sette bakgrunnsfargen til noe mørk grå, som # 4A4A4A. Sett dokumentet klassen til Main.
Lagre dette prosjektet i mappen du skal jobbe i.
I FlashDevelop, opprette en ny Flash IDE Project. Skriv inn en pakke navn hvis du er tilbøyelig, vil denne opplæringen imidlertid kun involverer et par klasser, så det er ikke behov for ryddig organisering.
Lagre dette prosjektet i samme mappe som fla du nettopp opprettet for å ha Flash prosjektet finner hovedklassen.
I FlashDevelop, opprette en ny klasse Main, har det forlenge Sprite. Dette er hva min Main.as klasse ser ut i starten:
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main () {}}}
Hvis du ikke allerede har gjort, nå ville være et godt tidspunkt å sette opp klassebanen og sette org.flintparticles filene inn i den.
< h2> Trinn 2: Opprette Vår på /av-knapp
Det er en god grunn for å lage denne knappen. Sjansen er at du kommer over situasjoner hvor du ønsker å styre hvor og når du starter og stopper dine partikkel effekter. Kanskje du gjør et skytespill, og du vil ha noen partikler fra snuten av en pistol show når det er avfyrt. Hvis jeg viser deg veien til å styre den med en knapp du kan definitivt løse det slik du foretrekker i ditt eget prosjekt senere.
I Flash, hente ut komponenter panel og dra ut en knapp komponent inn scenen, plassere den i øvre middelklasse, som så:
Gi det en forekomst navnet "knappen". Bruke komponenten inspektør for å endre etiketten til "Vis /skjul effekt".
Inne våre Main.as vi må importere MouseEvent klassen, legge et klikk lytter til knappen og skriver en lytter funksjon som reagerer på klikket. Våre Main.as skal se slik ut:
pakke {import flash.display.Sprite; import flash.events.MouseEvent; public class Hoved strekker Sprite {offentlig funksjon main () {button.addEventListener (MouseEvent.CLICK, onButtonClick); } Private funksjon onButtonClick (e: MouseEvent): void {trace ("Button ble klikket!"); }}}
Test filmen og sørg klikke på knappen spor ut meldingen
Trinn 3:. Opprette en Toggle Class
Opprett en ny klasse kalt MyParticles.as i samme katalog som hovedklassen. Ha det forlenge Sprite også. I hovedklassen, oppretter en variabel myParticles av typen MyParticles og instantiate det, og deretter legge det til scenen. Også satt det mouseEnabled eiendom til false. Ellers renderer i partikkel klassen vil blokkere klikk på vår veksleknappen.
Vår plan er å ha MyParticles klassen inneholder alt Flint relatert i denne opplæringen. Det vil også ha en offentlig start og stopp-funksjon, pluss en "isRunning 'boolsk variabel som enten er sann eller usann avhengig av partiklene er i live eller ikke. Vår onButtonClick funksjon kan da sjekke om det er i gang og spør om det å starte eller stoppe avhengig av sin tilstand. De Main.as skal se omtrent slik ut:
pakke {import flash.display.Sprite; import flash.events.MouseEvent; public class Hoved strekker Sprite {private Var myParticles: MyParticles; offentlig funksjon main () {button.addEventListener (MouseEvent.CLICK, onButtonClick); myParticles = nye MyParticles (); myParticles.mouseEnabled = false; addChild (myParticles); } Private funksjon onButtonClick (e: MouseEvent): void {//Sjekk om partikler er aktive if (myParticles.isRunning!) {//Partikler var ikke aktiv, starte dem myParticles.start (); } Else {//Partikler var allerede aktive, stoppe dem myParticles.stop (); }}}}
La oss heller ikke glemme å sette opp start- og stoppfunksjoner i vårt MyParticles klasse. Også vi bør sette en offentlig getter isRunning. Som så:
pakke {import flash.display.Sprite; public class MyParticles strekker Sprite {private Var _isRunning: Boolean; offentlig funksjon MyParticles () {_isRunning = false; } Offentlig funksjon start (): void {trace ("Partikler i gang"); _isRunning = true; } Offentlig funksjon stop (): void {trace ("Partikler stoppet"); _isRunning = false; } Offentlig funksjon får isRunning (): Boolean {return _isRunning; }}}
Test filmen å se at veksling fungerer som det skal.
The Anatomy of Flint Particle System Part 1
La oss fokusere på teorien for litt og se på hvordan Flint systemet fungerer
Det absolutte minimum av elementer som kreves for å vise noen partikler er:.
Den renderer
Den emitter
Telleren
Partikkel initializer
Posisjonen inititalizer
The Renderer
renderer er det som trekker partiklene på skjermen. På tidspunktet for å skrive denne opplæringen, har den nåværende Flint versjon fem forskjellige 2D renderers:
BitmapRenderer
DisplayObjectRenderer
PixelRenderer
BitmapLineRenderer
VectorLineRenderer
They fungerer på ulike måter, men hvordan de fungerer annerledes er et tema jeg vil ikke dekke i detalj. Nok til å si at BitmapRenderer trekker til en enkelt Bitmap og deretter oppdaterer den, som pleier å være generelt raskere enn DisplayObjectRenderer som lar Flash oppdatering hver partikkel av seg selv som forskjellige stedene. For denne opplæringen vil vi bare bruke BitmapRenderer.
Den renderer strekker SpriteRendererBase som vekker strekker Sprite. Dette bringer oss til den visuelle flyten av vår tutorial:
Hoveddokument klassen er vår scene
Vi legger vår sprite forløp 'myParticles' til scenen ved hjelp addChild
< li> MyParticles klassen legger renderer til sin egen skjerm listen ved hjelp addChild
I MyParticles vi vil la renderer legge vår emitter til seg selv (den renderer)
avgir Emitteren partikler inni renderer som i sin tur legger disse til listevisning
emitter
Det er bare to emittere, en for 2D og en for 3D. Emitter er akkurat hva det høres ut som; et objekt som avgir partikler på moder renderer. Du kan legge til aksjoner, aktiviteter og initializers til emitter. Mer om det senere.
er en emitter lagt til en renderer som skal vises. En renderer kan ha flere emittere, og en emitter kan legges til flere gjengi.
The Counter
trenger en emitter en teller avgi partikler. Det er det som bestemmer når og hvor mange partikler til å slippe ut. For eksempel:
emitter.counter = new Steady (50);
Dette vil legge en Steady strid med emitter. Steady telleren avgir x mengden av partikler (50 i vårt tilfelle) hvert sekund. Partiklene blir emittert jevnt over den andre. The Pulse telleren vil avgi partikler på et angitt intervall. En annen nyttig telleren er den Blast som sender ut partikler, men bare en gang. Nyttig når du trenger en eksploderende virkning.
Partikkel initializer
Vi må legge til en partikkel initializer til emitter for at det skal ha noe å avgi. Partikkel initializers are:
SharedImage
SharedImages
ImageClass
ImageClasses
SharedImage og SharedImages er mest effektiv når den brukes med BitmapRenderer. De andre er bedre egnet for DisplayObjectRenderer. Forskjellen mellom SharedImage og SharedImages er at den andre initializer støtter flere bilder. Du legger bildene til en matrise som går til initializers konstruktøren, og du kan legge til en valgfri "vekt" array som bestemmer hva prioritet å gi bildene når randomisering dem. Samme med Image og ImageClasses
Posisjons initializer - Zones
behov emitter å vite hvor du skal plassere partikler.. Dette gjøres ved å legge til en posisjon initializer. Posisjons initializer tar en sone i sin konstruktør. Emitteren vil da legge partikler ved tilfeldige posisjoner innenfor sonen. Det finnes flere typer av soner, vil jeg nevne noen here:
PointZone
LineZone
RectangleZone
DiscZone
MultiZone
BitmapDataZone
The Sone er akkurat hva det høres ut som; det tar et punkt objekt i det konstruktøren, og vil bare gjøre partikler synes på det tidspunktet. Den LineZone tar to Point objekter og vil skape partikler langs linjen opprettet mellom de to punktene. Den RectangleZone avgir partikler i et rektangel, den DiscZone avgir partikler i en sirkel. Den flersone setter flere ulike soner sammen og gjøre det fungere som en
BitmapDataZone er min favoritt-sonen på grunn av sin spesielle evne. Det tar en BitmapData objekt og gjør partikler vises i et bildepunkt av at BitmapData som isn ' t gjennomsiktig. Med andre ord, kan du ta et bilde og bruke som en blåkopi av hvor du ønsker piksler skal vises.
Det finnes selvsagt andre måter å oppnå dette, i likhet med GreyscaleZone som fungerer på samme måte som BitmapDataZone. Forskjellen er at det gir piksler annen vekting; forskjellig sannsynlighet for å ha en partikkel gyte på den piksel. Svarte piksler aldri gyte partikler, men noen andre gjør, og lettere de er jo høyere er sjansen for å ha en piksel gyte der.
Forhåpentligvis kan du se den utrolige fleksibilitet og kraft av flint partikkel system, og dette er bare toppen av isfjellet! Nå klappe deg selv på ryggen for å takle den mengden av informasjon. La oss komme tilbake til arbeid
Trinn 4: Importere nødvendige Classes
I denne korte skritt vi vil bare importere følgende klasser:!
Import flash.display.Sprite; import flash.geom.Point; import flash.geom.Rectangle; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.Fade; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.Dot; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.displayObjects.Rect; import org.flintparticles.common.energyEasing.Exponential; import org.flintparticles.common.initializers.Lifetime; import org.flintparticles.common.initializers.SharedImage; import org.flintparticles.common.initializers.SharedImages; import org.flintparticles.twoD.actions.Accelerate; import org.flintparticles.twoD.actions.Collide; import org.flintparticles.twoD.actions.MouseGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RandomDrift; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.actions.ScaleAll; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.BitmapRenderer; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone;
Det er enklere hvis vi importerer alle av dem nå heller enn én etter én som vi går
Et ord av forsiktighet: Hvis du bruker FlashDevelop du kanskje. få noen problemer med auto-import. Jeg har hatt problemer der jeg skriver ut en bestemt initializer eller renderer type som finnes både som 2D- og 3D-versjoner, og la FlashDevelop importere den klassen. Sørg for FlashDevelop har importert 2D-versjonen hvis du bruker 2D, og vice versa med 3D! Grunnen til dette er at mange klasser har samme navn i både 2D og 3D-pakker
Trinn 5:. Opprette Renderer
Vi må skape en renderer å vise våre partikler i vår MyParticles klasse. Legg en privat variabel 'renderer "av typen BitMapRenderer.
instantiate det slik:
renderer = new BitmapRenderer (ny rektangel (0, 0, 600, 400));
Konstruktøren av BitmapRenderer tar et rektangel som sitt lerret. Dette er lerretet den renderer er lov til å trekke på. Partikler kan eksistere (og trekke CPU kraft) både i og utenfor lerretet, men vil bare bli vist innenfor rammene av lerretet. Ved å definere rektangel som 600 av 400, og x /y som 0/0, vi egentlig lage et lerret størrelsen og plasseringen av vår scene. Jo større lerret, jo mer ytelse er nødvendig, så generelt prøver å holde størrelsen så liten som mulig for det ønskede resultat.
Konstruktøren har en annen valgfri parameter 'glatting "som er samme type utjevning du kanskje kjenner igjen fra Bitmap klasse, eller egenskapene til et bilde importert til biblioteket i Flash IDE. Glatte standard til falsk og vi vil ikke forholde seg til det noe mer i denne opplæringen, men det er godt å vite hvor du skal få tilgang til det.
Fullfør opp ved å legge den renderer til listevisning ved å ringe addChild. Vår klasse MyParticles skal nå se slik ut:
pakken {//IMPORT HER - IKKE VIST //offentlige klasse MyParticles strekker Sprite {private Var _isRunning: Boolean; private Var renderer: BitmapRenderer; offentlig funksjon MyParticles () {_isRunning = false; renderer = new BitmapRenderer (ny rektangel (0, 0, 600, 400)); addChild (renderer); } Offentlig funksjon start (): void {trace ("Partikler i gang"); _isRunning = true; } Offentlig funksjon stop (): void {trace ("Partikler stoppet"); _isRunning = false; } Offentlig funksjon får isRunning (): Boolean {return _isRunning; }}}
Trinn 6: Opprette Emitter, Counter og Initializers
Lag en privat Var "emitter" av typen Emitter2D og instantiate det. Også satt telleren eiendom emitter til en ny Steady med 50 partikler per sekund, som dette:
emitter = ny Emitter2D (); emitter.counter = new Steady (50);
Nå skal vi se på den SharedImage initializer. Dette initializer er det som definerer hva selve partiklene som vi vil generere ser ut. Jeg skal vise deg koden for å skrive først:
emitter.addInitializer (ny SharedImage (ny Dot ()));
Som du kan se, har en emitter en funksjon kalt addInitializer som tar et objekt 'initializer' som parameter. Den SharedImage utvider InitializerBase klasse som implementerer initializer grensesnittet.
SharedImage initializer tar en Displayobject som konstruktør parameter. Her vil vi gi det en ny Dot. Dot-klassen er en del av flint biblioteket, og det er rett og slett en liten prikk skjerm objekt som strekker Shape. Dot konstruktøren tar et nummer som er radius av punktum, og det mislighold til 1. Flint kommer med et par forskjellige visningsobjektklasser som er svært nyttig i mange tilfeller. Vær oppmerksom på at det er mulig å legge til andre bilder fra flash biblioteket. Det er også mulig å legge til animerte movieclips som partikler og ha dem animere som de gyte. Mulighetene er tilnærmet uendelige
Deretter vil vi legge til posisjonen initializer og en sone som dette:
Var lineZone: LineZone = new LineZone (ny Point (100, 300), ny Point (500 , 300)); Var posisjoner: Posisjon = new Position (lineZone); emitter.addInitializer (stilling);
Vi definerer LineZone med to Point objekter, og X /Y verdiene av disse punktene skimte linjen
Til slutt, er et svært viktig skritt for å . legge emitter til renderer Bilde: Vår klasse skal nå se slik ut (viser kun klassen og konstruktør): Siden vi allerede har satt opp den offentlige start og stoppfunksjoner vi kan nå enkelt koble dette opp til partikkel system slik at vi . kan endelig begynne å se noen partikler I start-funksjon, bare legge til emitter.start (); Anmeldelser - og i stopp-funksjon legge emitter.stop (); Du skal nå ha en partikkel system som kan aktivere og deaktiverer ved å trykke på vippeknapp:? Ikke at det gøy å se på ennå skjønt, er det? Vi har en linje der emitter avgir prikker på ubestemt tid inntil enten slutten av tid eller når CPU frites, avhengig av hva som kommer først. Snakker av CPU kraft, prøve å midlertidig sette Steady teller til 5000 i stedet for 50. Når du prøver ut dette du bør legge merke til ekstrem CPU-bruken. Enten prøve det eller ta mitt ord for det, og tenker på at du må planlegge ut hvordan partikler skal brukes slik at de ikke ender opp med å krasje flash søknaden. Ok, nok av kjedelige ansvarlig snakk, la oss tenke på noen raske forbedringer og få dem gjort: For å oppnå alle disse endringene vi trenger å legge både initializers og handlinger. La oss ta en titt på noen mer teori. Ikke bekymre deg, denne gangen vil det bli kortere. Når vi ønsker å legge til eller endre noe i vår partikkel system det er et spørsmål om legge initializers og handlinger. Siterer dokumentasjonen Flint: En partikkel system i Flint er skapt ved å kombinere strå, tellere, initializers, handlinger, aktiviteter og gjengi Du vet allerede om emittere. , tellere, initializers og spillere. Initializers kontrollere hvordan partiklene er initialisert. Handlinger påvirker partiklene over tid. Ta en titt på listen over 2D handlinger i dokumentasjonen, det er massevis av forskjellige typer handlinger tilgjengelig. Det finnes også noen få i den vanlige pakken. Her er noen viktige de som er godt å vite om: ZonedAction tar både en handling og en sone i sin konstruktør. Hva det gjør det virkelig flott - det gjelder en handling som skal partikler, men bare hvis de er innenfor sonen. Vil du lage en foss? Ha partikler beveger seg mot fall, og ved slipp har du et regulert handling for å gjøre vannet akselerere nedover. . Med dette søksmålet du blitt litt av en regissør La oss komme i gang på disse endringene Dette bør være lett som en plett nå. Siden vi vet at partiklene blir nødt til å flytte, starter vi ved å legge til Move Handling. Vi kan sette en utgangshastighet med en initializer, legge til noen negativ akselerasjon og topp det hele med noen tilfeldige drivende, som dette: Allerede Vi re beskatte CPU ganske tungt, så gjerne slippe Steady teller ned til 10 eller 20, eller mer hvis datamaskinen er opp til utfordringen Forklaring av koden vi nettopp skrev. Velocity initializer tar en sone i sin konstruktør. Vi mate den til et punkt med negativt 150 piksler i y-aksen, som blir hastigheten av den enkelte piksel. Velocity initializer bruker en tilfeldig punkt innenfor sonen du definerer. I tilfelle av en punkt kan det bare være det punktet. Og det er veldig viktig å merke seg her at Zone definert er i perspektiv av partikkel - ikke emitter eller renderer eller noe annet. Hvis du ønsker å kontrollere den nøyaktige hastigheten til partiklene, bruk en PointZone. For mer tilfeldig atferd, bruke noe større. En LineZone kan ofte være tilstrekkelig for noen tilfeldig, men en RectangleZone vil gi enda mer tilfeldig atferd Accelerate handling også slags taler for seg selv -. Vi fortelle det til stadig akselerere med en verdi på positive 45 i y-aksen, så ned det går RandomDrift er også lett å forstå -.. du definere det maksimale beløpet til drift i både x- og y-aksen Vår MyParticle.as konstruktør bør nå se omtrent slik ut: Før du går videre til neste trinn, gjerne prøve og kommentere ut ulike handlinger /initializer å se hvordan de oppfører seg individuelt Siden vi vet partiklene trekke CPU kraft om de aldri er fjernet, har vi nå trenger en måte å fjerne dem. Det er et par måter å gjøre dette: La oss gå med levetiden initializer og Age handling, slik:. Dette fjerner rett og slett partiklene etter 5 sekunder av livet. Effekten er ikke så pen, så la oss kaste i Fade aksjon: Allerede ser mye bedre! Hvis du har gjort noe tweening arbeidet du kanskje tenker "Jeg vil sikker liker å bruke en annen lettelser til at fade!". Ok kanskje du ikke tenker akkurat det, men jeg tenker det, fordi jeg vet hvor fantastisk flint er - du kan bruke forskjellige easings til Age handlingen i sin konstruktør! Endre vår forrige Age linje med kode til dette: Dette lettelser holder partikkel i "god helse" mye lengre og raskt fades ut i slutt. Hvis du surfer rundt pakkene du kanskje har lagt merke til dette er en del av energyEasing pakken. Disse easings er modifiserte former av Robert Penner er lettelser ligninger spesielt for Age handling. Det er også en pakke kalt bare lettelser som er easings laget for den timeperiod disken Akkurat nå har vi partikler som beveger seg i et definert mønster med noen tilfeldig variasjon og de til slutt fade ut og dø. La oss krydre ting opp ved å legge ulike typer partikler til vår emitter, med forskjellige farger! Hva vi skal gjøre er å lage fire forskjellige typer partikler og bruke SharedImages initializer stedet for SharedImage initializer. Legg merke til mangelen på en "s" på slutten der. Den kule ting om det er valgfritt vekt matrise jeg nevnte i den første teoridelen i denne opplæringen. Det er rett og slett en matrise som den initializer leser fra. For eksempel, det første elementet i bildet matrisen er knyttet til det første element i matrisen vekt. Hvis det første element i matrisen vekt har en verdi på 10, og den andre en verdi på 1, og første bilde i bildematrise vil ha 10 ganger bedre sjanse til å bli framsatt enn det andre bildet. Vi vil bare bruke Flint egne visningsobjektklasser her. Vær også unnskylde min dårlig valg av farger. Gå videre og gå til linjen der du har SharedImage initializer og fjerne det. I stedet skriver i dette: Så hva gjør vi her? Vi skaper to matriser, en for å holde bildene og en til å holde vektene som svarer til bildene. Jeg kunne har skilt de to i koden, men jeg satte dem på vekslende linjer for å raskt se hvilken vekt relatert til hvilket bilde. Akkurat nå Rect og RadialDot vises ikke så mye som de to andre Dette er hva konstruktøren ser ut i øyeblikket. La oss nå prøve og endre partiklene over tid for å legge enda mer variasjon. Vi vil bruke en ScaleAll tiltak for å gjøre partikler endring størrelse over tid. import flash.geom.Point; import flash.geom.Rectangle; renderer.addEmitter (emitter); import flash.events.MouseEvent; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.geom.Point; import flash.geom.Rectangle; renderer.addEmitter (emitter);
renderer.addEmitter (emitter);
private Var _isRunning: Boolean, private Div renderer: BitmapRenderer; private Var emitter: Emitter2D; offentlig funksjon MyParticles () {_isRunning = false; renderer = new BitmapRenderer (ny rektangel (0, 0, 600, 400)); addChild (renderer); emitter = new Emitter2D (); emitter.counter = new Steady (50); emitter.addInitializer (ny SharedImage (ny Dot ())); Var lineZone: LineZone = new LineZone (ny Point (100, 300), nytt punkt (500, 300)); Var stilling: Posisjon = new Position (lineZone); emitter.addInitializer (posisjon); renderer.addEmitter (emitter);}
Trinn 7: Starter vår Particle Engine
. Kan det bli enklere
Vi kan bruke noen bevegelse på partiklene å krydre ting opp
Vi trenger partiklene til å dø ut etter en stund og ikke lever på ubestemt tid
Vi kunne lage partiklene ser annerledes fra hverandre for å legge til mer variasjon
Hvis du vil legge enda mer variasjon vi kunne gjøre partiklene endres over tid
The Anatomy of Flint Particle System Part 2
Handlinger
Accelerate - Legger en konstant akselerasjon til partiklene
Age - Gjør partikkel alder, mer om dette senere <.. br>
BoundingBox -. Bruk dette til å holde partikler inne i et definert område, noe som gjør at de ikke slippe ut av det
Fade - Gjør partikkel falme sin alpha over tid
Lineær /QuadraticDrag -. Disse også redusere partikkel ned, men med en kraft som er proporsjonal med hastigheten av partikkelen. Sammenlign med friksjon som bremser partikkel med en konstant kraft snarere enn proporsjonal
Flytt. - Dette er en viktig handling. Det må legges for å oppdatere partikler stilling. Uten det, dine partikler wont noensinne flytte
RandomDrift - En handling for spesielle bruksmåter, men en av mine favoritter. Det gjør partikkel tilfeldig drift i alle retninger innenfor verdiene du definerer selv
ScaleImage -. Brukes til å skalere partikkel i størrelse, både øke og redusere
Aktiviteter
<. p> Aktiviteter er like handlinger, men for emitter selv. Det finnes bare tre 2D aktiviteter; FollowMouse som gjør emitter følge muse, MoveEmitter som flytter emitter på et sett hastighet, og RotateEmitter som bare roterer emitter. ! Ingenting for hardt i denne avdelingen
ZonedAction; en Smart Handling
Trinn 8: Making partiklene beveger seg
emitter.addAction (ny Move ()); Var velocityPointZone: PointZone = new PointZone (ny Point ( 0, -150)); emitter.addInitializer (ny Velocity (velocityPointZone)); emitter.addAction (ny Accelerate (0, 45)); emitter.addAction (ny RandomDrift (50, 50));
< p> The Move handling taler for seg selv.
_isRunning = false; renderer = new BitmapRenderer (ny rektangel (0, 0, 600, 400)); addChild (renderer); emitter = new Emitter2D (); emitter.counter = new Steady ( 20); emitter.addInitializer (ny SharedImage (ny Dot ())); Var lineZone: LineZone = new LineZone (ny Point (100, 300), nytt punkt (500, 300)); Var posisjoner: Posisjon = new Position (lineZone); emitter.addInitializer (posisjon), renderer.addEmitter (emitter); emitter.addAction (ny Move ()); Var velocityPointZone: PointZone = new PointZone (ny Point (0, -150)); emitter.addInitializer (ny Velocity (velocityPointZone )); emitter.addAction (ny Accelerate (0, 45)); emitter.addAction (ny RandomDrift (50, 50));
Trinn 9:. Killing våre Partikler
Bruke DeathZone handling. Lag en sone og mate den til en DeathZone Handling objekt, og det vil drepe noen partikkel kommer inn denne sonen.
Min foretrukne måte, i dette tilfellet -. Levetiden initializer og Age handling. Levetiden bare setter levetiden av partikkelen. Som Move handling er nødvendig for å flytte faktisk partiklene er så Age nødvendig å gjøre partiklene alder og til slutt dø ved slutten av sin levetid. Dette er også nødvendig når du bruker Fade handlingen
Emitter.addInitializer (ny Lifetime (5)); emitter.addAction (New Age ());
emitter.addAction (ny Fade ());
emitter.addAction (New Age (Exponential.easeIn));
Trinn 10:. Lage ulike Partikler
Var imageArray: Array = new Array (); Var weightArray: Array = new Array (); imageArray.push (ny Dot (2, 0xFFEEDD)); weightArray.push (10); imageArray.push (ny Dot (5, 0xAAEEDD)); weightArray.push (10); imageArray.push (ny RadialDot (5, 0xAAFFFF)); weightArray.push (1); imageArray.push (ny Rekt (8, 3 , 0xFFAAFF)); weightArray.push (1); emitter.addInitializer (nye SharedImages (imageArray, weightArray));
_isRunning = False; renderer = new BitmapRenderer (ny rektangel (0, 0, 600, 400)); addChild (renderer); emitter = new Emitter2D (); emitter.counter = new Steady (20); Var imageArray: Array = new Array (); Var weightArray: Array = new Array (); imageArray.push (ny Dot (2, 0xFFEEDD)); weightArray.push (10); imageArray.push (ny Dot (5, 0xAAEEDD)); weightArray.push (10); imageArray.push (ny RadialDot (5, 0xAAFFFF)); weightArray.push (1); imageArray.push (ny Rekt (20, 10, 0xFFAAFF)); weightArray.push (1); emitter.addInitializer (nye SharedImages (imageArray , weightArray)); Var lineZone: LineZone = new LineZone (ny Point (100, 300), nytt punkt (500, 300)); Var posisjoner: Posisjon = new Position (lineZone); emitter.addInitializer (posisjon), renderer.addEmitter (emitter); emitter.addAction (ny Move ()); Var velocityPointZone: PointZone = new PointZone (ny Point (0, -150)); emitter.addInitializer (ny Velocity (velocityPointZone)); emitter.addAction (ny Accelerate (0, 45)); emitter.addAction (ny RandomDrift (50, 50)); emitter.addInitializer (ny Lifetime (5)); emitter.addAction (New Age (Exponential.easeIn)); emitter.addAction (ny Fade ());
Steg 11: Endre Partikler Over tid