Share
Aruncați o privire prin acest Premium Tutorial și creați un joc distractiv care se încadrează în platforme folosind Flash și ActionScript 3.0. Nu loviți platformele purpurii sau nu vă mutați în afara ecranului, sau veți pierde o viață!
Folosind instrumentele de desen Flash vom crea o interfață grafică foarte bună, care va fi alimentată de mai multe clase ActionScript 3.
Utilizatorul va putea să deplaseze un personaj pe scenă și pe platforme, puteți modifica parametrii 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, sunete și multe altele.
Continuați cu pașii următori pentru a afla cum să creați această interfață grafică.
Selectați instrumentul Rectangle (R) pentru a crea un dreptunghi de 320x480px # DEBDA0 și a centra în etapă. Duplicați forma anterioară și schimbați lățimea la 2px și culoarea sa la # C3A287, duplicați forma (Cmd + D) de mai multe ori și mutați fiecare 2px spre dreapta pentru a obține rezultatul afișat mai sus.
Selectați Instrumentul Text (T), alegeți un font bun și scrieți titlul jocului. Am folosit acest format: Candara Bold, 80pt, # 746253. De asemenea, puteți adăuga grafica platformei player și platformă pe care o vom crea în pașii următori.
Utilizați aceeași tehnică pentru a crea două butoane, aliniați-le spre centru și denumiți-le startB și creditsB. Conversia tuturor la a MovieClip și setați numele instanței acestuia menuView.
Acesta va fi GameView. Adăugați fundalul MC la scena și a crea două Suprafețele dinamice de text și plasați-le așa cum se arată în imagine. De asemenea, puteți adăuga câteva forme simple în spatele Câmpuri de text pentru a face textul mai clar.
Folosește Rectangle Primitive Tool (R) pentru a crea un pătrat de 30x30px și completați-l cu # CC6600. Duplicați forma, modificați dimensiunea acesteia la 28x28px și utilizați această umplutură de gradient: # F9D03 la # EA7736. Puteți adăuga o pictogramă sau o literă pentru a identifica caracterul dvs., am folosit A din sigla ActiveTuts +.
În cele din urmă, selectați partea de jos a formei (după cum se arată în imagine) pentru ao converti MovieClip și numește-o Harea, acest lucru va fi foarte util pentru evitarea coliziunilor nedorite cu blocurile. Selectați toate formele și convertiți-le într-un singur MC; numeste Jucător și marchează Exportați pentru ActionScript cutie.
Utilizați aceeași tehnică utilizată în ultimul pas pentru a crea două blocuri de 60x14px, convertiți-le în MC, denumiți cea gri bloc și purpuriu BadBlock. Nu uitați să marcați Exportați pentru ActionScript cutie.
O alertă va apărea atunci când vă veți pierde toată viața, va afișa scorul final la care ați ajuns. Folosește Rectangle Primitive Tool pentru ao crea și a adăuga filtrul afișat în imagine pentru o imagine mai bună. Setați numele de instanță la AlertView și marchează Exportați pentru ActionScript cutie.
Acest ecran va fi ușor de făcut, deoarece avem deja toate grafica. Setați numele de instanță la CreditsView și marchează Exportați pentru ActionScript cutie.
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. Pentru informații despre instalarea acestuia, citiți acest tutorial.
Vom folosi Sound Effects pentru a îmbunătăți sentimentul jocului (în acest caz, pentru a lăsa jucătorul să știe când au pierdut o viață), puteți găsi sunetul folosit în acest exemplu pe Soungle.com folosind cuvântul cheie blip. Salvați sunetul din biblioteca cu un nume de clasă blip.
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.Event; import flash.events.KeyboardEvent; import flash.events.TimerEvent; import flash.utils.Timer; importul flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Elastic;
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.
blocuri private var: Vector.= Vector nou. (); // Un vector pentru stocarea blocurilor în mișcare private var player: Player = player nou (); gravitatea privată var: int = 3; // Valoarea gravitațională folosită pentru a muta jucătorul și blochează privatul var moveLeft: Boolean = false; // stochează direcția jucătorului private var moveRight: Boolean = false; privat var blocTimer: Timer = nou Cronometru (800); // timpul pentru a aștepta înainte ca un nou bloc să fie generat privat var life: Life; var privat: int = 3; privat var lifeTimer: Timer = nou Cronometru (8000); // timpul să aștepți înainte de a se arăta o nouă viață privată var Blip: Blip = Blip nou (); // Un exemplu de sunet
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 primul care se execută când proiectul este încărcat dacă acesta se află în clasa Document.
Se numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
Accentsconagua
funcția publică finală Principal (): void initialListeners ('add'); Vom începe prin adăugarea ascultătorilor mouse-ului la butoanele din meniul de vizualizare, acestea ne vor duce pe ecranul jocului sau pe ecranul creditelor.
funcția finală privată finală (acțiunea: String = 'add'): void if (action == 'add') menuView.startB.addEventListener (MouseEvent.MOUSE_UP, gameView); menuView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCreditsView);
Cand start butonul este apăsat, focalizarea este setată la etapă pentru a primi acțiunile tastaturii pentru a muta playerul, apoi vizualizarea meniului este completă și eliminată.
funcția finală privată finală gameView (e: MouseEvent): void / * Focus Stage * / stage.focus = stage; / * Eliminați MenuView, Start Game * / TweenNano.to (meniuView, 0.5, y: -menuView.height, onComplete: function (): void removeChild (menuView);
Ecranul creditelor este afișat când utilizatorul face clic pe butonul Credite, iar un asistent de mouse este adăugat la MC complet pentru al elimina.
funcția finală privată showCreditsView (e: MouseEvent): void var credite: CreditsView = new CreditsView (); addChild (credite); TweenNano.from (credite, 0,4, x: stage.stageWidth); credits.addEventListener (MouseEvent.MOUSE_UP, function (): void TweenNano.to (credite, 0.4, x: stage.stageWidth, onComplete: function (): void removeChild; );
Următorul cod adaugă blocurile specificate în parametru într-o poziție aleatorie, de asemenea va apela funcția de adăugare a playerului în scenă.
funcția finală privată addInitialBlocks (n: int = 3): void pentru (var i: int = 0; i < n; i++) var block:Block = new Block(); block.x = Math.random() * (stage.stageWidth - block.width); block.y = (stage.stageHeight * 0.5) + Math.random() * (stage.stageHeight * 0.5); addChild(block); blocks.push(block); addPlayer();
Playerul va fi adăugat atunci când blocurile inițiale sunt pe scenă. Va apărea în centrul X al scenei.
funcția finală privată addPlayer (): void player.x = (stage.stageWidth * 0.5) - (player.width * 0.5); player.y = player.height; addChild (jucator); gameListeners ();
Următorul cod va stabili valoarea valorii variabilei potrivite la true sau false în funcție de tasta care este apăsată, apoi variabila va fi verificată la fiecare cadru (într-o altă funcție). Acest lucru va face ca jucătorul să se deplaseze în funcție de variabila respectivă.
funcția finală privată movePlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveRight = false; moveLeft = true; altceva dacă (e.keyCode == 39) moveLeft = false; moveRight = adevărat;
Când sunt eliberate tastele săgeți, variabila corespunzătoare este setată la fals să oprească mișcarea.
funcția finală privată finală stopPlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; altceva dacă (e.keyCode == 39) moveRight = false;
Această funcție este apelată de un cronometru; se va calcula un întreg aleator de la 0 la 3, atunci când rezultatul este egal cu 0, se va adăuga un bloc rău, dacă rezultatul este diferit de 0, se va adăuga un bloc normal. Blocurile sunt adăugate la o proprietate Vector numită blocuri, în acest fel, le putem accesa în afara acestei funcții.
funcția finală privată addBlock (e: TimerEvent): void var r: int = Math.floor (Math.random () * 4); dacă (r! = 0) var bloc: bloc = bloc nou (); block.x = Math.random () * (stadiu.stageWidth - bloc.width); block.y = stage.stageHeight + block.height; addChild (bloc); blocks.push (bloc); altceva var badBlock: BadBlock = BadBlock nou (); badBlock.name = 'rău'; badBlock.x = Math.random () * (stadiu.stageWidth - badBlock.width); badBlock.y = stage.stageHeight + badBlock.height; addChild (badBlock); blocks.push (badBlock);
O altă funcție temporizată, o grafică de viață va fi adăugată atunci când cronometrul este complet. Poziția de viață va fi ultimul bloc al vectorului - 1.
funcția finală privată addLife (e: TimerEvent): void life = new Life (); life.x = blocuri [blocks.length - 1] .x; life.y = blocuri [blocks.length - 1] .y - life.height; addChild (viață);
Această funcție adaugă și elimină ascultătorii necesari pentru a începe jocul.
funcția finală privată de jocListeners (acțiune: String = 'add'): void if (action == 'add') stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (tastaturăEvent.KEY_UP, stopPlayer); stage.addEventListener (Event.ENTER_FRAME, actualizare); blockTimer.addEventListener (TimerEvent.TIMER, addBlock); blockTimer.start (); lifeTimer.addEventListener (TimerEvent.TIMER, addLife); lifeTimer.start (); altceva stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (tastaturăEvent.KEY_UP, stopPlayer); stage.removeEventListener (Event.ENTER_FRAME, actualizare); blockTimer.removeEventListener (TimerEvent.TIMER, addBlock); blockTimer.stop (); lifeTimer.removeEventListener (TimerEvent.TIMER, addLife); lifeTimer.stop ();
Când jucătorul își pierde viața, o animație mică va fi afișată în câmpul text de viață și va fi redat un sunet pentru a avertiza utilizatorul.
funcția finală privată animateLives (): void TweenNano.from (livesTF, 0.8, x: livesTF.x - 3, ușurință: Elastic.easeOut); blip.play ();
În această parte vom începe funcția principală a jocului, această funcție va fi executată în fiecare cadru.
Următoarele linii de cod verifică variabilele de mișcare, dacă este adevărat, jucătorul va fi mutat.
actualizarea funcției finale private (e: Event): void / * Controls * / if (moveLeft) player.x - = 4; altfel dacă (moveRight) player.x + = 4;
Acest cod creează pereți invizibili pe părțile laterale ale scenei pentru a împiedica jucătorul să iasă din el.
/ * Boundaries ecran * / if (player.x <= 0) //Left player.x = 0; else if(player.x >= (stadium.stageWidth - player.width)) // Dreapta player.x = (stage.stageWidth - player.width);
Jucătorul este împins de variabila gravitațională.
/ * Jucătorul Gravity * / player.y + = gravitatea;
Următoarele linii verifică coliziunile dintre player și blocuri. Când jucătorul se ciocnește cu un bloc obișnuit, acesta rămâne pe partea de sus a acestuia. Când un bloc rău este lovit, o viață se pierde și jucătorul este mutat.
pentru (var i: int = 0; i < blocks.length; i++) if(player.hArea.hitTestObject(blocks[i]) && blocks[i].name == 'bad') for(var j:int = 3; j < blocks.length; j++) if(blocks[j].name != 'bad') player.x = blocks[j].x; player.y = blocks[j].y - player.height; lives--; animateLives(); livesTF.text = 'x' + String(lives); j = blocks.length; if(player.hArea.hitTestObject(blocks[i])) player.y = blocks[i].y - (player.height + 3);
Gravitatea afectează și blocurile, dar în direcția opusă.
blochează [i] .y - = gravitatea;
Blocurile sunt distruse atunci când nu mai sunt vizibile pe scenă.
if (blocuri [i] .y < -blocks[i].height) removeChild(blocks[i]); blocks[i] = null; blocks.splice(i, 1);
Scorul jocului ridică fiecare cadru, acest cod schimbă câmpul de text pentru a reflecta acest lucru.
scoreTF.text = String (int (scoreTF.text) + 1);
Următoarele linii se ocupă de graficul de viață și variabilele.
Dacă o viață (a 1-Up) se află pe scenă, va fi mutată în sus și va fi eliminată dacă este lovită de jucător sau nu mai este vizibilă pe scenă.
dacă (viață! = nulă) life.y - = gravitate; / * Remove + Life * / dacă (life.y < 0) removeChild(life); life = null; /* Grab +Life */ if(life != null && player.hitTestObject(life)) removeChild(life); life = null; lives++; livesTF.text = 'x' + String(lives); /* Lose Lives */ if(player.y > stage.stageHeight || player.y < -5) player.x = blocks[3].x; player.y = blocks[3].y - player.height; lives--; animateLives() livesTF.text = 'x' + String(lives);
Când jucătorul nu mai are viață, showAlert () se numește funcția. Această funcție va opri jocul și va arăta scorul final.
dacă (vieți < 0) showAlert();
Puteți adăuga cât mai multe niveluri pe care le doriți, acesta este un exemplu de cum puteți adăuga un nivel.
Când scorul a ajuns la 500, gravitatea crește cu 1, acest lucru va face jocul să se deplaseze mai repede și mai greu pentru a ateriza pe platforme, de asemenea, reduce timpul în care sunt adăugate vieți.
dacă int (scoreTF.text)> 500 && int (scoreTF.text) < 502) gravity = 4; lifeTimer = new Timer(12000);
Încercați să faceți creșterea vitezei după fiecare 500 de puncte.
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.
funcția finală privată showAlert (): void gameListeners ('rmv'); var alert: AlertView = nou AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scorTF.text + '!'; (de exemplu, e-mail: e-mail.google.com); Următoarea funcție va reîncărca SWF-ul, resetând toate variabilele și metodele și revenind la Ecran meniu.
reinițializare finală a funcției finale (e: MouseEvent): void navigateToURL (nou URLRequest (stage.loaderInfo.url), '_level0');
Adăugați numele clasei la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
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ă!
