Construiți un joc de frisbee simplu cu AS3

În acest tutorial, vom construi un joc foarte simplu "keepy-uppy". Faceți clic pe frisbee pentru ao trimite spre cer, apoi rotiți-o cu mouse-ul pentru a nu mai cădea la pământ! Strângeți alimentările pentru a schimba dimensiunea discului.

Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:


Pasul 1: Prezentare succintă

Folosind elemente grafice prefabricate, vom crea o interfață bine concepută care va fi alimentată de mai multe clase ActionScript 3.

Utilizatorul va putea să deplaseze un personaj pe toată scena, să colecteze elementele de upgrade și să bată gravitatea, puteți modifica valorile din clasă pentru a personaliza jocul.


Pasul 2: Setări Flash Document

Deschideți Flash și creați un document de 320 pixeli lățime, 480 pixeli înălțime. Setați rata cadrelor la 24fps.


Pasul 3: Interfața

Va fi afișată o interfață cu aspect frumos, care implică mai multe forme, butoane și multe altele.
Cele mai multe dintre graficele pe care le-am folosit au fost create în tutorialele anterioare, astfel încât nu va fi necesar să includeți creația acestora.


Pasul 4: Numele instanțelor

Imaginea de mai sus arată Nume de instanță folosit în MovieClips. Cele care încep cu a Majusculă sunteți Numele claselor bibliotecilor și nu ar trebui să fie pe scenă, există și două clipuri de nori deasupra acestei grafice, ele sunt numite nori și clouds2.


Pasul 5: Tween Nano

Vom utiliza un motor tween diferit de cel implicit inclus în bliț, ceea ce va crește performanța și va fi mai ușor de utilizat.

Poti descarca TweenNano de pe site-ul său oficial. Aflați cum să o adăugați la proiectul dvs. aici.


Pasul 6: Creați o nouă clasă ActionScript

Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.


Pasul 7: Structura clasei

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

Pasul 8: Clasele necesare

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; importul flash.events.MouseEvent; importul flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Elastic; import flash.utils.Timer; import flash.events.TimerEvent;

Pasul 9: Variabile

Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele, unele dintre ele sunt explicate de sine, astfel încât nu va fi nici un comentariu acolo.

 private var primatime: Boolean = true; gravitatea privată var: int = 2; private var throwSpeed: int; privat var xMouse: int; privat var xSpeed: int; privat var topHeight: int = 40; priv var var: Boolean; var var: int = 0; private var scorVal: int = 1; timer privat var: Timer = timer nou (10000); private var cancelBonus: Timer = nou Timer (3000); private var actualizare: Sprite;

Pasul 10: Constructorul

Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută atunci când faceți o instanță a unui obiect sau executați utilizând clasa Dococument.

Se numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.

 funcția publică (): void addGameListeners (); 

Pasul 11: Adăugați ascultători

În această funcție adăugăm ascultătorii inițiali de joc necesari pentru a începe jocul. Am setat și buttonMode proprietatea Frisbee la adevărat (aceasta va arăta cursorul mâinii când mouse-ul este peste) și ascunde indicatorul de poziție.

 funcția privată addGameListeners (): void frisbee.addEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.buttonMode = adevărat; indicator.visible = false; 

Pasul 12: Lansați Frisbee

Prima mișcare a frisbee va activa temporizatorii care se ocupă de actualizări și va apela Actualizați funcție care este principala funcție a jocului.

 lansarea funcției privateFrisbee (e: MouseEvent): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.addEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.addEventListener (Event.ENTER_FRAME, actualizare); timer.addEventListener (TimerEvent.TIMER, showUpgrade); timer.start (); xSpeed ​​= 0; xMouse = frisbee.mouseX; throwSpeed ​​= 0; 

Pasul 13: Aruncați frisbee

Această funcție resetează variabilele folosite pentru a face frisbee să se miște și să cadă; acesta rulează de fiecare dată când se face clic pe frisbee.

 funcția privată throwFrisbee (e: MouseEvent): void xSpeed ​​= 0; xMouse = frisbee.mouseX; throwSpeed ​​= 0; top = false; 

Pasul 14: Afișarea bușoanelor de upgrade

O funcție temporizată va gestiona bulele de actualizare. Timerul a fost setat în declarația variabilelor pentru a avea un interval de 10 secunde. Primul lucru pe care trebuie să-l faceți este să verificați un balon anterior în ecran și să îl eliminați dacă există unul.

 funcția privată showUpgrade (e: TimerEvent): void / * Eliminare sprite anterioară * / if (upgrade! = null) removeChild (upgrade); upgrade = null; 

