Share
În acest Premium Tutorial, veți învăța să creați un joc retro de divertisment utilizând Flash și ActionScript 3.0. Check out demo - rezultatul se bazează pe clasic Box pentru Atari.
Folosind instrumentele de desen Flash vom crea interfața grafică ce va fi alimentată de mai multe clase ActionScript 3.
Jucătorul va putea să se miște și să lupte împotriva adversarului în timpul dat.
Deschideți Flash și creați un document de 320 pixeli lățime, 480 pixeli înălțime. Setați rata cadrelor la 24fps.
Va fi afișată o interfață colorată frumos, aceasta implică mai multe forme, MovieClips și multe altele.
Continuați cu pașii următori pentru a afla cum să creați această interfață grafică.
Un dreptunghi simplu verde va umple scena.
Selectați instrumentul Rectangle (R) pentru a crea un dreptunghi de 320x480 px # 649428 și a centra în scenă.
'
Folosind același instrument creați o serie de dreptunghiuri # FF9A2E pentru a crea un inel de 290x213 pixeli.
Pentru a obține efectul pixelat asupra caracterelor, utilizați instrumentul dreptunghi pentru a crea dreptunghiuri mici și pătrate pentru a se potrivi imaginii de mai sus. Poate doriți să descărcați această imagine și să o puneți pe un strat inferior în cronologie, apoi să plasați dreptunghiuri peste ea.
Trei Dynamic TextFields sunt plasate în scenă, vor fi folosite ca contoare de hit și un timer. Verificați imaginea de mai sus și plasați-o corespunzător.
Pentru a utiliza un font personalizat într-un câmp text dinamic, va trebui să îl încorporăm mai întâi.
Cu câmpul de text selectat, accesați panoul Proprietăți și faceți clic pe butonul de încorporare, va fi prezentată o fereastră de dialog în care puteți selecta caracterele necesare în joc. Alternativ, trebuie doar să bifați "Câmpuri superioare", "Câteva litere", "Numere" și "Punctuație".
Conversia formelor de scenă în MovieClip și acordarea acestora a denumirilor de instanțe afișate în imagine.
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 Tween Nano de pe site-ul său oficial.
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.Sprite; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.KeyboardEvent; importul flash.events.Event; import com.greensock.TweenNano; importul flash.events.MouseEvent; 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 explicite, astfel încât nu va exista nici un comentariu acolo.
timer privat var: Timer = nou Timer (1000); // folosit pentru a reduce timpul privat var min: int = 2; // total minute de luptă private var secs: int = 0; // începe secunde private var moveLeft: Boolean = false; // Următoarele vars sunt folosite pentru a muta playerul privat privat var moveRight: Boolean = false; privat var movUp: Boolean = false; private var moveDown: Boolean = false; privat var eTimer: Timer = nou Cronometru (50); // întârzierea mișcării inamice
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută când faceți o instanță a unui obiect sau executați când SWF încărcat dacă o parte din clasa Dococument.
Acesta numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
funcția publică finală Main (): void // code?
Vom începe prin apelarea funcției addListeners și oprirea animațiilor personajelor.
addListeners (); / * Oprire MovieClips * / player.stop (); enemy.stop ();
Apoi adăugăm ascultătorii necesari pentru chei și pentru cadrele de intrare.
funcția finală privată addListeners (): void stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (tastaturăEvent.KEY_UP, stopPlayer); stage.addEventListener (tastaturăEvent.KEY_DOWN, lovit); stage.addEventListener (tastaturăEvent.KEY_UP, resetHit); stage.addEventListener (Event.ENTER_FRAME, actualizare);
? Urmat de cronometrele necesare:
/ * Timere * / timer.addEventListener (TimerEvent.TIMER, updateCounter); timer.start (); eTimer.addEventListener (TimerEvent.TIMER, inamicUpdate); eTimer.start ();
Această funcție rulează fiecare secundă, se ocupă de cronometrul din scenă.
funcția finală privată updateCounter (e: TimerEvent): void / * Reduceți timpul * / secunde--; în cazul în care (secunde < 0) secs = 59; min--; if(min == 0 && secs == 0) //remove listeners if out of time removeListeners();
Vom adăuga un 0 în partea stângă a secundelor dacă numărul este sub 10 (deci timerul va avea întotdeauna două cifre).
/ * Ceas din două cifre * / var s: String = "; dacă (String (sec)) .length == 1) s = '0'; altceva s ="; time.text = String (min) + ':' + s + String (secunde);
Aici detectăm tasta apăsată și schimbăm variabila în consecință. Am putea muta jucatorul folosind aceeasi functie, dar mișcarea nu va fi buna ca si cum am fi folosit un eveniment enterframe.
funcția finală privată movePlayer (e: KeyboardEvent): void / * Mișcare * / if (e.keyCode == 37) moveRight = false; moveLeft = true; altceva dacă (e.keyCode == 39) moveLeft = false; moveRight = adevărat; dacă (e.keyCode == 38) moveDown = false; moveUp = true; altceva dacă (e.keyCode == 40) moveUp = false; moveDown = true;
Această funcție detectează cheia eliberată pentru a opri mișcarea playerului.
funcția finală privată finală stopPlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; altceva dacă (e.keyCode == 39) moveRight = false; dacă (e.keyCode == 38) moveUp = false; altfel dacă (e.keyCode == 40) moveDown = false; dacă (e.keyCode == 90 || e.keyCode == 88) player.gotoAndStop (1);
Hai să ne oprim aici pentru a face un test rapid și a ne asigura că codul nostru de joc funcționează.
Adăugați numele clasei la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
Acum încercați. Cronometrul ar trebui să numere și imaginile ar trebui să apară, dar mișcarea nu va funcționa încă:
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ă, așa că dacă dintr-un anumit motiv fișierul dvs. nu imită acest lucru, aruncați o privire la sursă pentru a vedea ce ar putea provoca.
Această funcție schimbă cadrul din filmul Player al filmului în rama de atac.
funcția finală privată (e: KeyboardEvent): void if (e.keyCode == 90) // cheia Z stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = 1; player.gotoAndPlay (2); altfel dacă (e.keyCode == 88) // cheia X stage.removeEventListener (KeyboardEvent.KEY_DOWN, lovit); player.scaleY = -1; // schimbați scara pentru a utiliza alți brați player.gotoAndPlay (2);
Opreste atacurile jucatorului.
funcția finală privată resetHit (e: KeyboardEvent): void if (e.keyCode == 90 || e.keyCode == 88) stage.addEventListener (KeyboardEvent.KEY_DOWN, lovit);
Una dintre funcțiile principale din clasă conține codul logic care va fi executat pe frame-ul de intrare. Am rupt explicația în următorii pași.
actualizarea funcției finale private (e: Event): void
Verificați variabilele de mișcare pentru a muta playerul.
/ * Controale * / if (moveLeft) player.x - = 4; altfel dacă (moveRight) player.x + = 4; dacă (moveUp) player.y - = 4; altfel dacă (moveDown) player.y + = 4;
Împiedicați playerul să părăsească inelul.
/ * Frontiere Player * / dacă (player.hitTestObject (topWall)) player.y = topWall.y + topWall.height + player.height * 0.5; altfel dacă (player.hitTestObject (bottomWall)) player.y = bottomWall.y - player.height * 0.5 - bottomWall.height; dacă (player.hitTestObject (leftWall)) player.x = leftWall.x + leftWall.width + player.width * 0.5; altfel dacă (player.hitTestObject (rightWall)) player.x = rightWall.x - player.width * 0.5;
Împiedicați dușmanul să părăsească inelul.
/ * Enemy Borders * / dacă (enemy.hitTestObject (topWall)) enemy.y = topWall.y + topWall.height + enemy.height * 0.5; altfel dacă (enemy.hitTestObject (bottomWall)) enemy.y = bottomWall.y - enemy.height * 0.5 - bottomWall.height; în cazul în care (enemy.hitTestObject (leftWall)) enemy.x = leftWall.x + leftWall.width + enemy.width * 0.5; altfel dacă (enemy.hitTestObject (rightWall)) enemy.x = rightWall.x - enemy.width * 0.5;
Caracterele sunt respinse dacă apare o coliziune (nu atacă).
/ * Hit * / dacă (player.hitTestObject (inamic)) player.x = player.x - 5; enemy.x = inamic.x + 5;
Să facem o altă pauză pentru a vedea cum funcționează codul nostru în acest moment. Utilizați tastele săgeată pentru a vă deplasa, și Z / X pentru a pumn:
O lovitură va fi adăugată la contor atunci când pumnul jucător / inamic lovește capul inamicului / jucătorului.
/ * Head Hit * / if (player.currentFrame! = 1 && player.fist.hitTestObject (inamic.head)) playerHits.text = String (int (playerHits.text) + 1); player.x = inamic.x - player.width - 26; if (enemy.currentFrame! = 1 && enemy.fist.hitTestObject (player.head)) enemyHits.text = String (int (enemyHits.text) + 1); enemy.x = player.x + enemy.width + 26;
A doua funcție principală, de data aceasta manipulând inamicul AI.
funcția finală privată enemyUpdate (e: TimerEvent): void
Această linie controlează mișcarea inamicului.
/ * Mișcarea Enemy * / if (enemy.x> player.x + 40) enemy.x - = 4; dacă (enemy.x < player.x) enemy.x += 4; if(enemy.y > jucator.y) enemy.y - = 4; dacă (enemy.y < player.y) enemy.y += 4;
Acest cod se ocupă de atacul inamicului. În esență, își verifică poziția și loviturile când pumnul poate lovi capul jucătorului.
/ * Inamicul atacului * / if (enemy.y> player.y + 10 && enemy.y < player.y + 21) enemy.scaleY = 1; enemy.gotoAndPlay(2); else if(enemy.y < player.y - 10 && enemy.y > player.y - 21) enemy.scaleY = -1; enemy.gotoAndPlay (2); altfel dacă (player.x - enemy.x> = -40 && player.x - enemy.x <= -30) enemy.gotoAndPlay(2); else enemy.gotoAndStop(1);
Ascultătorii vor fi eliminați după terminarea timpului.
funcția finală privată removeListeners (): void stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (tastaturăEvent.KEY_UP, stopPlayer); stage.removeEventListener (KeyboardEvent.KEY_DOWN, lovit); stage.removeEventListener (tastaturăEvent.KEY_UP, resetHit); stage.removeEventListener (Event.ENTER_FRAME, actualizare);
? La fel ca și cronometrele.
/ * Oprire temporizatoare * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, updateCounter); eTimer.stop (); eTimer.removeEventListener (TimerEvent.TIMER, inamicUpdate); enemy.gotoAndStop (1); showAlert ();
O alertă va fi afișată ulterior, acest cod instanțiează alerta.
funcția finală privată showAlert (): void var alert: AlertView = nou AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5;
Pentru a afișa textul corect în alertă, verificăm contoarele de hit-uri pentru a determina rezultatul.
/ * Verificați dacă ați câștigat sau ați pierdut pe baza rezultatelor * / if (int (playerHits.text)> int (enemyHits.text)) alert.msg.text = 'câștigi!'; altfel dacă (int (playerHits.text) < int(enemyHits.text)) alert.msg.text = 'you lose!'; else alert.msg.text = 'draw!'; TweenNano.from(alert, 0.3, scaleX: 0.5, scaleY: 0.5); alert.addEventListener(MouseEvent.MOUSE_UP, restart); addChild(alert);
Următoarea funcție va reîncărca SWF-ul, resetând toate variabilele și revenind la primul ecran.
reinițializare finală a funcției finale (e: MouseEvent): void navigateToURL (nou URLRequest (stage.loaderInfo.url), '_level0');
Suntem gata să testăm jocul și să verificăm dacă totul funcționează conform așteptărilor.
Ați creat un joc foarte distractiv, încercați să adăugați propriile caracteristici și grafică. Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua