Share
În acest Premium Tutorial, vom construi un joc Breakout; "Brick Breaker" de la zero folosind Flash și AS3.
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 juca printr-o serie de nivele, puteți adăuga cu ușurință cât mai multe niveluri pe care le doriți!
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ă și frumoasă. Acesta va conține mai multe forme, butoane, imagini bitmap și multe altele.
Să mergem direct în crearea acestei interfețe grafice.
Acesta este ecranul principal sau vizualizarea, acesta va fi primul grafic care apare în jocul nostru.
Creați un dreptunghi de 320x480 și completați-l cu acest gradient radial: # 3A9826, # 102A07.
Vom da un pic mai multe detalii adăugând un filtru Photoshop, dacă nu aveți Photoshop puteți încerca să adăugați un efect frumos folosind Flash Tools.
Deschideți imaginea din Photoshop și mergeți la Filtre> Textură> Patchwork, utilizați următoarele setări:
Veți ajunge cu ceva de genul:
Acest fundal va fi pe scenă, precum și indicatorii cu zbaturi, cu bile și text. Conversia fundalului la a MovieClip și numește-o bg.
Selectați instrumentul Text (T), selectați un font potrivit și scrieți titlul jocului. Am folosit acest format: Akashi, 55pt, # FFCC33.
Selectați TextField și utilizați panoul Filtre pentru a adăuga o Shadow Drop:
Duplicați textul (Cmd + D) și mutați-l cu 3px în sus pentru a da o emboss.
Transformați grafica într-un MovieClip și numește-o MenuScreen, nu uitați să marcați Exportați pentru ActionScript cutie. Puteți șterge acest lucru din etapă când ați terminat, așa cum se va numi utilizând AS3.
Utilizați instrumentul primitiv dreptunghi (R) pentru a crea un dreptunghi rotund de 57x11,5px, modificați raza de colț la 10 și aplicați acest gradient: # 4E4E4E, #BABABA, #B0B3BA.
Adăugați câteva linii detaliate cu instrumentul Rectangle, utilizați propriul stil!
Puteți adăuga, de asemenea, o anumită culoare pe paleta dvs., aici este rezultatul final al meu, culoarea utilizată este: # CC0000.
Transformați grafica într-un MovieClip și numește-o paletă.
Pentru a crea o minge, selectați Instrumentul Oval (O) și utilizați-l pentru a crea un cerc de 12x12px, #CCCCCC.
Duplicați cercul (Cmd + D) modificați dimensiunea acestuia la 10x10px și completați-o cu acest gradient radial: # 95D4FF, # 0099FF.
În cele din urmă, tăiați al doilea cerc la jumătate și folosiți instrumentul de selecție (V) pentru a face o curbă în partea de jos. Schimbați culoarea la un gradient liniar alb cu alfa 60, 10.
Transformați grafica într-un MovieClip și numește-o minge.
Cărămizile noastre vor fi foarte simple.
Utilizați instrumentul Rectangle pentru a crea un dreptunghi 38x18px și aplicați următorul gradient: # CC0000, # 8E0000, # FF5656.
Transformați dreptunghiul într-un filmClip și aplicați filtrul de umbră folosit în textul titlului pentru a vă oferi un aspect mai frumos.
Transformați din nou graficul la a MovieClip și numește-o Cărămidă, nu uitați să marcați Exportați pentru ActionScript cutie.
Ecranul Despre va afișa creditele, anul și drepturile de autor ale jocului.
Va fi destul de simplu de creat deoarece deja avem toate elementele folosite în ea.
Transformați grafica într-un MovieClip și numește-o AboutScreen, nu uitați să marcați Exportați pentru ActionScript cutie.
Acesta este ecranul de joc, acesta va fi pe scena de la început și va conține indicatorii de zbaturi, mingi, fundal și text. (Vom adăuga cărămizile folosind codul.)
Numele de instanțe sunt destul de ușor și de auto-explicative: zbaturi, minge, bg, scoreTF, livesTF și levelTF.
Pentru a utiliza dinamic fontul personalizat, va trebui să îl încorporăm în aplicație.
Selectați un câmp de text dinamic și faceți clic pe Încorporare? buton în Panoul Proprietăți.
Selectați / adăugați toate caracterele necesare și faceți clic pe O.K.
Acest ecran va apărea când jocul a fost decis; fie castigi, pierzi sau ajungi la joc (castigand toate nivelele sau pierzand toate vietile).
În această vizualizare se utilizează două tipuri de text dinamic, care vor afișa starea curentă a jocului plus un mesaj scurt. TextFields sunt numiți titleTF și msgTF.
Transformați grafica într-un MovieClip și marchează Exportați pentru ActionScript caseta, setați numele clasei la AlertScreen.
Aceasta termină partea grafică, lasă acțiunea să începă!
Vom folosi 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.
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.ui.Mouse; importul flash.events.MouseEvent; import flash.events.KeyboardEvent; importul flash.events.Event; import com.greensock.TweenNano; import com.greensock.easing.Circ;
Acestea sunt variabilele și constantele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.
constr. privat BRICK_W: int = 39; // lățimea cărămizii private const BRICK_H: int = 19; // înălțimea cărămizii private const OFFSET: int = 6; // Un decalaj folosit pentru a centra caramizile private const W_LEN: int = 8; // lungimea nivelelor, doar 8 cărămizi orizontale ar trebui să fie create pe scena private const SCORE_CONST: int = 100; // suma care trebuie adăugată scorului când o cărămidă este lovită de cărămizi particulare: Vector.= Vector nou. (); // stochează toate caramizile private var xSpeed: int = 5; privat var ySpeed: int = -5; privat var xDir: int = 1; // x direcția privat var yDir: int = 1; private var gameEvent: String = "; // stochează evenimente cum ar fi câștiga, pierde, gameover private var actualLevel: int = 0; privat var menScreen: MenuScreen; // o instanță a ecranului de meniu priv var aboutScreen: AboutScreen; AlertScreen; var privat var: int = 3; private var levels: Array = []; // stochează nivelele
Toate nivelurile noastre vor fi stocate în tablouri multidimensionale.
Acestea sunt tablouri care conțin arrayuri; le puteți scrie într-o singură linie, dar dacă le aliniați, puteți vedea efectiv forma pe care o va lua nivelul.
privat const LEVEL_1: Array = [[0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0], [0,0,0, 1,1,0,0,0], [0,0,0,1,1,0,0,0], [0,1,1,1,1,1,1,0], [0, 1,1,1,1,1,0], [0,0,0,1,1,0,0,0], [0,0,0,1,1,0,0,0] , [0,0,0,0,0,0,0,0],]; // acesta este un semn +! const constanta LEVEL_2: Array = [[0,0,0,0,0,0,0,0], [0,0,0,1,1,0,0,0], [0,0,1, 0,0,0,0,0], [0,0,0,0,0,1,0,0], [0,0,0,0,1,0,0,0], [0, 0,0,1,0,0,0,0], [0,0,1,0,0,0,0,0], [0,0,1,1,1,1,0,0] ,]; // acesta formează un număr 2!
În aceste niveluri 1s reprezintă spațiul din stadiul în care va fi amplasată o cărămidă și 0s sunt doar spațiu gol. Aceste niveluri vor fi citite ulterior printr-o funcție care va pune cărămizile pe scenă. Puteți adăuga cât mai multe niveluri pe care le doriți folosind această clasă!
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 se execută atunci când jocul se încarcă, în cazul unei clase de documente).
Se numește funcțiile necesare pentru a începe jocul. Consultați aceste funcții în următorii pași.
funcția publică finală Principal (): void / * Adăugare niveluri * / levels.push (LEVEL_1, LEVEL_2); / / adăugăm nivelele la matrice pentru a afla câte ele sunt / * Ecran meniu, Butoane Ascultători * / menScreen = new MenuScreen (); addChild (menuScreen); menScreen.startB.addEventListener (MouseEvent.MOUSE_UP, tweenMS); menScreen.aboutB.addEventListener (MouseEvent.MOUSE_UP, tweenMS);
Următoarele linii se ocupă de butoanele ecranului de meniu și se află în meniul sau în ecranul Despre, în funcție de butonul apăsat.
Funcția finală privată tweenMS (e: MouseEvent): void if (e.target.name == 'startB') // dacă este apăsat butonul de pornire TweenNano.to (menScreen, 0.3, y: -menuScreen.height, ease : Circ, incomplet: init); // ecranul meniului tween alt // dacă este apăsat butonul aboutScreen = new AboutScreen (); // adaugă despre ecran addChild (aboutScreen); TweenNano.from (despreScreen, 0.3, x: stage.stageWidth, ease: Circ); // tween despre ecran despreScreen.addEventListener (MouseEvent.MOUSE_UP, hideAbout); // adauga un ascultator mouse-ului pentru ao elimina / * Elimina Despre vizualizare * / functie finala privata ascundeAparare (e: MouseEvent): void TweenNano.to (despreScreen, 0.3, x: stage.stageWidth, ease: Circ, onComplete : funcția rmv (): void aboutScreen.removeEventListener (MouseEvent.MOUSE_UP, hideAbout); removeChild (aboutScreen););
Această funcție efectuează operațiile necesare pentru a începe jocul, citiți comentariile din cod pentru a afla mai multe despre el.
funcția finală privată init (): void / * Distruge ecranul meniului * / menuScreen.startB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); menScreen.aboutB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); removeChild (menuScreen); menuScreen = null; / * Ascunde cursorul * / Mouse.hide (); / * Construiți niveluri de cărămizi * / buildLevel (LEVEL_1); / * Începeți ascultarea * / bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
Lanțul va fi controlat de mouse, va urma poziția x a mouse-ului .
funcția privată finală movePaddle (e: MouseEvent): void / * Urmați mouse-ul * / paddle.x = mouseX;
Pentru a opri paleta de la ieșirea din scenă, vom crea granițe invizibile pe laturile ecranului.
/ * Urmați mouse-ul * / paddle.x = mouseX; / * Frontiere * / dacă ((paddle.x - paddle.width / 2) < 0) paddle.x = paddle.width / 2; else if((paddle.x + paddle.width / 2) > stage.stageWidth) paddle.x = stage.stageWidth - paddle.width / 2;
Nivelurile vor fi construite de această funcție.
Utilizează un parametru pentru a obține nivelul de construit, își calculează dimensiunea și execută o buclă forțată, cu o buclă pentru înălțime și una pentru lățime. Apoi, creează o nouă instanță de caramida care este plasată în funcție de lățimea, înălțimea și numărul corespunzător eu și j.
În cele din urmă, cărămida este adăugată la cărămizi vector pentru ao accesa în afara acestei funcții.
funcția finală privată buildLevel (nivel: Array): void / * Lungime, înălțime * / var len: int = level.length; pentru (var i: int = 0; i < len; i++) for(var j:int = 0; j < W_LEN; j++) if(level[i][j] == 1) var brick:Brick = new Brick(); brick.x = OFFSET + (BRICK_W * j); brick.y = BRICK_H * i; addChild(brick); bricks.push(brick);
Această funcție adaugă sau elimină mouse-ul și intră în ascultătorii de cadre. Utilizează un parametru pentru a determina dacă ascultătorii ar trebui să fie adăugați sau eliminați: implicit este adăuga.
funcția finală privată de jocListeners (action: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.addEventListener (Event.ENTER_FRAME, actualizare); altceva stage.removeEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.removeEventListener (Event.ENTER_FRAME, actualizare);
Următorul cod solicită gameListeners () pentru a începe jocul.
funcția finală privată finală (e: KeyboardEvent): void bg.removeEventListener (MouseEvent.MOUSE_UP, startGame); gameListeners ();
Viteza mingii este determinată de xSpeed și ySpeed variabile, atunci când Actualizați funcția este executată, mingea începe să se deplaseze folosind valorile acestor valori în fiecare cadru.
actualizarea funcției finale private (e: Eveniment): void / * Ball Movement * / ball.x + = xSpeed; ball.y + = ySpeed;
Acest cod verifică coliziuni între minge și pereți.
/ * Coliziunea peretelui * / dacă (ball.x < 0)ball.x = ball.x + 3;xSpeed = -xSpeed;;//Left if((ball.x + ball.width) > stage.stageWidth) ball.x = ball.x - 3; xSpeed = -xSpeed;; // dreapta dacă (ball.y < 0)ySpeed = -ySpeed;;//Up
O declarație if-este utilizată pentru a verifica când paleta nu reușește mingea. Dacă da, jucătorul își pierde viața.
Accentsconagua
dacă ball.y + ball.height> paddle.y + paddle.height) alert ('pierzi', 'juca din nou?'); );; // în jos / pierd Atunci când mingea lovește cu lopata, ySpeed este setat la negativ pentru a face mingea să urce. De asemenea, verificăm în ce parte a paletei mingea a lovit pentru a alege partea în care se va muta în continuare.
/ * Paddle Collision, verificați care parte a paletei lovește mingea * / dacă (paddle.hitTestObject (ball) && (ball.x + ball.width / 2) < paddle.x) ySpeed = -5; xSpeed = -5; //left else if(paddle.hitTestObject(ball) && (ball.x + ball.width / 2) >= paddle.x) ySpeed = -5; xSpeed = 5; //dreapta
Noi folosim a pentru și hitTest pentru a verifica coliziunea cărămizilor, atunci când mingea lovește o cărămidă aceeași tehnică folosită în paletă este folosită pentru a determina partea pe care mingea o va urma.
/ * Coliziunea cărămizilor * / pentru (var i: int = 0; i < bricks.length; i++) if(ball.hitTestObject(bricks[i])) /* Check the which side of the brick the ball hits, left, right */ if((ball.x + ball.width / 2) < (bricks[i].x + bricks[i].width / 2)) xSpeed = -5; else if((ball.x + ball.width / 2) >= (cărămizi [i] .x + cărămizi [i]. lățime / 2)) xSpeed = 5;
Următorul cod schimbă direcția Y a mingii și înlătură cărămida de pe scenă și din vector.
/ * Schimba direcția mingii y * / ySpeed = -ySpeed; removeChild (cărămizi [i]); bricks.splice (i, 1);
Dacă doriți, puteți schimba această logică, astfel încât viteza y a mingii să fie inversată numai dacă atinge partea superioară sau inferioară a cărămizii și nu când atinge laturile. Încearcă-l și vezi ce crezi.
Fiecare lovitură de cărămidă va adăuga 100 la scor, scorul va fi luat de la scorul constant și adăugat la scorul curent folosind int și Şir funcții. Acest cod verifică, de asemenea, dacă nu există alte cărămizi în Vector și afișează o alertă dacă este cazul.
/ * Scorul ++ * / scoreTF.text = String (int (scoreTF.text) + SCORE_CONST); / * Verificați dacă toate cărămizile sunt distruse * / dacă (bricks.length < 1) alert('You Win!', 'Next Level ?'); gameEvent = 'win'; Ecranul de avertizare afișează informații despre starea jocului, este afișat când se ajunge la un eveniment de joc, cum ar fi pierderea vieții sau completarea unui nivel.
În această funcție se folosesc doi parametri:
alarmă finală a funcției finale (t: String, m: String): void gameListeners ('remove'); Mouse.show (); alertScreen = nou AlertScreen (); addChild (alertScreen); TweenNano.from (alertScreen.box, 0.3, scaleX: 0.5, scaleY: 0.5, ease: Circ); alertScreen.box.titleTF.text = t; alertScreen.box.msgTF.text = m; alertSbox.boxB.addEventListener (MouseEvent.MOUSE_UP, reporniți); Următoarea funcție verifică starea jocului (câștigă, pierde, terminat) și efectuează o acțiune în conformitate cu aceasta.
restartarea funcției finale private (e: MouseEvent): void if (gameEvent == 'win' && levels.length> currentLevel + 1) // dacă nivelul este clar, dar sunt mai multe niveluri currentLevel ++; changeLevel (nivele [currentLevel]); // următorul nivel levelTF.text = 'Nivel' + String (currentLevel + 1); altfel dacă (gameEvent == 'win' && levels.length <= currentLevel+1) //if level is clear and no more levels are available alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Congratulations!'); gameEvent = 'finished'; else if(gameEvent == 'lose' && lives > 0) // dacă nivelul a eșuat, dar trăiește> 0 changeLevel (niveluri [currentLevel]); // același nivel altceva dacă (gameEvent == 'pierde' & <= 0) //if level failed and no more lives left alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Try Again!'); gameEvent = 'finished'; else if(gameEvent == 'finished') //reached when no more lives or levels are available /* Add menu screen */ menuScreen = new MenuScreen(); addChild(menuScreen); menuScreen.startB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); TweenNano.from(menuScreen, 0.3, y: -menuScreen.height, ease: Circ); /* Reset vars */ currentLevel = 0; lives = 3; livesTF.text = String(lives); scoreTF.text = '0'; levelTF.text = 'Level ' + String(currentLevel + 1); xSpeed = 5; ySpeed = -5; clearLevel(); Această funcție se modifică la nivelul scris în parametru.
funcția finală privată changeLevel (nivel: Array): void / * Clear * / clearLevel (); / * Redraw Caramizile * / buildLevel (nivel); / * Start * / Mouse.hide (); bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
O funcție pentru a șterge cărămizile rămase și alertele din stadiu. De asemenea, va restabili poziția paletei și a mingii.
funcția finală privată clearLevel (): void / * Eliminare Alert Screen * / alertScreen.box.boxB.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alertScreen); alertScreen = null; / * Clear Cărămizi nivel * / var bricksLen: int = bricks.length; pentru (var i: int = 0; i < bricksLen; i++) removeChild(bricks[i]); bricks.length = 0; /* Reset Ball and Paddle position */ ball.x = (stage.stageWidth / 2) - (ball.width / 2); ball.y = (paddle.y - paddle.height) - (ball.height / 2) -2; paddle.x = stage.stageWidth / 2;
Vom folosi clasa de documente în acest tutorial, dacă nu știți cum să o utilizați sau sunteți puțin confuză vă rugăm să citiți acest QuickTip.
Rezultatul final este un joc personalizabil și distractiv, încercați să adăugați grafice și niveluri personalizate!
Sper că ți-a plăcut acest tutorial activ Premium, mulțumesc pentru lectură!
