Share
Arhitectura ecranului vreodată a fost o sarcină inutil de dureroasă și plictisitoare? Apoi, acest tutorial este prietenul tău.
Am gasit acest autor minunat datorita FlashGameLicense.com, locul unde puteti cumpara si vinde jocuri Flash!
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Dacă sunteți ceva de genul meu, am urât întotdeauna începutul unui proiect, pentru că ar fi trebuit să înființez toate ecrane. După ce am oprit codarea pe cronologie, am pierdut ușurința de a spune: gotoAndStop (x).
După cum știm cu toții, codificarea temporală este greșită; El poluează mediul înconjurător și provoacă căderea dinților. Era simplu să comutați ecrane cu toate acestea. Am petrecut mult timp online, încercând să găsesc o metodă eficientă de comutare a ecranului, dar am găsit doar metode pline de durere, pedepsind dezvoltatorul pentru a avea arhitecturi de ecran complexe. Și fără a schimba ecranele de pe ecranul de bază mi-a făcut să plesc codul urât în jocul meu, cum ar fi:
parent.parent.parent.dispatchEvent (eveniment.CUSTOM_EVENT, screen1_to_screen2);
Intelegi ce vreau sa spun? Eveniment personalizat după eveniment personalizat, m-am săturat de această absurditate. Trebuie să existe o cale mai bună.
Așadar, am început să găsesc o metodă de manipulare a arhitecturilor de ecran complexe, fără toate aceste traume minore. Fără evenimente. M-am îndreptat spre modul meu preferat de a trata sarcinile care trebuie să fie menționate de oriunde în joc: variabile și metode statice.
Utilizarea variabilelor statice mi-ar permite să fac referire la un obiect de oriunde v-aș fi dorit în joc, chiar și într-un pop-up de tip pop-up al unui pop-up. Am decis să cuplu acest lucru cu simplitatea și utilitatea listei de afișare a Flash.
Introduceți clasa ScreenHandler.
Probabil are multe ecrane. Probabil aveți ecranul dvs. de pornire, meniul principal, ecranul de joc, creditele, ecranul de victorie și multe altele. Trebuie să ne pregătim mai întâi ecranele. Încă nu vom pune în conținut niciun fel de conținut, jocul depinde de dvs..
Iată ecranele pe care le am:
După cum puteți vedea, am lăsat preloader-ul. Preîncărcarea corectă este un întreg tutorial. Puteți afla aici:
Active Tuts +: Ghidul cuprinzător pentru preîncărcarea unui singur fișier swf
Voi explica cum să combinați acest lucru cu tutorialul de lângă capăt. Acum, la partea pe care ați așteptat-o cu toții!
În esență, clasa ScreenHandler este un obiect afișat care deține toate ecranele și le comută intern la voință. Codul este surprinzător de simplu. Cu toate acestea, nu voi pune doar un zid de cod pentru ca tu să intri. Ar fi o pierdere dacă nu ați înțeles complet codul. Așa că o voi distruge în câteva secțiuni.
Primul lucru pe care trebuie să-l facem este să creăm clasa reală. Iată codul:
pachet import flash.display.Sprite; clasa publica ScreenHandler extinde Sprite // Variabilele intră aici funcția publică ScreenHandler () // Constructorul merge aici // Funcțiile merg aici
Wow, asta e extrem de gol.
Apoi vom adăuga în ecranele noastre variabile:
privat var splashScreen: SplashScreen; privat var mainMenu: MainMenu; private var levelSelect: NivelSelect; joc privat var: Joc; private cred credite: credite; victorie privată var: Victorie;
Aruncați-le pe cele aflate sub comentariul "Variabile merge aici".
Și așa, suntem la 1/10 din drumul de acolo!
Aceasta este funcția pe care o veți apela pentru a comuta ecranele. Vestea bună este că sunt doar 4 linii de cod. Vestea proastă este că numai pentru că îmi place să-mi defalc codul în bucăți ușor de gestionat. Aceasta este singura funcție publică din întreaga clasă, deoarece acesta este tot ce trebuie să sunați pentru a face ca clasa să funcționeze. Încapsulare la cele mai bune!
funcția publică switchTo (ecranName: String): void newScreenName = screenName; switchScreens ();
Asta merge sub comanda "Functions go here". Simplu, nu? Acum trebuie să faceți o variabilă numită newScreenName și o funcție numită switchScreens.
privat var nouScreenName: String = "";
Știți deja unde merge asta. Și aici este funcția switchScreens:
funcția privată switchScreens (): void removeOldScreen (); makeNewScreen ();
Te-am avertizat: niște bucăți ușor de manevrat.
Înainte de a vă mânia, înțelegeți că fac asta pentru binele vostru. Nu chiar. Împărțiți-l în bucăți ușor de manevrat, cum ar fi acest lucru vă ușurează găsirea și modificarea codului dacă aveți nevoie de funcționalitate personalizată. Eu însumi găsesc întotdeauna nevoia de a schimba codul mai târziu în joc, așa că am adoptat această practică de codificare. De asemenea, dacă scrieți cod și ceva este rupt, este mai ușor să găsiți sursa problemei. Ok, destul de rătăcitor. Iată funcțiile care o fac să se întâmple (pentru acest moment real).
Funcția removeOldScreen își ia funcționalitatea miraculoasă din lista de afișare a AS3. Aceasta a fost probabil cea mai bună îmbunătățire față de AS2. Relația părinte-copil pe care lista de afișare o are este extrem de utilă în aproape orice manipulare vizuală și looping prin copii într-un obiect de afișare este mai rapid decât looping prin MovieClips într-un matrice. Este într-adevăr grozav. Înainte de a scrie funcțiile removeOldScreen și makeNewScreen, avem nevoie de un părinte pentru a ține ecranele. Iată o altă variabilă:
privat ecran varLayer: Sprite = Sprite nou ();
și adăugați această linie de cod la constructorul dvs.:
this.addChild (screenLayer);
În regulă, acum avem o fundație părinte care permite modificarea și depanarea ușoară. Tot ce trebuie să faceți este să scrieți funcția removeOldScreen. Iată codul:
funcția privată removeOldScreen (): void var oldScreen: MovieClip; oldScreen = screenLayer.getChildAt (0) ca MovieClip; screenLayer.removeChild (oldScreen);
Ceea ce facem este sa cream o variabila placeholder ce va deveni ecranul nostru curent. Apoi, luăm copilul la indicele "0" (care este primul copil al obiectului părinte) și ne fixăm substituentul. Această metodă convenabilă ne permite să facem orice ne place pe orice ecran fără a trebui să sunăm numele variabilei specifice ecranului. Apoi folosim metoda removeChild pentru a scăpa de ecranul pentru totdeauna. Doar frumos.
Ei bine, acum putem face un ecran gol. Ar fi frumos să puteți pune ceva acolo, nu? Ei bine, am de gând să-ți spun cum să faci asta.
Aceasta este secțiunea cea mai detaliată a codului, dar este foarte ușor să faceți, să înțelegeți și să personalizați. Această secțiune a codului este, în principiu, o declarație de comutare gigantică care conține toate ecranele. Argumentul că trecem în funcția de comutare este faptul că variabila newScreenName pe care am setat-o în funcția switchTo.
funcția privată makeNewScreen (): void comutare (newScreenName) caz "SplashScreen": splashScreen = nou SplashScreen (); screenLayer.addChild (splashscreen); pauză; cazul "MainMenu": mainMenu = new MainMenu (); screenLayer.addChild (MainMenu); pauză; cazul "LevelSelect": levelSelect = new LevelSelect (); screenLayer.addChild (levelSelect); pauză; caz "Joc": joc = nou Joc (); screenLayer.addChild (joc); pauză; cazul "credite": credite = credite noi (); screenLayer.addChild (credite); pauză; caz "Victorie": victorie = victorie nouă (); screenLayer.addChild (victoria); pauză; implicit: mainMenu = new MainMenu (); screenLayer.addChild (MainMenu); pauză; newScreenName = "";
Codul este destul de explicativ, dar o voi explica oricum.
caseta "Ecran": ecran = ecran nou (); screenLayer.addChild (ecran); pauză;
Asociați un șir pe un ecran. Acest șir este argumentul că veți trece în funcția switchTo. Apoi trece prin instrucțiunea switch și selectează ecranul corect pe care îl adaugă. Apoi construiește o instanță a variabilei și o adaugă la ecranLayer. Nu este necesar să setați o valoare implicită, dar este util să aveți o valoare implicită pentru orice instrucțiune de comutare pe care o aveți pentru depanare. Se activează dacă nici unul dintre celelalte cazuri nu corespunde argumentului.
Notă: Punctul de înregistrare al ecranelor trebuie să fie în colțul din stânga sus pentru ca ecranele să fie afișate corect.
Acum avem funcționalitatea din spatele clasei ScreenHandler. Acum este timpul să o aplicăm programului nostru! Înainte de a le aplica programului nostru, trebuie să adăugăm un copil la ecranLayer altfel, nu vom avea nimic de eliminat când sunăm removeOldScreen prima dată. Acest lucru ne va da o eroare, iar erorile sunt rele. Mkay?
splashScreen = nou SplashScreen (); screenLayer.addChild (splashscreen);
Adăugați asta sub restul constructorului. Acum, mergeți la partea de sus a clasei și importați flash.display.MovieClip, dacă nu ați făcut-o deja, și putem trece mai departe.
Dacă nu te-ai uitat la tutorialul pe care l-am referit mai devreme, acum ar fi momentul să faci acest lucru.
Active Tuts +: Ghidul cuprinzător pentru preîncărcarea unui singur fișier swf
Înapoi? Grozav.
Modulul de procesare a ecranului va fi adăugat la clasa Application. Sprite-ul propriu-zis va fi o variabilă statică publică, astfel încât să puteți să o referiți oriunde din cod și să comutați ecranul. Ușor, corect?
ecrane publice statice var: ScreenHandler = new ScreenHandler ();
apoi adăugați aceasta la constructorul clasei de aplicație:
this.addChild (ecrane);
Dacă vreodată trebuie să comutați ecrane de oriunde din codul dvs., acesta este modul în care faceți acest lucru:
Application.screens.switchTo ( "SelectedScreen");
Ei bine, am terminat cu manipulatorul de ecran în sine. După ce codul de toate butoanele pentru a comuta la orice ecran doresc, funcționează.
S-ar putea spune: "Thomas, această schimbare de ecran este urâtă! Vreau tranziții pe ecran!"
Ei bine, este un lucru bun că codurile sunt ușor de personalizat. Doar intrebati data viitoare.
Primul pas în adăugarea tranzițiilor ecranului este decizia ce fel de tranziție de ecran doriți. Pentru acest exemplu, voi face o simplă decolorare și ieșire ușoară?
Terminarea dvs. de ecran finit ar trebui să arate astfel:
Acum, că am stabilit acest lucru, vă permite să codificați clasa noastră de tranziție!
Aceasta este o clasă simplă de configurat pentru scopurile noastre, deși vă puteți personaliza întotdeauna pentru a vă rezolva nevoile. Trebuie să extindem filmulClipClip și singurul lucru pe care îl adăugăm este o variabilă.
pachet import flash.display.MovieClip; importul flash.events.Event; clasa publica Tranziția extinde MovieClip statică publică exit exitFrames: Number = 11; privat var timer: Number = 0; funcția publică ScreenTransition () this.addEventListener (Event.ENTER_FRAME, eliminați); this.addEventListener (Event.REMOVED_FROM_STAGE, removeListeners); eliminarea funcției private (e: Event): void timer ++; dacă (timer> = 20) parent.removeChild (aceasta); funcția privată removeListeners (e: Event): void this.removeEventListener (Event.ENTER_FRAME, remove); this.removeEventListener (Event.REMOVED_FROM_STAGE, removeListeners);
Variabila pe care am adaugat-o a fost exitFrames. Am setat-o la 11. De ce? Deoarece acesta este cadrul pe care tranziția atinge 100% alfa, și este cadrul pe care vom schimba ecranele. Celelalte funcții se ocupă de înlăturarea clipului și de manipularea eliminării ascultătorilor de evenimente după ce au fost eliminați. Mai puțină colecție de gunoi, eh?
Îți amintești cum am spus că nu vom folosi evenimentele? L-am mințit. Trecerea pe ecran necesită câteva evenimente, astfel încât comutarea ecranului să se întârzie în mod corespunzător, iar tranziția este eliminată după terminarea lucrării.
De la început, obiectivul meu a fost de a face această clasă să fie cât mai versatilă și mai ușor de folosit posibil. N-am vrut nici o durere de cap atunci când am creat arhitectura ecranului meu. În conformitate cu aceste linii directoare, voi face ca adăugarea tranzițiilor ecranului să fie o opțiune, deoarece, uneori, nu este necesară o tranziție a ecranului.
Pentru a adăuga tranziții ecranului, nu trebuie să atingem nici măcar codul removeOldScreen sau makeNewScreen deoarece am separat-o în prealabil. E aproape că am știut că se va întâmpla ...
Vom avea nevoie de o serie de noi variabile:
privată vară de tranzițieLayer: Sprite = Sprite nou (); tranziție privată var: tranziție; privat var transTimer: Număr = 0; private var makeTransition: Boolean;
Legea tranziției va găzdui clipul nostru de tranziție. În felul acesta nu interferează cu numărul de copii ai ecranului nostru. Temporizatorul de tranziție va fi utilizat pentru a ne programa acțiunile în cazul în care evenimentul este corect. Variabila de tranziție a mărcii va controla dacă va fi folosită o tranziție a ecranului, care depinde de dvs.!
Apoi, va trebui să schimbăm lucrurile și în constructor. Acesta ar trebui să arate noul dvs. constructor:
this.addChild (screenLayer); this.addChild (transitionLayer); splashScreen = nou SplashScreen (); screenLayer.addChild (splashscreen);
Și nu în ultimul rând, mergeți la zona de import și importați flash.events.Event. După asta putem face loc.
Încă mai vreau să păstrez această funcție scurtă și dulce, pentru a nu complica rezultatul final al utilizatorului. Encapsularea este grozavă, nu?
funcția publică switchTo (ecranName: String, trans: Boolean = true): void newScreenName = screenName; makeTransition = trans; this.addEventListener (Event.ENTER_FRAME, switchScreens);
Sunt multe lucruri noi aici. În secțiunea de argumente, am adăugat trans, care este setat la adevărat în mod implicit. Aceasta înseamnă că, dacă nu spui altfel, este setată automat să se facă o tranziție a ecranului. Acest lucru vă salvează problemele de a fi nevoit să tastați "adevărat" de fiecare dată când comutați ecrane. Variabila makeTransition este apoi setată egală cu trans. Funcția switchScreens va accepta acum un argument al evenimentului, care ne va conduce la următoarea secțiune.
Să ne concentrăm asupra codului pentru ca trecerea la ecran să funcționeze mai întâi. Aceasta va prezenta o schimbare bună față de codul nostru simplu anterior.
funcția privată switchScreens (e: Event): void transTimer ++; dacă (transTimer == 1 && transitionLayer.numChildren < 1) transition = new Transition(); transitionLayer.addChild(transition); if(transTimer >= transition.exitFrames) removeOldScreen (); makeNewScreen (); transTimer = 0; this.removeEventListener (Event.ENTER_FRAME, switchScreens);
Permiteți-
funcția privată switchScreens (e: Event): void transTimer ++; dacă (transTimer == 1 && transitionLayer.numChildren < 1) transition = new Transition(); transitionLayer.addChild(transition);
Mai întâi adăugăm un argument pentru eveniment în funcție. Am stabilit ca transTimer să crească cu fiecare câte un cadru. Dacă transTimerul este egal cu unul, iar Legea tranziției nu are copii, adăugăm o tranziție.
dacă (transTimer == transition.exitFrames) removeOldScreen (); makeNewScreen (); transTimer = 0; this.removeEventListener (Event.ENTER_FRAME, switchScreens);
Odată ce transTimer ajunge la frazele de ieșire pe care le-am setat mai devreme, vom face schimbarea ecranului să se întâmple. Pentru că asta e totul, nu? Apoi resetează transTimer, apoi elimină ascultătorul evenimentului. Acum, acesta comută ecrane cu o tranziție netedă a ecranului!
Acum vom accepta posibilitatea ca nu doriți să se întâmple o tranziție a ecranului. Vom plasa toate codurile curente ale switchScreens într-o instrucțiune if:
if (makeTransition) // Toate codurile curente ale switchScreens merg aici
Nu a fost așa de ușor? Acum facem o altă secțiune atunci când makeTransition nu este adevărat:
if (makeTransition) // Toate codurile curente ale switchScreens merg aici else removeOldScreen (); makeNewScreen (); this.removeEventListener (Event.ENTER_FRAME, switchScreens);
Și acolo aveți, o clasă de manipulare a ecranului pe deplin funcțională, cu abilitatea de a controla adăugarea tranzițiilor ecranului! Lucruri minunate.
Acesta este modul în care va fi afișat codul finalizat:
pachet import flash.display.Sprite; import flash.display.MovieClip; importul flash.events.Event; clasa publica ScreenHandler extinde Sprite private var splashScreen: SplashScreen; privat var mainMenu: MainMenu; private var levelSelect: NivelSelect; joc privat var: Joc; private cred credite: credite; victorie privată var: Victorie; privat var nouScreenName: String = ""; privat ecran varLayer: Sprite = Sprite nou (); privată vară de tranzițieLayer: Sprite = Sprite nou (); tranziție privată var: tranziție; privat var transTimer: Număr = 0; private var makeTransition: Boolean; funcția publică ScreenHandler () this.addChild (screenLayer); this.addChild (transitionLayer); splashScreen = nou SplashScreen (); screenLayer.addChild (splashscreen); funcția publică switchTo (ecranName: String, trans: Boolean = true): void newScreenName = screenName; makeTransition = trans; this.addEventListener (Event.ENTER_FRAME, switchScreens); funcția privată switchScreens (e: Event): void if (makeTransition) transTimer ++; dacă (transTimer == 1 && transitionLayer.numChildren < 1) transition = new Transition(); transitionLayer.addChild(transition); if(transTimer == transition.exitFrames) removeOldScreen(); makeNewScreen(); transTimer = 0; this.removeEventListener(Event.ENTER_FRAME, switchScreens); else removeOldScreen(); makeNewScreen(); this.removeEventListener(Event.ENTER_FRAME, switchScreens); private function removeOldScreen():void var oldScreen:MovieClip; oldScreen = screenLayer.getChildAt(0) as MovieClip; screenLayer.removeChild(oldScreen); private function makeNewScreen():void switch(newScreenName) case "SplashScreen": splashScreen = new SplashScreen(); screenLayer.addChild(splashScreen); break; case "MainMenu": mainMenu = new MainMenu(); screenLayer.addChild(mainMenu); break; case "LevelSelect": levelSelect = new LevelSelect(); screenLayer.addChild(levelSelect); break; case "Game": game = new Game(); screenLayer.addChild(game); break; case "Credits": credits = new Credits(); screenLayer.addChild(credits); break; case "Victory": victory = new Victory(); screenLayer.addChild(victory); break; default: mainMenu = new MainMenu(); screenLayer.addChild(mainMenu); break; newScreenName = "";
Acesta este modul în care îl implementați în clasa de aplicații:
ecrane publice statice var: ScreenHandler = new ScreenHandler ();
în constructorul Applications, adăugați
this.addChild (ecrane);
și utilizați această funcție de oriunde din cod pentru a comuta între ecrane:
Application.screens.switchTo ( "SelectedScreen");
Dacă nu doriți o tranziție ecran:
Accentsconagua
Application.screens.switchTo ("SelectedScreen", false); Cred că am realizat ceea ce am vrut să fac. Clasa este ușor de utilizat și chiar mai versatilă în adăugarea de tranziții de ecran decât linia de timp bună a ole. Sper că veți reuși să folosiți această clasă și chiar veți îmbunătăți și veți face acest lucru și mai versatil. Cerul este limita cu tranzițiile ecranului și poate (probabil), puteți veni cu metode îmbunătățite de manipulare a arhitecturii ecranului: calea fără durere!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
