How å velge enheter i en AS3 Spill
Del
Del
en
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi trekke et utvalg rektangel med musa (som sett i strategispill som Starcraft og Command and Conquer), og vi vil også lære å velge enheter med rektangelet
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Klikk og dra med musen for å tegne et rektangel som vil velge en soldat som den berører
Trinn 1:. Oppsett
Hvis du bruker Flash, opprette en ny Actionscript 3.0 fil med size "550 x 400 '. Men hvis du ikke bruker Flash IDE og bruker et annet eksempel FlashDevelop eller Flash Builder, inneholder denne opplæringen de SWC-filer slik at du kan bruke movieclips fra din IDE om preferanser. Hvis du er nysgjerrig på hvordan du importerer movieclips med IDE, sjekk ut nybegynners å FlashDevelop og nybegynners guide til FDT!
Jeg bør også merke at jeg har tatt den FLA filen i tilfelle du ikke ønsker å trekke noen av ditt eget materiale
Trinn 2:. Opprette dokument Class
Ok, nå kan du bli litt forvirret hvis du ikke har virkelig jobbet med klasser før. Hvis du ønsker å lære mer om hvorfor klasser er viktig i programmering, sjekk ut denne artikkelen ved kirupa, eller denne guiden til dokumentet klassen.
Opprett en ny "Actionscript 3.0 Class" og gi den navnet "SelectionDemo '. Når filen er opprettet, lagre det som 'SelectionDemo.as'. Du bør lagre filer hele tiden. Jeg kan ikke understreke dette nok, men hvor mange ganger jeg har glemt å lagre arbeidet som jeg har gjort, og mistet alt ikke bærer tenker. Så vær så snill, lagre filene!
Hvis du bruker en IDE som genererer koden for deg når du oppretter klassen, bør du ha det meste av koden under. Du må imidlertid fortsatt legge linjene som jeg har uthevet:
pakke {import flash.display.MovieClip; public class SelectionDemo strekker MovieClip {offentlig funksjon SelectionDemo () {}}}
Vi er ikke ferdig ennå men! Hvis du bruker Flash IDE, naviger til "Properties Panel" og sette 'document' til 'SelectionDemo'. Hvis du lurer på hva som gjør det, betyr det at når din søknad /game drives av Flash Player, vil denne klassen være den viktigste klassen som styrer spillet. Kul, ikke sant?
Kjør programmet; hvis du får noen feil så bør du være godt å gå
Trinn 3: Lage rektangel
Nå bør vi være klar til å gjøre rektangel! Denne delen vil inneholde noen funksjoner, det er alt. Nedenfor er koden for å tegne rektangelet:
pakken {//importere KLASSER Vi må importere flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; public class SelectionDemo strekker MovieClip {public Var selectionRect: rektangel; //Vil holde dataene for vår rektangel. offentlig Var selectionSprite: Sprite = new Sprite (); //Å gjøre en ny Sprite å tegne rektangelet. offentlig funksjon SelectionDemo () {//Legger lyttere stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); } Offentlig funksjon SetStartPoint (meg: MouseEvent): void {selectionRect = new rektangel (stage.mouseX, stage.mouseY); //Opprette Utsnittsrektangelet. }}}
Nå er det slags unyttig å ha et rektangel som vi ikke kan se, ikke sant? Akkurat, så la oss komme i gang
Trinn 4: Tegning rektangel
Flott, nå må vi trekke rektangelet på skjermen ved hjelp av selectionSprite variabel du sett i den siste tekstutdraget. Hvorfor bruke en sprite, spør du? Alle Sprites inneholder en grafikkobjekt, som igjen inneholder en metode som kalles drawRect () dette gir oss mulighet til å enkelt tegne et rektangel dynamisk i AS3
Nedenfor har jeg plassert den koden for å tegne rektangelet, med kommentarer.:
pakken {//importere KLASSER Vi må importere flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; import flash.events.Event; public class SelectionDemo strekker MovieClip {public Var selectionRect: rektangel; //Vil holde dataene for vår rektangel. offentlig Var selectionSprite: Sprite = new Sprite (); //Å gjøre en ny Sprite å tegne rektangelet. offentlig Var isMouseHeld: Boolean; //Vil fortelle oss om museknappen er opp /ned offentlig funksjon SelectionDemo () {//Initial isMouseHeld = false; //Musen ikke holdes ennå. stage.addChild (selectionSprite); //Legge til selectionSprite til scenen. stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); //Lytt til mus hold. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); //Lytt til musen utgivelsen. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); //Kjør denne funksjonen hver ramme (24 FPS). } Offentlig funksjon SetStartPoint (meg: MouseEvent): void {selectionRect = new rektangel (stage.mouseX, stage.mouseY); //Opprette Utsnittsrektangelet. isMouseHeld = true; //Musen er nå avholdt. } Offentlig funksjon RemoveRectangle (meg: MouseEvent): void {isMouseHeld = false; //Musen er ikke lenger holdt. } Offentlig funksjon UpdateGame (e: Hendelses): void {selectionSprite.graphics.clear (); //Clear rektangelet slik at den er klar til å bli trukket på nytt. if (isMouseHeld) {selectionRect.width = stage.mouseX - selectionRect.x; //Sett bredden av rektangelet. selectionRect.height = stage.mouseY - selectionRect.y; //Sett høyden på rektangelet. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); //Sett grensen av rektangelet. selectionSprite.graphics.beginFill (0x458B00, 0,4); //Sett fyll og åpenhet av rektangelet. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); //Tegn rektangelet på scenen! selectionSprite.graphics.endFill (); //Slutt å fylle rektangelet. }}}}
Hvis du har denne koden, kan du kjøre programmet og se det fungere
Trinn 5: Tegn en Unit
I flash, lage en ny MovieClip og tegne en Unit. I det første bildet, bare tegne en enhet; i den andre rammen, legger en grønn sirkel under enheten eller noe som lar spilleren vet at enheten er valgt. Det skal se omtrent slik ut:
Jeg har også nettopp tegnet en rask gresskledd bakgrunnen på scenen for å gjøre det ser fint :)
Trinn 6: Eksportere Unit
< p> Nå har opprettet MovieClip, høyreklikker du på symbolet i biblioteket, og velg Egenskaper. Kryss av i boksene som sier "Eksport til Actionscript" og "Export i Frame 1 '. Så, gi den navnet "Unit". Dine egenskaper skal se omtrent slik ut:
Merk: når du klikker på "OK", kan du få en advarsel fordi ingen slik class "Unit" eksisterer ennå. Hvis ja, klikk på OK og vi skal fikse dette nå ved å lage en ny klasse
Trinn 7: Opprette Andelsklassen
Husk før da du eksporterte Unit MovieClip? Det er der vi skaper klassen for at MovieClip. Så lage en ny Action klasse fil som heter «Unit.as" og plassere denne koden i klassen:
pakke {import flash.display.MovieClip; public class Unit strekker MovieClip {public Var isActive: Boolean; //Forteller oss om enheten er valgt eller ikke. offentlig funksjon Unit () {isActive = false; //Enheten har ikke blitt valgt ennå. gotoAndStop (1); //Gå til og opphold på den første rammen (ingen valg ring). }}}
Ahead, kamerater
Trinn 8: Plassering av Units
Nå er det på tide å legge Andelene til scenen og gi dem en posisjon. Dessuten skal vi plassere hver enhet i en "Array". En matrise er i utgangspunktet en liste som tillater oss å få tilgang til ting inni den ved hjelp av en indeks. Et godt eksempel på arrays er rett republikken kode; de har også blitt forklart her i AS3 101:. Arrays
Her er den oppdaterte koden for 'SelectionDemo.as'. Først legger vi en ny offentlig Array kalt unitList like etter de andre variablene:
offentlig Var selectionRect: rektangel; //Vil holde dataene for vår rectangle.public Var selectionSprite: Sprite = new Sprite (); //Å gjøre en ny Sprite å trekke rectangle.public Var isMouseHeld: Boolean; //Vil fortelle oss når musen er opp /Downpublic Var unitList: Array; //Alle enhetene vil bli holdt på her
Så, vi oppdaterer den viktigste funksjonen ved å plassere en funksjon kalt PlaceUnits (15);. Vi vil lage dette i et øyeblikk
offentlig funksjon SelectionDemo () {//Initial isMouseHeld = false.; //Musen ikke holdes ennå. stage.addChild (selectionSprite); //Legge til selectionSprite til scenen. PlaceUnits (15); //Ringe en funksjon for å plassere enheter på scenen. //Legge lyttere stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); //Lytt til mus hold. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); //Lytt til musen utgivelsen. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); //Kjør denne funksjonen hver ramme (24 FPS).}
Tid for å gjøre funksjonen! Ok, vil vi plassere denne funksjonen etter UpdateGame (e: Hendelses): void funksjon og hva denne funksjonen vil gjøre er å legge mengden av enheter du angitt i parentes til scenen. Vi vil også legge til enhetene i listen, og gi dem tilfeldige posisjoner på scenen samtidig som at de ikke kan gyte av scenen
offentlig funksjon PlaceUnits (G: int): void {unitList = new Array ();. //Å gjøre en ny Array (liste) for å holde alle enhetene. for (var i: int = 0; i < mengde; i ++) //Kjør alt som er inne i parentes "Beløp" tider. {Var enhet: Enhet = new Unit (); //Opprette en ny enhet. unit.x = Math.random () * (550 - unit.width); //Sette en tilfeldig X Position. unit.y = Math.random () * (400 - unit.height); //Sette en tilfeldig Y posisjon. stage.addChild (enhet); //Legge til den nye enheten til scenen. unitList.push (enhet); //Å plassere enheten i Array (liste). }}
Når du kjører denne, bør du ha 15 enheter tilfeldig plassert. På tide å flytte på og programmere enheten utvalg
Trinn 9:. Z-sortering
Når du kjører spillet, vil du sannsynligvis se at det er en merkelig overlapping av! enheter. La oss fikse det! Dette er svært enkelt og krever bare en liten endring til PlaceUnits () -funksjonen.
I utgangspunktet hva vi trenger å gjøre er å legge alle enhetene til en Array (liste), og deretter sortere listen basert på Y (vertikal stilling) av enhetene. Jo lavere Y-egenskapen, den videre bakover det skal være. Vi vil endre PlaceUnits () -funksjonen til:
offentlig funksjon PlaceUnits (G: int): void {unitList = new Array (); //Å gjøre en ny Array (liste) for å holde alle enhetene. for (var i: int = 0; i < mengde; i ++) //Kjør alt som er inne i parentes "Beløp" tider. {Var enhet: Enhet = new Unit (); //Opprette en ny enhet. unit.x = Math.random () * (550 - unit.width); //Sette en tilfeldig X Position. unit.y = Math.random () * (400 - unit.height); //Sette en tilfeldig Y posisjon. unitList.push (enhet); //Å plassere enheten i Array (liste). } UnitList.sortOn ("y", Array.NUMERIC); //Sorterer listen i rekkefølge av "Y" egenskaper! for (var j: int = 0; j < mengde; j ++) //Vi skal kjøre gjennom denne løkken igjen for å legge enhetene. {Stage.addChild (unitList [j]); //Dette legger til 'sortert' enhet til scenen. }}
Det vi har det ... ingen flere overlappinger!
Trinn 10: Valg Units
Nå, hver ramme vi vil sjekke om noen enheter har blitt valgt; hvis de har så vil vi gjøre sine valg ring vises
Rediger UpdateGame () -funksjonen til følgende:
offentlig funksjon UpdateGame (e: Hendelses):. void {selectionSprite.graphics.clear (); //Clear rektangelet slik at den er klar til å bli trukket på nytt. if (isMouseHeld) {selectionRect.width = stage.mouseX - selectionRect.x; //Sett bredden av rektangelet. selectionRect.height = stage.mouseY - selectionRect.y; //Sett høyden på rektangelet. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); //Sett grensen av rektangelet. selectionSprite.graphics.beginFill (0x458B00, 0,4); //Sett fyll og åpenhet av rektangelet. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); //Tegn rektangelet på scenen! selectionSprite.graphics.endFill (); //Slutt å fylle rektangelet. CheckForSelection (); //Vi vil sjekke for å se om noen enheter har blitt valgt. }}
Som du ser, har vi lagt til en funksjon som heter CheckForSelection (). La oss lage den funksjonen etter den andre:
offentlig funksjon CheckForSelection (): void {for hver (var enhet: Enhet i unitList) //For hver enhet som er i Unit Array (liste) ... {if (enhet .hitTestObject (selectionSprite)) //Hvis selectionSprite berører Unit. {Unit.select (); //Gjør valgt enhet. } Else {unit.deselect (); //De-velg enheten. }}}
Som du kan se i de markerte linjer, velg () og velg bort () funksjonene ikke eksisterer. Åpne opp "Unit.as 'og la oss sette dem i:
pakke {import flash.display.MovieClip; public class Unit strekker MovieClip {public Var isActive: Boolean; //Forteller oss om enheten er valgt eller ikke. offentlig funksjon Unit () {isActive = false; //Enheten har ikke blitt valgt ennå. gotoAndStop (1); //Gå til og opphold på den første rammen (ingen valg ring). } Offentlig funksjon velge (): void {isActive = true; //Enheten er valgt. gotoAndStop (2); //Vis ringen. } Offentlig funksjon velge bort (): void {isActive = false; //Enheten ikke er valgt. gotoAndStop (1); //Ikke vis ringen. }}}
Kjør spillet og alle skal jobbe
Trinn 11: Utfordringer
Nå som du sucessfully har fullført denne opplæringen, jeg har nå noen utfordringer for deg å følge. Føl deg fri til å hoppe over dem, men å følge dem vil hjelpe deg å lære
Nybegynner:.
Endre farge og grensen av rektangel
Intermediate: Avansert: Bare ikke de utfordringene du føler deg komfortabel med Takk for! leser denne opplæringen, og jeg håper du har lært noe nytt. Dessuten ville jeg også takke Tomas Banzas for kunsten han gjorde Hvis du har fullført noen av de utfordringene og ønsker å vise frem resultatene, kan du legge ut en link i kommentarfeltet - jeg hadde elsker å se dem! Anmeldelser
Alle de ovennevnte
Legg til en Textfield under enheten og gjøre det vise enhetens navn KUN når valgt
Spill av en lyd når en enhet er valgt
Alle de ovennevnte
Når spilleren klikker på en stilling, må utvalgte enheter flytte til den posisjonen. (Hint: Bruk en Array å vite hvilke enheter som er valgt.)
Konklusjon