Handling Screen Arkitektur: The smertefri måte
Del
Del
Del
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Noen gang tenkt skjermen arkitektur var en unødvendig smertefullt og kjedelig oppgave? Så denne opplæringen er din venn.
Vi fant denne awesome forfatteren takket FlashGameLicense.com, stedet å kjøpe og selge Flash spill!
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Screening Process
Hvis du er noe som jeg var, Jeg har alltid hatet i begynnelsen av et prosjekt, fordi jeg ville ha til å sette opp alle skjermene. Etter at jeg sluttet koding på tidslinjen, mistet jeg den enkle bare si:. GotoAndStop (x)
Som vi alle vet, er bare galt tidslinje koding; Det forurenser miljøet og fører til tannråte. Det var enkelt å bytte skjermer imidlertid. Jeg brukte mye tid på nettet prøver å finne en effektiv metode for skjermen switching, men alt jeg fant var metoder fulle av smerte, straffe utvikleren for å ha kompliserte skjerm arkitekturer. Og ikke å endre skjermbilder fra startskjermen fikk meg til å klapse stygg kode i spillet mitt eksempel:
parent.parent.parent.dispatchEvent (Event.CUSTOM_EVENT, screen1_to_screen2);
Se hva jeg mener? Custom hendelse etter custom event, vokste jeg lei av denne absurde. Det må være en bedre måte
Trinn 2:. Lyset i enden av tunnelen
Så, jeg satt ut for å finne en metode for å håndtere komplekse skjerm arkitekturer uten alle av at pesky psykiske traumer. Ingen hendelser. Jeg snudde meg mot min favoritt måte å håndtere oppgaver som må refereres fra hvor som helst i spillet:. Statiske variabler og metoder
Ved hjelp av statiske variabler ville tillate meg å referere til et objekt fra hvor som helst jeg ville i spillet, selv i et popup av en popup på en popup. Jeg bestemte meg for å koble dette sammen med enkelhet og brukervennlighet av Flash visningslisten.
Tast inn ScreenHandler klassen
Trinn 3:. spillet
Det har sannsynligvis mange skjermer. Du har sannsynligvis din splash screen, hovedmeny, spillskjermen, kreditter, seier skjerm, og mange andre. Vi må sette opp skjermene våre først. Vi vil ikke sette noe innhold i det ennå, er spillbarheten opp til deg
Her er de skjermene jeg har:.
Som du ser, har jeg utelatt preloader. Preloading riktig er en helt annen tutorial. Du kan lære om det her:
Aktive Tuts +: Den omfattende guide til forhåndslaste en enkelt SWF-fil
Jeg skal forklare hvordan du kan kombinere dette med at opplæringen nær slutten. Nå på den delen du har alle har ventet på
Trinn 4: The ScreenHandler Class
I hovedsak er ScreenHandler klassen en skjerm objekt som inneholder alle dine skjermer og internt bytter dem på vilje. Koden er overraskende enkelt. Men jeg vil ikke bare lå en vegg av koden for deg å kjøre inn. Det ville være bortkastet hvis du ikke fullt ut forstår koden. Så jeg vil bryte det ned i et par seksjoner.
Det første vi må gjøre er å lage selve klassen. Her er koden:
pakke {import flash.display.Sprite; public class ScreenHandler strekker Sprite {//Variabler gå her offentlig funksjon ScreenHandler () {//Constructor går her} //Funksjoner gå her}}
Wow, det er ekstremt tom.
Neste vi vil legge til i våre skjermer som variabler:
private Var velkomstbilde: velkomstbilde; private Var Hovedmeny: Hovedmeny, private Var levelSelect: LevelSelect; privat Div spill: Spill; private Var studiepoeng: kreditt; private Var seier: Victory;
Akkurat kaste de under "Variabler gå her" kommentar
Og bare sånn, vi er 1 /10th av veien dit
Trinn 5:. Hva gjør det Tick
Dette er funksjonen som du vil ringe for å bytte skjermene. Den gode nyheten er at det er bare fire linjer med kode. Den dårlige nyheten er at det er bare fordi jeg liker å bryte ned min kode i håndterbare biter. Dette er den eneste offentlig funksjon i hele klassen, så dette er alt du trenger å ringe for å få klassen til å fungere. Innkapsling på det fineste
offentlig funksjon switchTo (Screen: String): void {newScreenName = Screen; switchScreens ();}
Det går under "Funksjoner gå her" kommentar. Enkelt, ikke sant? Nå må du lage en variabel kalt newScreenName og en funksjon som heter switchScreens
privat Var newScreenName: String = "";
Du vet allerede hvor det går.. Og her er den switchScreens funksjon:
privat funksjons switchScreens (): void {removeOldScreen (); . makeNewScreen ();}
Jeg advarte dere: håndterbare biter
Trinn 6: Jeg vet fortsatt ikke noe !!!
Før du blir sint med meg, skjønner at jeg gjør dette for ditt eget beste. Nei, egentlig. Bryte den opp i håndterbare biter som dette gjør det enklere for deg å finne og endre koden hvis du trenger tilpasset funksjonalitet. Jeg selv har alltid finner det nødvendig å endre koden senere i spillet, så jeg bare vedtatt denne kodingen praksis. Også, hvis du er å skrive kode og noe er ødelagt, er det lettere å finne kilden til problemet. Ok, nok av min sidesteg. Her er de funksjoner som gjør det skje (for real denne gangen)
Trinn 7:. The Beauty of Display List
removeOldScreen funksjonen tar sin mirakuløse funksjonalitet fra AS3 visningsliste . Dette var trolig den beste forbedring fra AS2. Foreldre-barn-forholdet som visningslisten har er svært nyttig i nesten alle visuelle manipulasjon, og looping gjennom barn i et display objekt er raskere enn looping gjennom movieclips i en matrise. Det er virkelig flott. Før vi skriver removeOldScreen og makeNewScreen funksjoner, trenger vi en forelder å holde skjermene. Her er en annen variabel:
private Var screenLayer: Sprite = new Sprite ();
og legge til denne linjen med kode til din konstruktøren:
this.addChild (screenLayer);
Alright, nå har vi en forelder fundament som muliggjør enkel modifisering og debugging. Alt som gjenstår å gjøre er å skrive removeOldScreen funksjonen. Her er koden:
privat funksjon removeOldScreen (): void {var oldScreen: MovieClip; oldScreen = screenLayer.getChildAt (0) som MovieClip; screenLayer.removeChild (oldScreen);}
Det vi gjør er å skape en plassholder variabel som kommer til å "bli" vår nåværende skjermen. Vi deretter ta barnet på indeksen for '0' (som er det første barnet av det overordnede objektet) og sette vår plassholder lik den. Denne praktiske metoden gjør det mulig for oss å gjøre det vi liker å enhver skjerm uten å måtte ringe skjermene bestemt variabelnavn. Vi deretter bruke removeChild metode for å bli kvitt av skjermen for godt. Bare vakker.
Vel, nå kan vi lage en blank skjerm. Det ville være fint å kunne sette noe der, ikke sant? Vel jeg skal fortelle deg hvordan du gjør det
Trinn 8:. Rette Blank Screen
Dette er den mest utførlig delen av koden, men det er veldig lett å gjøre, forstå og tilpasse. Denne delen av koden er i utgangspunktet en gigantisk bryter uttalelse som inneholder alle skjermene. Argumentet om at vi passerer inn i bryterfunksjonen er at newScreenName variabel vi satt i switchTo funksjon
privat funksjon makeNewScreen (): void {switch (newScreenName) {case "velkomstbilde". Velkomstbilde = new velkomstbilde (); screenLayer.addChild (velkomstbilde); gå i stykker; case "Hovedmeny": Hovedmeny = new Hovedmeny (); screenLayer.addChild (Hovedmeny); gå i stykker; case "LevelSelect": levelSelect = new LevelSelect (); screenLayer.addChild (levelSelect); gå i stykker; case "Game": game = new Game (); screenLayer.addChild (spill); gå i stykker; case "Credits": studiepoeng = nye Kreditt (); screenLayer.addChild (sp); gå i stykker; case "Victory": seier = new Victory (); screenLayer.addChild (seier); gå i stykker; standard: Hovedmeny = new Hovedmeny (); screenLayer.addChild (Hovedmeny); gå i stykker; } NewScreenName = "";}
Koden er ganske selvforklarende, men jeg vil forklare det anyways
tilfelle. "Skjerm": skjerm = new Screen (); screenLayer.addChild (skjerm); break;
Du knytte en streng til en skjerm. Strengen er argumentet om at du vil passere inn i switchTo funksjon. Det går deretter gjennom bryter uttalelse og velger riktig skjermen for å legge til. Det konstruerer deretter en forekomst av den variable og legger det til screenLayer. Du er ikke pålagt å sette en standard, men det er nyttig å ha en standard for noen bryter uttalelse du har for debugging formål. Den aktiverer dersom ingen av de andre tilfellene matche argument
Merk:.. Registreringen punkt skjermene trenger å være på toppen i venstre hjørne for skjermbildene skal vises riktig
Nå er vi har funksjonaliteten bak ScreenHandler klassen. Nå er det på tide å bruke den til vårt program! Før vi bruke den til programmet vårt, må vi legge et barn til screenLayer ellers, vi har ingenting å fjerne når vi kaller removeOldScreen første gang. Dette vil gi oss en feil, og feil er dårlig. Mkay
velkomstbilde = new velkomstbilde (); screenLayer.addChild (velkomstbilde);
Legg til at under resten av konstruktøren. Nå gå til toppen av klassen og import flash.display.MovieClip, hvis du ikke allerede har gjort det, og vi kan gå videre
Trinn 9:. Gjør det Arbeid
< p> Hvis du ikke har sett på tutorial jeg refererte tidligere, nå kan være på tide å gjøre det
Aktive Tuts +:. Den omfattende guide til forhåndslaste en enkelt SWF-fil
Back? Stor.
Skjermen behandleren vil bli lagt til program klassen. Selve sprite seg selv vil være en public static variabel, slik at du kan referere til den fra hvor som helst i koden din, og det vil slå skjermen. ? Enkelt, ikke sant
offentlige Static Var skjermer: ScreenHandler = new ScreenHandler ();
deretter legge dette til Application klassen 'konstruktør:
this.addChild (skjermer);
Hvis du noen gang trenger å bytte skjermer fra hvor som helst i koden din, dette er hvordan du gjør det:
Application.screens.switchTo ("SelectedScreen");
Trinn 10:? Det er mer
Vel, vi er ferdig med skjermen handler per se. Etter at jeg kode alle knappene for å bytte til hva skjermen jeg skulle ønske, det fungerer
Du kan si: ".! Thomas, er stygg denne skjermen bytter jeg ønsker skjermen overganger!"
Vel er det en god ting kodene er lett tilpasses. Bare spør pent neste gang
Trinn 11:. Slik at det ser bra
Det første trinnet i å legge skjermoverganger er å avgjøre hva slags skjerm overgangen du vil. For dette eksempelet, jeg bare kommer til å gjøre en enkel fade ut og inn. Easy rett?
Tegn et rektangel størrelsen på skjermen din.
Lag ny keyframe på rammen 10.
Lag ny keyframe på rammen 20.
Gå tilbake for å ramme en og konvertere alfa til 0;
Gå til ramme 20 og konvertere alfa til 0;
Høyreklikk på plass mellom nøkkelbilder og velg "Create Shape Tween '
Din ferdige Screen Transition skal se ut. dette:
Nå som vi har det satt opp, lar koden vår Transition klasse
Trinn 12: A Little Class
Dette er en enkel klasse for å stille opp for vårt formål, selv om du kan alltid tilpasse det til å løse dine behov. Det er behov for å utvide MovieClip, og det eneste vi legger til det er en variabel
pakke {import flash.display.MovieClip.; import flash.events.Event; public class Transition strekker MovieClip {offentlige Static Var exitFrames: Number = 11; private Var timer: Antall = 0; offentlig funksjon ScreenTransition () {this.addEventListener (Event.ENTER_FRAME, fjern); this.addEventListener (Event.REMOVED_FROM_STAGE, removeListeners); } Private funksjon remove (e: Hendelses): void {timer ++; if (Timer > = 20) {parent.removeChild (denne); }} Private funksjons removeListeners (e: Hendelses): void {this.removeEventListener (Event.ENTER_FRAME, fjern); this.removeEventListener (Event.REMOVED_FROM_STAGE, removeListeners); }}}
Den variable vi lagt var exitFrames. Vi setter den til 11. Hvorfor? Fordi det er rammen som overgangen når 100% alpha, og det er rammen vi kommer til å slå skjermene på. De andre funksjonene håndtere fjerning av klippet seg og håndtere fjerning av hendelsen lyttere når den er blitt fjernet. Mindre søppelrydding, eh
Trinn 13: Men du sa nei Hendelser
Husk at jeg sa at vi ikke ville bruke events!? Vel, løy jeg. Skjermen overgangen krever noen hendelser slik at veksling av skjermen ordentlig forsinkelser og overgangen blir fjernet når det er ferdig jobben sin.
Siden begynnelsen, var mitt mål å gjøre denne klassen så allsidig og lett å bruke som mulig. Jeg ville ikke ha noen hodepine når jeg setter opp min skjerm arkitektur. I tråd med disse retningslinjene, vil jeg gjøre det å legge på skjermen overganger et alternativ, siden noen ganger, er ikke nødvendig en skjerm overgang
Trinn 14:. Endring ting rundt
Å legge i skjermoverganger, har vi ikke engang å berøre removeOldScreen eller makeNewScreen kode fordi jeg skilte dem på forhånd. Det er nesten som jeg visste at dette kom til å skje ...
Vi kommer til å trenge massevis av nye variabler:
private Var transitionLayer: Sprite = new Sprite (); privat Var overgang: Transition; privat Div transTimer: Number = 0; privat Var makeTransition: Boolean;
transitionLayer kommer til å huse vår overgang klipp. På den måten det ikke forstyrrer vår screenLayer er antall barn. Overgangen timeren kommer til å bli brukt for timing våre handlinger i tilfelle akkurat. Make overgangsvariabel kommer til å kontrollere om en skjerm overgangen vil bli brukt, det er opp til deg!
Neste, vi kommer til å trenge å snu ting rundt i konstruktøren også. Dette er hva den nye konstruktøren skal se slik ut:
this.addChild (screenLayer); this.addChild (transitionLayer); velkomstbilde = new velkomstbilde (); screenLayer.addChild (velkomstbilde);
Og sist men ikke minst, gå til deg import området og import flash.events.Event. Etter det kan vi gjøre vei
Trinn 15:. Re-arbeider switchTo Function
Jeg ønsker fortsatt å beholde denne funksjonen kort og konsis, som å ikke komplisere brukeren sluttresultatet . Innkapsling er flott, ingen
offentlig funksjon switchTo (Screen: String, trans: Boolean = true): void {newScreenName = Screen; makeTransition = trans; this.addEventListener (Event.ENTER_FRAME, switchScreens);}
Det er mange nye ting her inne. I argumenter delen, la vi trans, som er satt til sann som standard. Dette betyr at med mindre du sier noe annet, blir det automatisk satt til å gjøre en skjerm overgang. Dette sparer deg bryet med å måtte skrive ut "ekte" hver gang du bytter skjermer. Vår makeTransition variable blir deretter satt lik trans. Den switchScreens funksjon nå vil akseptere en hendelse argument, som leder oss til neste avsnitt
Trinn 16:. Re-arbeider switchScreens Function
La oss fokusere på koden for å gjøre det skjermen overgang arbeid først. Denne vil inneholde en god mengde endring fra vår tidligere enkel kode
private funksjons switchScreens (e: Hendelses):. Void {transTimer ++; if (transTimer == 1 & & transitionLayer.numChildren < 1) {overgang = new Transition (); transitionLayer.addChild (overgang); } If (transTimer > = transition.exitFrames) {removeOldScreen (); makeNewScreen (); transTimer = 0; this.removeEventListener (Event.ENTER_FRAME, switchScreens); }}
La meg bryte det ned:
private funksjons switchScreens (e: Hendelses): void {transTimer ++; if (transTimer == 1 & & transitionLayer.numChildren < 1) {overgang = new Transition (); transitionLayer.addChild (overgang); }
Først legger vi en hendelse argument inn i funksjonen. Vi setter transTimer å øke med én hver ramme. Hvis transTimer er lik en, og transitionLayer har ingen barn, legger vi en overgang
Hvis (transTimer == transition.exitFrames) {removeOldScreen (.); makeNewScreen (); transTimer = 0; this.removeEventListener (Event.ENTER_FRAME, switchScreens); }
Når transTimer når de exitFrames vi valgt tidligere, gjør vi skjermen endringen skje. Fordi det er det det handler om, ikke sant? Da er det tilbakestiller transTimer, fjerner da hendelsen lytteren. Nå går den skjermer med en jevn skjerm overgang
Trinn 17: Re-arbeider switchScreen Function (del 2)
Vi vil nå ta imot muligheten for at du ikke vil en skjerm overgang til å skje. Vi kommer til å bryte alle våre nåværende switchScreens kode i en hvis setningen:
if (makeTransition) {//Alle dine nåværende switchScreens koden går her}
Var ikke så enkelt? Nå gjør vi et annet avsnitt for når makeTransition er ikke sant:
if (makeTransition) {//Alle dine nåværende switchScreens koden går her} else {removeOldScreen (); makeNewScreen (); this.removeEventListener (Event.ENTER_FRAME, switchScreens);}
Og det du har det, en fullt funksjonell skjerm håndtering klasse med ablility å kontrollere legge skjerm overganger! Flotte greier
Trinn 18: The Full ScreenHandler Class
Dette er hva den ferdige koden vil se slik ut:.
Pakke {import flash.display.Sprite; import flash.display.MovieClip; import flash.events.Event; public class ScreenHandler strekker Sprite {private Var velkomstbilde: velkomstbilde; private Var Hovedmeny: Hovedmeny; private Var levelSelect: LevelSelect; private Var spillet: spillet; private Var studiepoeng: Studiepoeng; private Var seier: Victory; private Var newScreenName: String = ""; private Var screenLayer: Sprite = new Sprite (); private Var transitionLayer: Sprite = new Sprite (); private Var overgang: Transition; private Var transTimer: Antall = 0; private Var makeTransition: Boolean; offentlig funksjon ScreenHandler () {this.addChild (screenLayer); this.addChild (transitionLayer); velkomstbilde = new velkomstbilde (); screenLayer.addChild (velkomstbilde); } Offentlig funksjon switchTo (Screen: String, trans: Boolean = true): void {newScreenName = Screen; makeTransition = trans; this.addEventListener (Event.ENTER_FRAME, switchScreens); } Private funksjon switchScreens (e: Hendelses): void {if (makeTransition) {transTimer ++; if (transTimer == 1 & & transitionLayer.numChildren < 1) {overgang = new Transition (); transitionLayer.addChild (overgang); } If (transTimer == transition.exitFrames) {removeOldScreen (); makeNewScreen (); transTimer = 0; this.removeEventListener (Event.ENTER_FRAME, switchScreens); }} Else {removeOldScreen (); makeNewScreen (); this.removeEventListener (Event.ENTER_FRAME, switchScreens); }} Privat funksjon removeOldScreen (): void {var oldScreen: MovieClip; oldScreen = screenLayer.getChildAt (0) som MovieClip; screenLayer.removeChild (oldScreen); } Private funksjon makeNewScreen (): void {switch (newScreenName) {case "velkomstbilde": velkomstbilde = new velkomstbilde (); screenLayer.addChild (velkomstbilde); gå i stykker; case "Hovedmeny": Hovedmeny = new Hovedmeny (); screenLayer.addChild (Hovedmeny); gå i stykker; case "LevelSelect": levelSelect = new LevelSelect (); screenLayer.addChild (levelSelect); gå i stykker; case "Game": game = new Game (); screenLayer.addChild (spill); gå i stykker; case "Credits": studiepoeng = nye Kreditt (); screenLayer.addChild (sp); gå i stykker; case "Victory": seier = new Victory (); screenLayer.addChild (seier); gå i stykker; standard: Hovedmeny = new Hovedmeny (); screenLayer.addChild (Hovedmeny); gå i stykker; } NewScreenName = ""; }}}
Dette er hvordan du implementerer det i programKlasse:
offentlige Static Var skjermer: ScreenHandler = new ScreenHandler ();
i Programmer konstruktør, legge
this.addChild (skjermer);
og bruke denne funksjonen fra hvor som helst i koden din for å bytte skjermer:
Application.screens.switchTo ("SelectedScreen");
Hvis du ikke vil ha en skjerm overgang:
Application.screens .switchTo ("SelectedScreen", false);
Trinn 19: Det ferdige produktet
Trinn 20: Nyt
Jeg tror jeg oppnådd det jeg satt ut for å gjøre. Klassen er enkel å bruke og enda mer allsidig i å legge skjermen overganger enn god ole 'tidslinje. Jeg håper du får noen bruk ut av denne klassen, og selv forbedre den og gjøre den enda mer allsidig. Himmelen er grensen med skjermoverganger, og kanskje (sannsynligvis), kan du komme opp med bedre metoder for å håndtere skjermen arkitektur: den smertefri måte
Konklusjon
Jeg håper du likte denne opplæringen, takk for lesing! Anmeldelser