Share
Unul dintre cele mai populare jocuri Flash este vreodată Bloons, în care joci o maimuță care aruncă săgeți pentru a pop baloane. S-au născut numeroase sechele, chiar și în alte genuri, cum ar fi turnul de apărare. Acest tutorial vă va arăta cum să vă creați propriul joc de lansare a balonului, utilizând motorul QuickBox2D.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Faceți clic și mențineți apăsat pentru a determina unghiul fotografiei. Încercați să afișați toate baloanele!
În acest tutorial vom folosi o serie de clase ActionScript pentru a crea un joc Bloons Inspired. Obiectivul jocului este de a trage la baloane pentru a le arunca pe toate.
Deschideți Flash și creați un document de 480 pixeli lățime și 320 pixeli înălțime. Setați rata cadrelor la 24fps.
O interfață colorată și simplă va fi utilizată, cu mai multe forme, butoane și MovieClips. În următorii pași vom construi această interfață grafică. Veverița și grafica de acornă sunt de la openclipart.org.
Acest fundal a fost creat în Flash utilizând forme simple dreptunghiulare și ovale. Bara brună din partea de jos va servi ca o bară de informații.
Pentru a crea titlul, selectați Instrumentul pentru text (T) și modificați culoarea în #EEEEEE; scrieți textul titlului (am folosit fonturile GoodDog) și adăugați o umbră de picătură simplă. Pentru balon, selectați instrumentul Oval (O) și creați o ovală de 20x30 px # FFCE47. Utilizați Instrumentul Poly Star pentru triunghiul mic de sub el.
Utilizați din nou butonul Instrument de text pentru a crea două butoane, după cum se arată în imaginea de mai sus. Transformați-le în butoane și dați-le nume de instanțe descriptive, astfel încât să le putem folosi cu ușurință mai târziu în cod. Transformați grafica pe scenă într-un singur MovieClip și numește-o TitleView - nu uitați să verificați Exportați pentru caseta ActionScript.
Acesta este ecranul de joc, care conține toate elementele dinamice și interactive ale jocului. Mai multe dintre ele vor fi generate la runtime folosind ActionScript. Puteți citi numele instanțelor din imaginea de mai sus.
credite ecranul va apărea în fața Titlu ecran; utilizați grafica și fonturile înainte pentru ao crea. Numeste CreditsView și nu uitați să verificați Exportați pentru ActionScript cutie.
O alertă va fi afișată când toate baloanele au fost aruncate; acesta va afișa un joc peste mesaj și scorul. Folosește Instrumentul dreptunghiului pentru ao crea și a seta numele de instanță la AlertView. Din nou, marcați Exportați pentru ActionScript cutie.
Vom folosi efecte sonore pentru a spori sentimentul jocului; puteți găsi sunetul folosit în acest exemplu în Soungle.com folosind cuvântul cheie pop.
Vom folosi un motor tween diferit de cel implicit inclus în Flash, ceea ce va crește performanța și va fi mai ușor de utilizat.
Puteți descărca TweenNano de pe site-ul său oficial.
Vom folosi biblioteca fizică utilă QuickBox2D pentru a crea acest joc. Dacă nu sunteți familiarizați cu aceasta, puteți urma Seria introductivă de la Activetuts+.
Puteți descărca QuickBox2D de pe site-ul său oficial.
Vom face aplicația interactivă utilizând o clasă externă. Adăugați numele la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Creați structura claselor de bază pentru a începe să scrieți codul.
pachet import flash.display.Sprite; clasa publică principală extinde Sprite funcția publică Main (): void // code constructor
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze; import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.MovieClip; import com.actionsnippet.qbox. *; import com.greensock.TweenNano; import com.greensock.easing.Expo; importul flash.events.MouseEvent; import Box2D.Common.Math. *; importul flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest;
Acestea sunt variabilele pe care le vom folosi. Citiți comentariile din cod pentru a afla mai multe despre ele; unele dintre numele lor sunt explicative, astfel încât nu va exista nici un comentariu acolo.
private var titleView: TitluView = new TitleView (); private cred credite: CreditsView; privată lume var: QuickBox2D; private var acorn: QuickObject; private var acorns: Array = []; // stochează ghindele aruncate contacte private var: QuickContacts; // utilizate pentru a face față coliziunilor în baloanele var varbox2d private: Array = []; // stochează baloanele în etapa privată var yImpulse: Number = 0; // puterea verticală pentru a trage ghindă privată var xImpulse: int = 3; // implicit forță orizontală ghindă este aruncată pop var pop: Pop = new Pop (); // sunetul din bibliotecă
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod fiind primul care se execută când faceți o instanță a unui obiect. Constructorul clasei de documente este un caz special: rulează la începutul jocului.
Folosim acest lucru pentru a apela funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
funcția publică finală Main (): void // Code
Începem prin adăugarea TitluView din Bibliotecă în scenă.
addChild (titleView); startButtonListeners ();
Aceasta va adăuga ascultătorii mouse-ului la butoanele din ecranul de titlu, ceea ce ne va duce la ecranul jocului sau al creditelor.
funcția finală privată startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titluView.playBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView); altceva titleView.creditsBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titluView.playBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
credite ecranul este afișat când utilizatorul face clic pe butonul Credite. Un ascultător de mouse este adăugat complet MovieClip pentru ao elimina.
funcția finală privată aratăCredități (e: MouseEvent): void titleView.creditsBtn.visible = false; titleView.playBtn.visible = false; credits = new CreditsView (); addChild (credite); TweenNano.from (credite, 0,3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Cand credite ecranul este apăsat pe ecran, va fi readus înapoi și scos din scenă.
funcția finală privată ascundeCredități (e: MouseEvent): void TweenNano.to (credite, 0,3, x: -credits.width, onComplete: function (): void titleView.creditsBtn.visible = true; titleView.playBtn.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credite); credite = null;);
Următoarele linii elimină Titlu ecran și părăsiți Joc Ecran vizibil. Aici numim și funcțiile necesare pentru a începe jocul; aceste funcții sunt explicate în etapele următoare.
Accentsconagua
Funcția finală privată showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv' null; startGame ();); Să ne oprim aici pentru a face un test rapid și a ne asigura că codul nostru de joc funcționează:
Rețineți că unele linii au fost comentate, deoarece unele funcții nu au fost încă create.
Amintiți-vă că Milestone-urile sunt incluse în fișierele sursă, deci dacă dintr-un anumit motiv fișierul dvs. nu imită acest lucru, aruncați o privire la sursă pentru a vedea ce cauzează.
Această funcție adaugă ascultătorii mouse-ului necesari pentru a efectua fotografierea cu ghindă.
funcția finală privată de jocListeners (action: String = 'add'): void if (action == 'add') bg.addEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.addEventListener (MouseEvent.MOUSE_UP, împușcat); restartBtn.addEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.addEventListener (Event.ENTER_FRAME, actualizare); altceva bg.removeEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.removeEventListener (MouseEvent.MOUSE_UP, împușcat); restartBtn.removeEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.removeEventListener (Event.ENTER_FRAME, actualizare);
Aici începem jocul creând lumea Box2D și sunând funcțiile care vor crea baloanele și vor gestiona evenimentele mouse-ului.
funcția finală privată startGame (): void / * Ascunde gCircle * / gCircle.visible = false; / * Noua lume B2D * / world = noul QuickBox2D (acest lucru, debug: 0); contacte = world.addContactListener (); contacts.addEventListener (QuickContacts.ADD, onAdd); / * Crearea funcției balon * / gameListeners (); createBalloons ();
Cuibărit pentru buclele sunt folosite pentru a plasa baloanele pe scenă. Această funcție va folosi QuickBox2D addBox pentru a crea un nou obiect Box2D care va fi setat ca a Senzor - acest lucru înseamnă că nu va exista nici o reacție fizică la coliziune (adică ghindă nu va sări de pe ea), dar o coliziune va fi încă detectată. Folosind această metodă putem distruge balonul dar lăsăm ghinda să continue pe drum ca și cum nu s-ar întâmpla nimic.
Balonul este apoi adăugat la o matrice; acest lucru ne va permite accesul la toate baloanele din afara acestei funcții.
funcția finală privată createBalloons (h: int = 5, v: int = 3): void pentru (var i: int = 0; i < h; i++) for(var j:int = 0; j < v; j++) var balloon:QuickObject = world.addBox(x:10 + (i * 0.66), y:4 + (j * 1), width: 0.66, height: 1, skin:Balloon, fixedRotation:true, draggable:false, density:0); balloon.shape.m_isSensor = true; balloons.push(balloon); /* Set balloon counter */ targetTF.text = String(balloons.length); /* Start Physics */ world.start();
Desigur, nu trebuie să utilizați imbricate pentru bucle pentru a poziționa baloanele; acesta este cel mai simplu mod de a le poziționa într-o rețea, dar puteți să le poziționați manual dacă preferați.
Această funcție se ocupă de coliziunea menționată la pasul 26. Primul lucru pe care trebuie să-l faceți este să treceți prin matricea baloanelor, verificând fiecare pentru a vedea dacă se ciocnește cu ghindă.
funcția finală privată onAdd (e: Event): void pentru (var i: int = 0; i < balloons.length; i++) if(contacts.isCurrentContact(balloons[i], acorn))
Dacă coliziunea este adevărată, sunăm distruge() metoda de balon QuickObject și scoateți elementul din matrice.
baloane [i] .destroy (); balloons.splice (i, 1);
Apoi jucăm un sunet care indică succesul, sporind senzația de joc.
pop.play ();
Contoarele de scor și țintă sunt actualizate în funcție de baloanele afișate și baloanele rămase.
scoreTF.text = String (int (scoreTF.text) + 50); targetTF.text = String (lungimea baloanelor);
O alertă este apelată când toate baloanele sunt aruncate; vom vedea această funcție mai târziu în tutorial.
dacă (targetTF.text == '0') alert ();
Acest cod va arăta indicatorul de direcție al ghinionului, va reseta variabila de impuls y a ghintuiului și va adăuga un ascultător de intrare care va gestiona obiectivul.
funcția finală privată startCharge (e: MouseEvent): void yImpulse = 0; gCircle.visible = true; gCircle.addEventListener (Event.ENTER_FRAME, taxă);
Indicatorul obiectivului se rotește pentru a arăta direcția în care va fi declanșată ghindă și ajustează în mod corespunzător variabila impulsului y. Direcția loviturii este afectată de două variabile, xImpulse și yImpulse, care sunt combinate pentru a forma un impuls vector mai târziu. xImpulse rămâne constant, și yImpulse se modifică pe măsură ce utilizatorul ține apăsat butonul mouse-ului.
taxa funcției finale private (e: Event): void gCircle.rotation - = 3; yImpulse - = 0,2; / * Prevenirea supra-rotației * / dacă (gCircle.rotation < -80) yImpulse = -5.4; gCircle.rotation = -80;
Următoarele acțiuni apar atunci când butonul mouse-ului este în sus.
(e: MouseEvent): void / * Ascunde gCircle * / gCircle.removeEventListener (Event.ENTER_FRAME, încărcare); gCircle.visible = false; gCircle.rotation = 0; / * Creați un nou Acorn * / acorn = world.addBox (x: 2.76, y: 7.33, lățime: 0.66, înălțime: 0.53, piele: Acorn, fixedRotation: true, draggable: false, density: 1); acorns.push (ghindă); / * Trage ghindă * / var impuls: b2Vec2 = nou b2Vec2 (xImpulse, yImpulse); acorn.body.ApplyImpulse (impuls, acorn.body.GetWorldCenter ()); / * Actualizare counter Acorn * / acornsTF.text = String (int (acornsTF.text) -1);
Să ne oprim aici pentru a face un test rapid și a ne asigura că codul nostru de joc funcționează:
Rețineți că unele linii au fost comentate deoarece aceste funcții nu au fost create încă.
Funcția de actualizare va efectua o serie de operații EnterFrame. Să vedem acele acțiuni în următorii pași.
actualizarea funcției finale private (e: Event): void
Următoarele linii vor elimina orice ghindă care se stinge de pe scenă.
/ * Eliminați ghilimele din etapa * / pentru (var i: int = 0; i < acorns.length; i++) if(acorns[i].y > 10.66) acorns [i] .destroy (); acorns.splice (i, 1);
Jocul se termină atunci când jucătorul este scos din ghinde (sau distruge toate baloanele așa cum sa menționat anterior).
/ * Verificați nivelul eșuat * / if (int (acornsTF.text) <= 0) alert('lose'); Acest cod se execută când se face clic pe butonul Restart. Acesta va reseta variabilele necesare și ascultători pentru a reporni nivelul.
funcția finală privată restartLvl (e: MouseEvent): void / * Eliminare ascultători * / gameListeners ('rmv'); / * Distruge lumea * / world = null; / * Distruge baloane, reseta scorul și ghindele * / pentru (var i: int = 0; i < balloons.length; i++) balloons[i].destroy(); scoreTF.text = '0'; acornsTF.text = '5'; balloons = [];//clear balloons array startGame(); Această funcție va opri jocul și va afișa mesajul Game Over. Acesta adaugă, de asemenea, un ascultător de mouse pentru a reseta jocul atunci când a făcut clic.
alertă privată finală a funcției (gameState: String = 'win'): void gameListeners ('rmv'); world.stop (); var alert: AlertView = nou AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, reporniți); dacă (gameState == 'pierde') alert.titleTF.text = 'Nivelul a eșuat!'; addChild (alertă); TweenNano.from (alertă, 0.6, scaleX: 0.2, scaleY: 0.2, ease: Expo.easeOut); Acest cod va reîncărca SWF-ul, restabilind orice valoare și revenind la ecranul inițial.
reinițializare finală a funcției finale (e: MouseEvent): void navigateToURL (nou URLRequest (stage.loaderInfo.url), '_level0');
Faceți-vă propriile trucuri la joc și bucurați-vă de crearea acestuia. Poate că ați putea schimba aspectul baloanelor sau adăugați nivele noi sau modificați grafica.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
