Manipulating Particle Motion med Stardust Particle Engine - Del 2
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette er den andre delen av denne opplæringen. Jeg skal vise deg hvordan du kan manipulere partikkelbevegelse med deflektorer.
Før kunnskap om bevegelsesgrunnleggende og vektorfelt er nødvendig. Jeg anbefaler at du har fullført den første delen av denne opplæringen før du går videre.
Endelig resultat Forhåndsvisning
Ta en titt på det endelige resultatet vi skal jobbe mot. Det er et eksempel på et gulv effekt, med partikler spretter opp fra gulvet.
deflektorer
Ganske mye som tyngdefelt, tar en deflektor en partikkel nåværende bevegelsesdata som input. Deretter overskriver deflektoren partikkelens bevegelse med sin utgang, bare at utgangs inneholder nå hastighetsdata i tillegg til posisjonsdata. Derfor, i 2D plass, er en lede utgang en 4D vektor; de to første komponenter av 4D-vektoren representerer x- og y-komponenten av vektoren (betegnet x Husk Feltet klasse og Gravity handling fra den første delen av denne opplæringen? Vel, er prosedyren lik. Du oppretter Deflektoren gjenstander som manipulerer partikkelbevegelser, og deretter legge dem til avlede handling, akkurat som du ville legge Felt gjenstander til Gravity handling. Nå la oss se på en rask eksempel. I dette eksemplet skal vi bruke LineDeflector klasse for å lage en partikkel-spretter-off-etasje effekt. En linje avviser hovedsak simulerer en uendelig lang linje i 2D plass, med den ene siden være åpen plass, og den andre siden fast; partikler er kun lov til å være i den åpne plassen og ikke tillatt i den faste plass. Når partiklene kommer fra den åpne plassen siden, treffer linjen, vil de sprette tilbake. Den Particle.collisionRadius egenskap, som representerer radiusen av en partikkel, blir tatt hensyn til. Linjen deflektoren bruker en normal vektor og et punkt på linje passerer gjennom i 2D mellomrom for å bestemme den linje. Her er en illustrasjon for å gi deg en bedre idé Opprett en ny Flash-dokument, tegne en sirkel med radius på 10, og deretter konvertere den til et symbol, eksporteres for Action med en klasse navn Circle Opprett en AS-fil for dokumentet klassen. Klassen skaper en emitter og en renderer. Hvis du føler at du trenger en oppfriskning på Stardust er grunnleggende bruk, kan du sjekke ut denne opplæringen emitter klassen er vist nedenfor. Den skyter i utgangspunktet ut sirkel partikler og partiklene blir påvirket av en uniform tyngdefelt, som peker nedover Nå har du opprettet en effekt med partikler skyter ut fra midten av scenen, blir trukket ned av tyngdekraften. Dette er hva det ser ut som: Legg til folloing koden i emitter konstruktøren. Det skaper en linje avviser, legger det til avviser handling, og deretter legger handlingen til emitter, og dermed aktivere avviser effekt. De to første konstruktør paramters for LineDeflector klassen er koordinaten for et punkt på linje, og de to siste parametre er x- og y-komponentene av linjens normalvektoren. Den Deflector.bounce eiendom bestemmer "bounciness" av linjen, en forårsaker komplett rebound, og 0 betyr ingen rebound i det hele tatt Du kan også tegne en visuell representasjon av linjen på scenen for å ha et bedre utseende. Greit, vi er ferdige med dette eksempelet. Nå la oss ta en titt på vår endelige utfallet. I dette eksemplet skal vi bruke BoundingBox avviser å begrense partikler inne i en rektangulær Området Dokumentet klassen forblir den samme som i forrige eksempel, men vi kommer til å endre emitteren klassen. Dette er grunnlaget emitter klassen av dette eksempel. Sammenlignet med emitter klassen i foregående eksempel, er SteadClock endret til en ImpulseClock for raskt å lage 20 partikler som i begynnelsen blir posisjonen sonen endres fra et enkelt punkt til en rektangulær sone som stemmer overens med fasen størrelse, er hastigheten initializer bremset ned litt, er livet initializer fjernet fordi vi ønsker partikler å bo permanent på scenen, alder og DeathLife handlinger er i sin tur ikke nødvendig, og fjernet, og ScaleCurve er også fjernet. Noen import er også lagt til og fjernet; du kan bare kopiere koden under for bekvemmelighet Ganske mye som forrige eksempel, har vi nå legge til følgende kode i emitter konstruktøren å bruke avlede handling, bare at denne gangen vi bruker BoundingBox avviser å begrense partikler inne i en rektangulær region som matcher scenen størrelse Det var det. Ikke mye er endret, og nå har vi begrenset partikler i en markeringsramme. Test filmen, og du skal se resultatet. Nå skal vi lage egne deflektorer på vår egen. La oss først forstå Deflektor klassen vi er i ferd med å utvide. Deflektor klassen er base klassen for alle deflektorer. For å opprette egendefinerte deflektorer, bør du utvide denne klassen og overstyre calculateMotionData4D () -metoden, og deretter returnere en MotionData4D objekt som representerer 4D vektor utgangen av deflektoren. Inngangen til din disposisjon, akkurat som den Feltet klassen, er inkludert i Particle2D objektet gått inn i metoden som parameter. Du kan bruke denne Particle2D objekt til å bestemme din utgang. Forresten, hvis denne metoden returnerer en nullverdi, ville avlede handling anta at du ikke ønsker å endre gjeldende partikkelens bevegelse, ignorere partikkel, og deretter gå videre til behandling neste partikkelen. For eksempel vil følgende avviser rotere hver partikkel er hastighetsvektor med én grad klokka I dette eksemplet skal vi utvide Deflektor klasse og lage vår egen avviser, simulere et rør, som er i hovedsak to linjer deflektorer sandwiching en tube- formet ledig plass Kopier Flash dokument, sammen med Circle symbol, og dokumentet fra det første eksempelet. Her skal vi skape en annen emitter klasse, likevel heter CircleEmitter. Denne gangen emitter avgir partikler fra sentrum av scenen, og ingen tyngdekraft felt brukes Nå skal vi lage vår tube avviser klasse. Detaljer er forklart i kommentarene Du bør vite hva vi skal gjøre videre godt av nå. Det er riktig, vi kommer til å legge deflektoren til en avlede handling og deretter legge handlingen til emitter. Du kan nå teste filmen. Igjen, kan du også trekke noen visuell representasjon av deflektoren på scenen for et bedre utseende. Dette er slutten for hele opplæringen. I den første delen har du lært om gravitasjonsfelt. I den andre delen, har du lært begrepet deflektorer og den faktiske bruken av avlede handling. Også, du har lært hvordan man skal forlenge Deflektor klassen til å opprette egendefinerte deflektorer. Nå er du i stand til å utføre avansert partikkelbevegelse manipulasjon i Stardust. Tusen takk for lesing!
og y
), respektivt, og de to siste komponenter representerer x- og y-komponenten av hastighetsvektor (angitt vx Hotell og vy
).
Slik bruker deflektorer
Floor Effect
Trinn 1:. Floor Effect Circle Symbol
Trinn 2:. Floor Effect The Document Class
pakke {import flash.display.Sprite.; import flash.events.Event; import idv.cjcat.stardust.common.emitters.Emitter; import idv.cjcat.stardust.common.renderers.Renderer; import idv.cjcat.stardust.twoD.renderers.DisplayObjectRenderer; public class FloorEffect strekker Sprite {private Var emitter: Emitter; private Var renderer: Renderer; offentlig funksjon FloorEffect () {emitter = new CircleEmitter (); renderer = new DisplayObjectRenderer (denne); renderer.addEmitter (emitter); addEventListener (Event.ENTER_FRAME, mainLoop); } Private funksjon mainLoop (e: Hendelses): void {emitter.step (); }}}
pakke {import idv.cjcat.stardust.common.actions.Age.; import idv.cjcat.stardust.common.actions.DeathLife; import idv.cjcat.stardust.common.actions.ScaleCurve; import idv.cjcat.stardust.common.clocks.SteadyClock; import idv.cjcat.stardust.common.initializers.Life; import idv.cjcat.stardust.common.initializers.Scale; import idv.cjcat.stardust.common.math.UniformRandom; import idv.cjcat.stardust.twoD.actions.Gravity; import idv.cjcat.stardust.twoD.actions.Move; import idv.cjcat.stardust.twoD.emitters.Emitter2D; import idv.cjcat.stardust.twoD.fields.Field; import idv.cjcat.stardust.twoD.fields.UniformField; import idv.cjcat.stardust.twoD.initializers.DisplayObjectClass; import idv.cjcat.stardust.twoD.initializers.Position; import idv.cjcat.stardust.twoD.initializers.Velocity; import idv.cjcat.stardust.twoD.zones.LazySectorZone; import idv.cjcat.stardust.twoD.zones.SinglePoint; public class CircleEmitter strekker Emitter2D {offentlig funksjon CircleEmitter () {super (ny SteadyClock (1)); //initializers addInitializer (ny DisplayObjectClass (Circle)); addInitializer (nytt liv (ny UniformRandom (60, 10))); addInitializer (ny posisjon (ny Single (320, 100))); addInitializer (ny Velocity (ny LazySectorZone (8, 4))); addInitializer (ny Scale (ny UniformRandom (1, 0,4))); addInitializer (ny CollisionRadius (10)); //handlinger addAction (New Age ()); addAction (ny DeathLife ()); addAction (ny Move ()); addAction (ny ScaleCurve (0, 10)); //gravitasjon Var felt: Feltet = new UniformField (0, 0,5); Var Vekt: Gravity = new Gravity (); gravity.addField (felt); addAction (gravitasjon); }}}
Milepæl se det på nettet
Trinn 3: Gulv Effect Tilsett Deflektor
//lage en linje avviser som går gjennom punktet (320, 320) og normal (0,. - 1) Var avviser: Deflektor = new LineDeflector (320, 320, 0, -1); deflector.bounce = 0,6; Var avlede: avlede = new avlede (); deflect.addDeflector (avviser); addAction (avlede);
Milepæl se det på nettet
Markeringsramme
Trinn 1:. markeringsramme emitter Class
pakke {import idv.cjcat.stardust.common.clocks.ImpulseClock.; import idv.cjcat.stardust.common.initializers.CollisionRadius; import idv.cjcat.stardust.common.initializers.Scale; import idv.cjcat.stardust.common.math.UniformRandom; import idv.cjcat.stardust.twoD.actions.Deflect; import idv.cjcat.stardust.twoD.actions.Move; import idv.cjcat.stardust.twoD.deflectors.BoundingBox; import idv.cjcat.stardust.twoD.deflectors.Deflector; import idv.cjcat.stardust.twoD.emitters.Emitter2D; import idv.cjcat.stardust.twoD.initializers.DisplayObjectClass; import idv.cjcat.stardust.twoD.initializers.Position; import idv.cjcat.stardust.twoD.initializers.Velocity; import idv.cjcat.stardust.twoD.zones.LazySectorZone; import idv.cjcat.stardust.twoD.zones.RectZone; import idv.cjcat.stardust.twoD.zones.SinglePoint; public class CircleEmitter strekker Emitter2D {private Var impulseClock: ImpulseClock; offentlig funksjon CircleEmitter () {super (impulseClock = new ImpulseClock (20)); impulseClock.impulse (); //initializers addInitializer (ny DisplayObjectClass (Circle)); addInitializer (ny posisjon (ny RectZone (0, 0, 640, 400))); addInitializer (ny Velocity (ny LazySectorZone (3, 2))); addInitializer (ny Scale (ny UniformRandom (1, 0,4))); addInitializer (ny CollisionRadius (10)); //handlinger addAction (ny Move ()); }}}
Trinn 2: markeringsramme Tilsett Deflektor
//deflectorvar avviser: Deflektor = new BoundingBox (0, 0, 640, 400); Var avlede. avlede = new avlede (); deflect.addDeflector (avviser); addAction (avlede);
Trinn 3: markeringsramme Test Movie
Milepæl se det på nettet
Custom deflektorer
pakke {import idv.cjcat.stardust.twoD.geom.Vec2D.; import idv.cjcat.stardust.twoD.particles.Particle2D; import idv.cjcat.stardust.twoD.deflectors.Deflector; import idv.cjcat.stardust.twoD.geom.MotionData4D; public class Rotator strekker Deflektor {ride beskyttet funksjon calculateMotionData4D (partikkel: Particle2D): MotionData4D {var hastighet: Vec2D = new Vec2D (particle.vx, particle.vy); velocity.rotateThis (1); returnere nye MotionData4D (particle.x, particle.y, velocity.x, velocity.y); }}}
Tube Deflektor Effect
Trinn 1:. Tube Deflektor Effect emitter Class
pakke {import idv.cjcat.stardust.common.actions.Age.; import idv.cjcat.stardust.common.actions.DeathLife; import idv.cjcat.stardust.common.actions.ScaleCurve; import idv.cjcat.stardust.common.clocks.SteadyClock; import idv.cjcat.stardust.common.initializers.CollisionRadius; import idv.cjcat.stardust.common.initializers.Life; import idv.cjcat.stardust.common.initializers.Scale; import idv.cjcat.stardust.common.math.UniformRandom; import idv.cjcat.stardust.twoD.actions.Deflect; import idv.cjcat.stardust.twoD.actions.Move; import idv.cjcat.stardust.twoD.deflectors.Deflector; import idv.cjcat.stardust.twoD.emitters.Emitter2D; import idv.cjcat.stardust.twoD.initializers.DisplayObjectClass; import idv.cjcat.stardust.twoD.initializers.Position; import idv.cjcat.stardust.twoD.initializers.Velocity; import idv.cjcat.stardust.twoD.zones.LazySectorZone; import idv.cjcat.stardust.twoD.zones.SinglePoint; public class CircleEmitter strekker Emitter2D {offentlig funksjon CircleEmitter () {super (ny SteadyClock (1)); //initializers addInitializer (ny DisplayObjectClass (Circle)); addInitializer (nytt liv (ny UniformRandom (60, 10))); addInitializer (ny posisjon (ny Single (320, 200))); //scenen sentrum addInitializer (ny Velocity (ny LazySectorZone (8, 4))); addInitializer (ny Scale (ny UniformRandom (1, 0,4))); addInitializer (ny CollisionRadius (10)); //handlinger addAction (New Age ()); addAction (ny DeathLife ()); addAction (ny Move ()); addAction (ny ScaleCurve (0, 10)); }}}
Trinn 2: Tube Deflektor Effect The Tube Deflektor
pakke {import idv.cjcat.stardust.twoD.particles.Particle2D.; import idv.cjcat.stardust.twoD.deflectors.Deflector; import idv.cjcat.stardust.twoD.geom.MotionData4D; public class TubeDeflector strekker Deflektor {private Var y1: Number; private Var y2: Number; offentlig funksjon TubeDeflector (Y1: Antall, y2: Number) {//y2 bør være større enn y2 if (y1 > y2) {//swap y1 og y2 hvis y1 er større Var temp: Number = y1; y1 = y2; y2 = temp; } This.y1 = y1; this.y2 = y2; } Ride beskyttet funksjon calculateMotionData4D (partikkel: Particle2D): MotionData4D {//utgående elementer, initialisert til partikkel opprinnelige motion data var x: Number = particle.x; Var y: Number = particle.y; Var vx: Number = particle.vx; Var vy: Number = particle.vy; //caluculate faktiske Collsion radius Var radius: Number = particle.collisionRadius * particle.scale; //for om utkast trer i kraft Var flagg forandret retning: Boolean = false; if (particle.y < (y1 + radius)) {//partikkel y-koordinat er mindre enn nedre grense //satt skikkelig ny y-koordinat y = y1 + radius; //sett flagget forandret retning = true; } Else if (particle.y > (y2 - radius)) {//partikkel y-koordinat er større enn øvre grense //satt skikkelig ny y-koordinat y = y2 - radius; //sett flagget forandret retning = true; } If (avbøyes) {return new MotionData4D (x, y, vx, vy); } Else {//ignorere partikkel og ikke oppdatere sin bevegelse data retur null; }}}}
Trinn 3: Tube Deflektor Effect Tilsett Deflektor
//Oppretter et rør deflectorvar avviser legge til følgende kode i emitter konstruktøren. Deflektor = new TubeDeflector (100, 300); Var avlede: avlede = new avlede (); deflect.addDeflector (avviser); addAction (avlede );
Trinn 4: Tube Deflektor Effect Test Movie
Milepæl se det på nettet
Konklusjon