Pasul 15: Îmbunătățirea punctelor duble

Actualizările sunt bule care apar pe ecran care vor oferi jucătorului abilități sau îmbunătățiri speciale.

Următorul cod calculează un număr aleatoriu (poate fi 0 sau 1) și instanțiată actualizarea punctelor duble dacă numărul este 0.

 var randomNumber: int = Math.floor (Math.random () * 2); dacă (randomNumber == 0) upgrade = new Double (); upgrade.name = 'd'; 

Pasul 16: Big Frisbee Upgrade

Dacă numărul calculat este 1, upgrade-ul mare de frisbee se adaugă la scenă. Un nume este dat la upgrade-uri pentru a determina valoarea atunci când este lovit.

 altceva upgrade = new Big (); upgrade.name = 'b';  upgrade.x = Math.floor (Math.random () * stage.stageWidth); // da o pozitie x aleatoare addChild (upgrade);

Pasul 17: Anulați actualizările

O altă funcție temporizată.

Acest lucru va fi numit atunci când jucătorul graifere bula de actualizare, numărând 3 secunde pentru a termina efectul de upgrade.

 funcția privată cancelUpgrade (e: TimerEvent): void cancelBonus.stop (); cancelBonus.removeEventListener (TimerEvent.TIMER, cancelUpgrade); scoreVal = 1; // anulați puncte duble scoreTF.textColor = 0xffffff; frisbee.scaleX = 1; // Returnați scara la frisbee.scaleY = 1 normală; 

Pasul 18: Funcția de actualizare

Funcția principală a jocului, se va ocupa de coliziuni cu zidurile, upgrade-urile și mișcarea de frisbee în fiecare cadru. Fiind o funcție atât de importantă și extinsă, vom arunca o privire la ea în următoarea parte a acestui tutorial de joc.

 actualizarea funcției private (e: Event): void 

Pasul 19: Clasa de documente

Adăugați numele clasei la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.


Pasul 20: Funcția de actualizare

Funcția principală a jocului, se va ocupa de coliziuni cu pereții, de upgrade-uri și mișcarea de frisbee la fiecare cadru, să învețe cum funcționează în etapele următoare.

 actualizarea funcției finale private (e: Event): void 

Pasul 21: Deplasați Frisbee

Frisbee-ul va fi mutat folosind valoarea throwSpeed. Această valoare se va schimba mai târziu în cod pentru a face frisbee să crească, atunci când această variabilă este 0, gravitatea va deplasa în jos frisbee.

 frisbee.y - = throwSpeed;

Pasul 22: Gravitatea

Următorul cod verifică dacă frisbee-ul a atins cel mai înalt punct permis, dacă nu, variabila throwSpeed ​​crește pentru a se ridica. În același timp, gravitatea este aplicată la variabila care determină pierderea în cele din urmă a valorii ei pozitive și scăderea frisbee.

 dacă (throwSpeed> = topHeight) top = true;  dacă (throwSpeed < topHeight && !top)  throwSpeed += 5;  if(throwSpeed <= 0)  throwSpeed = 0;  throwSpeed -= gravity; frisbee.y += gravity * 3;

Pasul 23: Faceți clic pe Poziție

Mișcarea x a frisbee se calculează în funcție de zona în care jucătorul face clic.

 în cazul în care (xMouse < frisbee.width * 0.5)  frisbee.x += xSpeed; //click the left side, so move it right  if(xMouse > frisbee.width * 0.5) frisbee.x - = xSpeed; // faceți clic pe partea dreaptă, deplasați-o la stânga

Pasul 24: Reduceți xSpeed

xSpeed ​​este valoarea care face frisbee să se deplaseze la stânga sau la dreapta.

Acest cod încetinește această mișcare scăzând valoarea până la atingerea înălțimii maxime.

 în cazul în care (xSpeed < topHeight * 0.01 && !top)  xSpeed += 1;  if(xSpeed <= 0)  xSpeed = 0; 

Să ne oprim aici pentru a face un test rapid și a ne asigura că codul nostru funcționează:


Pasul 25: Rotația

Pentru a simula mișcarea de frisbee, rotim A scrisoare înăuntru. (Acesta este un clip video din clipul de film Frisbee, care are un nume de instanță de O scrisoare.)

 frisbee.aLetter.rotationZ + = 50;

Pasul 26: Scor

