Forever Blowing Bubbles Med Flint Particle Engine
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I opplæringen, vi vil lære å skape en dynamisk, boblende bilder displayer hjelp av flint partikkel motor og blits.
Denne applikasjonen vil tilfeldig velge bilder fra en matrise og plassere dem i flytende bobler. Vi vil også legge til en interaktiv bakgrunn til bildet med flint partikkelfysikk.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Sette opp IDE
La oss begin.Open opp din favoritt versjon av Adobe Flash (må jobbe med AS3). Jeg skal bruke Flash CS5 i denne opplæringen, men du trenger ikke å. Opprett en ny AS3 dokument og sørge for at innstillingene er som følger:
Trinn 2: Få Flint
Nå la oss sette opp flint motoren. Hvis du ikke allerede har, laste det ned fra github.com. Så pakk ut innholdet i rotkatalogen på prosjektet.
Hvis du ønsker å bli fanget opp på Flint-bruk, vil jeg anbefale deg å sjekke Lag en Sparkling Bomb Musepeker med flint Partikler ut. Det er flott for folk som bare starte med motoren
Trinn 3:. Dokument Class
Nå går inn i Flash eiendommer panel. Still Document klasse til "Main". Åpne opp din favoritt action editor. Opprett en ny klasse fil i katalogen at FLA er i. Sett navn til "Main". Her er alt du bør ha i øyeblikket:
pakken {public class Hoved {offentlig funksjon main () {}}}
Trinn 4: Import
Legg til følgende import uttalelser til koden under pakken { Puh! Jeg vet at det er massevis av filer, kan vi takke flint for sine fantastiske organisasjon på denne :) La oss nå åpne opp Flash IDE. Det er opp til deg å skape en 800x600 gradient boks som din bakgrunn. Hovedformålet med denne opplæringen er ikke å lære noen nye flash tegneferdigheter, men jeg kan vise dere hva jeg trakk i min egen søknad. Denne bakgrunnen er også inkludert i kilde av opplæringen Nå kan vi velge de bildene som vi ønsker vår søknad skal vise. En god del om utformingen av programmet er at det kan fungere med så mange bilder du vil, så lenge du nevner dem i programmets utvalg ... Men vi kan få til det senere. For nå, la oss bare velge fire bilder fra internett. Her er de fire bildene som jeg har valgt: Nå drar hver og en på scenen. Push F8 Når du har valgt et antall bilder som tilfredsstiller deg, gå videre til neste trinn :) La oss nå lage en liste over alle våre bilder inne i vår Hovedanmeldelser klasse. Legg den markerte linjen med kode til din klasse La oss gjøre et objekt som vil maskere valgt av programmet vårt image. Dette vil bare være en svart sirkel som er den formen vi ønsker at våre bilder å ta. Hvis du vil, kan du gjøre noe mer kreativt som en stjerne ... Det hele fungerer. Tegn sirkelen, velger du den, og skyv F8 Plasser denne variabelen ovenfor konstruktøren. Denne variabelen vil bli brukt som et nedtellingsur for å sjekke når du skal lage en ny boble: Nå la oss legge til en ENTER_FRAME hendelsen lytteren og en funksjon for å ringe. . Legg til følgende kode i konstruktør Nå kan vi skape denne funksjonen for vårt arrangement lytteren å linke til: Nå som vi har satt vårt arrangement lytteren opp, kan vi endre vår funksjon for å gjøre noe hver gang telleren når null. Endre funksjonen til å se slik ut: Nå kan vi bare sette den rette boble lage kode inn i funksjonen og vi vil være klar! Anmeldelser La oss gjøre den neste delen av vår enterframe () -funksjonen. I dette trinnet skal vi skape boblen MovieClip. Legg til følgende i din funksjon: Dette er hvordan din funksjon bør se nå: Og nå kan vi legge siste finpuss til vår enterframe () -funksjonen. Her er ting å legge under det vi gjorde tidligere: Her er et øyeblikksbilde av hva din enterframe funksjon bør se slik ut: Hvis du husker fra vår siste trinnet, la vi til en annen enterframe hendelse lytteren til vår nye boble. Legg denne funksjonen til hovedsiden for klassen slik at boblene flytte: Du kan finne at dette reduserer SWF ytelse. Hvis ja, prøv å legge hver bobler til en rekke når det er opprettet, og flytte hver boble i rekken opp ved 7 piksler i enterframe () -funksjonen Her er hva bubbleFrameEnter Hvis du bruker en matrise, må du fjerne boblen fra tabellen her. Gratulerer på etterbehandling Part One av vår søknad! Nå må vi legge noen flint effekter til vårt program for å gjøre det mer realistisk og morsomt å se Nå la oss legge til noen bakgrunn bobleeffekter til vår scene. For å gjøre dette må vi designe en MovieClip å bruke med flint. Kontroller at følgende innstillinger er satt i den nye MovieClip: Tegn en boble som du ønsker å bruke. Merk at dette er forskjellig fra de foto boblene vi har hatt befatning med. Jeg har valgt følgende bilde nedenfor (zoomet 8 ganger). Størrelsen spiller ingen rolle så lenge den er liten nok til å formere seg et par ganger og fortsatt ser bra Nå kan vi komme i gang med Flint motoren. For å begynne, må vi opprette vår Emitter og Renderer. Legg til følgende kode ovenfor konstruktøren av dokumentet klassen Fra emitter, kan vi legge alle de riktige egenskapene til boblene å gjøre dem oppføre seg som vi ønsker at de skal. Den renderer vil være å tegne boblene på scenen Nå som vi har laget vår emitter, kan vi gå videre og legge ved alle handlinger og egenskapene vi ønsker å det å gjøre det oppfører seg akkurat slik vi vil ha det til. For å gjøre dette, legg til følgende kode hvor som helst inni konstruktør Fin jobb på å gjøre noen awesome partikkel effekter med flint. Å vente ... du kan ikke se dem ... Og nå * trommevirvell * kommer den endelige puslespill brikke i dette puslespillet. (erm) Jeg mener opplæringen. Nå er alt vi trenger å gjøre er å gjengi våre partikkeleffekter med vår emitter. For å gjøre dette, legg til følgende kode i bunnen av vår konstruktør: I trinn 15 vi dro en tom plass i vår kode for eksplosjoner når våre bildebobler forlot scenen. Nå er det på tide å legge til noen Flint effekter til mix å gjøre det ser ut som bobler er virkelig dukker. La oss begynne med å tegne vår eksplosjon partikkel. Gå inn i Flash IDE og opprette en ny mørkere, mindre boble og (Select + F8) det. Nå satt klassenavnet til "bubble_mc2". Endre din bubbleFrameEnter () -funksjonen til å se ut som nedenfor. Sjekk ut kommentarene for en grundig forklaring på hva vi gjør: Gratulerer på å bruke flint til å lage en dynamisk bilde displayer. Nå som du har laget dette, kan du begynne å bruke teknikkene viste i denne opplæringen for dine egne personlige prosjekter for å skape noe helt unikt med Flint. Takk for lesing, og jeg håper at opplæringen var nyttig for deg :)
Dette vil importere de nødvendige .as filene inn i programmet for sin bruk
import flash.display.MovieClip.; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAntiGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone;
Trinn 5: Tegning Bakgrunn
Trinn 6:. Våre Images
å skape en MovieClip. Her er de innstillingene du bør velge for hver MovieClip. Nå bare erstatte "1" med nummeret på bildet i hvert enkelt tilfelle.
Trinn 7: Vårt bilde Array
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAntiGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone; public class Hoved {private Var imageList: Array = [Image1, Image2, image3, image4] offentlig funksjon main () {}}}
Trinn 8: Vår Bubble Mask
å opprette en ny MovieClip. Sørg for å sette registreringspunkt i høyre hjørne. Også satt klassenavnet til MaskMC. Nå slette objektet fra scenen. Her er et skjermbilde av hva objektet kan se slik ut:
Trinn 9: Countdown Variabel
private Var nedtelling: int = 30
Trinn 10: ENTER_FRAME hendelse lytteren
addEventListener (Event.ENTER_FRAME, enterframe)
privat funksjon enterframe (e: Hendelses): void { //Lag bobler {
Trinn 11: Nedtelling Loops
//30 ganger i en andre: privat funksjon enterframe (e: Hendelses): void {//trekke en fra nedtellingen countDown-- //Hvis nedtellingen er på 0 if ( Nedtelling == 0) {//Lag en ny boble //Start nedtellingen på 30 nedtelling = 30}}
Trinn 12: enterframe () Part 1
//Oppretter en ny MovieClip som vil bli vår bubblevar myNewBubble: MovieClip = new MovieClip () //Legger masken til bubblemyNewBubble.addChild (ny MaskMC ()) //plukker en tilfeldig MovieClip fra rekke bilder .//[Math.floor (Math.random () * imageList.length)] er bare å velge antall //bildet, basert på antall elementer i listeVar myImageInBubble: MovieClip = new imageList [Math.floor (Math.random () * imageList.length)] () //Legger bildet til bubblemyNewBubble.addChild (myImageInBubble) //Masker bildet til masken .getChildAt (0) er den første //objekt lagt til en MovieClipmyImageInBubble.mask = myNewBubble.getChildAt (0)
privat funksjon enterframe (e: Hendelses): void {countDown-- if (nedtelling < = 0 ) {var myNewBubble: MovieClip = new MovieClip () myNewBubble.addChild (ny MaskMC ()) Var myImageInBubble: MovieClip = new imageList [Math.floor (Math.random () * imageList.length)] () myNewBubble.addChild (myImageInBubble ) myImageInBubble.mask = myNewBubble.getChildAt (0)}}
Trinn 13: enterframe () Part 2
//Plasserer boblen nederst på screenmyNewBubble.y = 800 //Flytter boblen tilfeldig på X axismyNewBubble.x = Math.random () * scenen .width //Legger en hendelse lytteren til bubblemyNewBubble.addEventListener (Event.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
privat funksjon enterframe (e: hendelse): void {countDown-- if (nedtelling < = 0) {var myNewBubble: MovieClip = new MovieClip () myNewBubble.addChild (ny MaskMC ()) Var myImageInBubble: MovieClip = new imageList [Math.floor (Math.random () * imageList.length)] () myNewBubble.addChild (myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt (0) myNewBubble.y = 800 myNewBubble.x = Math.random () * stage.width myNewBubble.addEventListener (Event. ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble) nedtelling = 30}}
Trinn 14: Bubble er ENTER_FRAME Handler
privat funksjon bubbleFrameEnter (e: Hendelses): void {//Flytt målet for vår funksjon opp sakte e.target.y - = 7 //Hvis boblen sin Y er lavere enn null if (e.target.y < 0) {//Pop og fjerne boble}}
Trinn 15:. Killing Bubbles
< p> Vi har ennå til å gjøre våre bobler pop med flint motor, men kan vi i det minste fjerne dem og spare minne. Her er hva vi kan legge til vår boble ENTER_FRAME håndterer å slette våre gjenstander fra scenen og ta av hendelsen lytteren knyttet til dem.
//Finn forelder til vår boble (mål) //og fortelle den til å fjerne våre mål e.target.parent.removeChild (e.target) //Fjern vår målets (boblens) hendelse //lytteren, så det gjør ikke noe anymoree.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
funksjonen skal se ut:
privat funksjon bubbleFrameEnter (e: Hendelses): void {e.target.y - = 7 if (e.target.y < 0) {//FLINT eksplosjon FX her //_______________________ e.target.parent.removeChild (e.target) e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)}}
Trinn 16: Bakgrunn Bubble Design
Trinn 17:. Renderer og Emitter
//Oppretter en ny DisplayObjectRenderer privat Var myRenderer: DisplayObjectRenderer = new DisplayObjectRenderer (); //Oppretter et 2D flint emitter for standard 2D effectsprivate Var myEmitter. Emitter2D = new Emitter2D ()
Trinn 18:. Emitter Customization
//Forteller emitter å opprette 10 bobler hver secondmyEmitter.counter = new Steady (10);. //Forteller emitter å bruke bubble_mc MovieClip som vår particlemyEmitter. addInitializer (ny Image (bubble_mc)); //Forteller emitter å skape bobler innen en viss //linje span. Boble steder spenner fra (0700) til (830 700), //spenner fra den ene siden av bunnen av skjermen til othermyEmitter.addInitializer (ny posisjon (ny LineZone (ny Point (0700), ny Point (830700)))) //Setter hastigheten av partiklene til X: 0, Y: -65, //gjør dem gå i en rett retning up.myEmitter.addInitializer (ny Velocity (ny PointZone (new Point (0, -65)))); //Forteller emitter til tilfeldig skalere bilder fra .75x å 5xmyEmitter.addInitializer (ny ScaleImageInit (0.75, 5)); //Forteller partiklene til å starte movingmyEmitter.addAction (ny Move ()); //Tegner et rektangel fra øverst i venstre hjørne (-40, -40), //lavt i høyre hjørne (850750). Dette vil være den //sikker sone for bobler. Eventuelle bobler strømme ut disse grensene //er destroyedmyEmitter.addAction (ny DeathZone (ny RectangleZone (-40, -40,850,750), true)); //Forteller bobler å bevege seg bort fra musen, angi //kraften av bevegelsen (10 ), den renderer koblet //til emitter (myRenderer), og epislon av gravitasjon (1) myEmitter.addAction (ny MouseAntiGravity (10, myRenderer, 1)) //Fires opp alle de ting vi nettopp har angitt :) myEmitter.start ()
Ser ut som vi må dekke det i neste trinn :)
Trinn 19: Viser Vår Masterpiece
//Koble partikkel emitter til renderermyRenderer.addEmitter (myEmitter); //Tilsett renderer til stage.addChild (myRenderer);
Trinn 20: Boble Eksplosjoner
privat funksjon bubbleFrameEnter (e: Hendelses): void {//Old bevegelse ting e.target.y - = 7 //sjekke når boblen delene toppen if (e.target.y < 0) {//Opprett en ny partikkel emitter for eksplosjonen Var Newe: Emitter2D = new Emitter2D (); //Legg emitter til renderer myRenderer.addEmitter (Newe); //Denne gangen ønsker vi å bruke en "eksplosjon" //teller. Blast (20) forteller emitter til //lage 20 stykker i eksplosjonen newE.counter = new Blast (20); //Gi emitter vår partikkel MovieClip newE.addInitializer (ny Image (bubble_mc2)); //Angi posisjonen for de opprettede partiklene til å være en //"DiscZone". Dette er i utgangspunktet et sirkulært område //hvor partikler kan opprettes. //DiscZone (Centerpoint: Pointer, innerRadius, outerRadius) //Vi setter midtpunktet for å være tilnærmet //sentrum av boblen og begge radius s skal //satt til "50" newE.addInitializer (ny posisjon (ny DiscZone (ny Point (e.target.x + 75, e.target.y + 75), 50,50))); //Oppretter en ny eksplosjon //(power: Antall, x: Antall, y: Antall, expansionRate: Antall, dybde: Antall, epsilon: Number) //Eksplosjonen har en effekt på fem starter i sentrum for vår DisZone , //har en expansionRate 2000, dybde på 20, og en epislon av en newE.addAction (ny Explosion (5, e.target.x + 75, e.target.y + 75, 2000,20, 1)); //Forteller emitter å begynne å bevege partiklene newE.addAction (ny Move ()); //Setter dødssonen av partikler utenfor skjermen newE.addAction (ny DeathZone (ny RectangleZone (-30, -30, 820, 620), true)); //Starter emitter newE.start (); e.target.parent.removeChild (e.target) e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)}}
Konklusjon