Î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.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
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.
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ță 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.
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.
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.
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; 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;
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;
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 ();
Î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;
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;
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;
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;
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';
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);
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ă;
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
Adăugați numele clasei la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
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
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;
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;
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
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ă:
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;
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);
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);
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;
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;
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?):
я
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 ();
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;
Actualizarea actuală va fi activă numai timp de 3 secunde, după trecerea timpului, puterile sale sunt anulate.
cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
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;
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);
Dacă frisbeul cade până la capăt, jocul se termină.
dacă (frisbee.y> stage.stageHeight) gameOver ();
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);
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);
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ă:
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ă!