Scorul crește atunci când frisbee părăsește scena și în momentul în care este invizibil pentru jucător. Dacă faceți clic pe acesta mai aproape de partea superioară, scorul câștigat va fi mai mare.

 în cazul în care (frisbee.y < 0)  score += scoreVal; scoreTF.text = String(score);

Pasul 27: Indicatorul poziției

Acest indicator urmează poziția x a frisbee în timp ce nu este în stadiu.

 indicator.visible = true; indicator.x = frisbee.x + (frisbee.width * 0.5);

Pasul 28: mutați fundalul

Următorul cod mișcă fondul inițial (dacă nu a fost șters) și norii care vor fi refolosi în joc.

 dacă (bg! = null) bg.y + = throwSpeed; clouds.y + = throwSpeed; clouds2.y + = throwSpeed; 

Pasul 29: Ștergeți fundalul inițial

Primul fundal va apărea doar la începutul jocului, astfel încât acesta va fi șters când playerul nu mai poate vedea.

 dacă (bg! = null && bg.y> stage.stageHeight) removeChild (bg); bg = null; 

Pasul 30: Nori de buclă

Fundalurile de nori vor apărea tot timpul în timpul duratei jocului. Când un fundal nu mai este vizibil, poziția sa este resetată.

 dacă (clouds.y> stage.stageHeight) clouds.y = -280;  dacă (clouds2.y> stage.stageHeight) clouds2.y = -280; 

Să ne oprim din nou pentru a face un test rapid și pentru a ne asigura că avem scor, indicator, rotație, nori și upgrade-uri (deși nu fac încă nimic?):

я


Pasul 31: Puncte duble

Punctele duble sunt adăugate la scor atunci când 2x upgrade-ul este activ, modificăm și culoarea textului pentru a face schimbarea mai vizibilă.

 dacă (upgrade! = null && frisbee.hitTestObject (actualizare) && upgrade.name == 'd') removeChild (upgrade); upgrade = null; scorulVal = 2; scoreTF.textColor = 0xf3ba35; cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start (); 

Pasul 32: Big Frisbee

Când jucătorul apucă mare bule, scara de frisbee crește cu 1, făcând mai ușor clicul.

 dacă (upgrade! = null && frisbee.hitTestObject (actualizare) && upgrade.name == 'b') removeChild (upgrade); upgrade = null; frisbee.scaleX = 2; frisbee.scaleY = 2;

Pasul 33: Anulați actualizările

Actualizarea actuală va fi activă numai timp de 3 secunde, după trecerea timpului, puterile sale sunt anulate.

 cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();

Pasul 34: Dificultate

Dificultatea jocului este gravitatea, acest cod schimbă gravitatea pe baza scorului. Când scorul ajunge la 100, gravitatea crește cu 0,5.

 dacă (scor> = 100 && scor < 102)  gravity += 0.5; 

Pasul 35: Ecranele ecranului

Pereții invizibili sunt utilizați pe lateral pentru a împiedica frisbee să meargă în afara scenei.

 în cazul în care (frisbee.x <= 0)//Left  frisbee.x = 0;  else if(frisbee.x >= (stadium.stageWidth - frisbee.width)) // Dreapta frisbee.x = (stage.stageWidth - frisbee.width); 

Pasul 36: Jocul se termină

Dacă frisbeul cade până la capăt, jocul se termină.

 dacă (frisbee.y> stage.stageHeight) gameOver (); 

Pasul 37: Îndepărtați ascultătorii

Următorul cod dezactivează toate evenimentele mouse-ului și oprește temporizatorul, ceea ce va opri jocul de la efectuarea unei activități nedorite.

 funcția privată finală gameOver (): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.removeEventListener (Event.ENTER_FRAME, actualizare); timer.stop (); timer.removeEventListener (TimerEvent.TIMER, showUpgrade);

Pasul 38: Alerta

Această funcție va opri jocul și va arăta scorul final, de asemenea, adaugă un ascultător de mouse pentru a reseta jocul când a fost făcut clic.

 var alert: AlertView = nou AlertView (); alert.buttonMode = adevărat; alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scorTF.text + '!'; alert.addEventListener (MouseEvent.MOUSE_UP, reporniți); addChild (alertă); TweenNano.from (alertă, 0.7, y: -alert.height, ușurință: Elastic.easeOut); 

Pasul 39: reporniți

Următoarea funcție va reîncărca swf-ul, reporniți orice variabilă, metodă și revenind la primul ecran.

 reinițializare finală a funcției finale (e: MouseEvent): void navigateToURL (nou URLRequest (stage.loaderInfo.url), '_level0'); 

Au fost efectuate! Încearcă:


Concluzie

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ă!

Cod