Noțiuni introductive despre Phaser pentru dezvoltarea jocului

Phaser este un cadru pentru crearea de jocuri video 2D. Folosește HTML5 Canvas pentru a afișa jocul și JavaScript pentru a rula jocul. Avantajul utilizării Phaser peste vanilie JavaScript este că are o bibliotecă extinsă care completează o mare parte din fizica jocurilor video, permițându-vă să vă concentrați asupra proiectării jocului în sine.

Phaser reduce timpul de dezvoltare și facilitează fluxul de lucru. Să învățăm cum să creăm un joc de bază cu Phaser.

De ce să te dezvolți cu Phaser?

Phaser este similar cu alte limbaje de programare vizuale prin faptul că programul se bazează pe actualizări în buclă. Phaser are trei etape principale: preîncărcare, creare și actualizare.

În preîncărcare, activele jocului sunt încărcate și puse la dispoziția acestuia.

Creați inițializează jocul și toate elementele inițiale ale jocului. Fiecare dintre aceste funcții se execută o dată când jocul este pornit.

Actualizarea, pe de altă parte, rulează în buclă pe tot parcursul jocului. Este calul de lucru care actualizează elementele jocului pentru a-l face interactiv.

Configurați-vă sistemul pentru dezvoltarea jocurilor cu Phaser

În ciuda faptului că Phaser rulează pe HTML și JavaScript, jocurile sunt de fapt rulate pe partea serverului, nu pe partea clientului. Aceasta înseamnă că va trebui să rulați jocul pe localhost. Rularea jocului în partea serverului permite jocului dvs. să acceseze fișiere și active suplimentare în afara programului. Vă recomand folosind XAMPP pentru a configura un localhost dacă nu aveți deja o singură configurare.

Ce este 127.0 0.1, Localhost sau o adresă Loopback?

Ați văzut „localhost” pe computer, dar ce este? Ce înseamnă adresa 127.0.0.1? Ai fost piratat?

Codul de mai jos vă va pune în funcțiune. Configurează un mediu de joc de bază.

Pentru a rula, jocul va necesita o imagine PNG numită „gamePiece” salvată într-un folder „img” de pe hostul local. Pentru simplitate, acest exemplu folosește un pătrat portocaliu de 60xgame de60px. Jocul dvs. ar trebui să arate cam așa:

Dacă întâmpinați o problemă, utilizați depanatorul browserului pentru a afla ce a mers prost. Lipsa chiar și a unui singur personaj poate provoca ravagii, dar, în general, depanatorul dvs. va prinde acele mici erori.

Explicarea codului de configurare

Până acum, jocul nu face nimic. Dar am acoperit deja mult teren! Să analizăm codul mai în profunzime.

Pentru ca un joc Phaser să ruleze, trebuie să importați biblioteca Phaser. Facem acest lucru pe linia 3. În acest exemplu, ne-am conectat la codul sursă, dar îl puteți descărca în localhost și puteți face referire și la fișier.

O mare parte din cod configurează până acum mediul de joc, care este variabila config magazine. În exemplul nostru, configurăm un joc phaser cu un fundal albastru (CCFFFF în cod de culoare hex) care este de 600 px cu 600 px. Deocamdată, fizica jocului a fost setată la arcadă, dar Phaser oferă fizică diferită.

In cele din urma, scenă spune programului să ruleze preîncărcare funcția înainte de începerea jocului și crea funcția pentru a începe jocul. Toate aceste informații sunt transmise obiectului de joc numit joc.

Legate de: Cele mai bune 6 laptopuri pentru programare și codificare

Următoarea secțiune de cod este locul în care jocul prinde contur. Funcția de preîncărcare este locul în care doriți să inițializați orice aveți nevoie pentru a vă rula jocul. În cazul nostru, am preîncărcat imaginea piesei noastre de joc. Primul parametru al .imagine numește imaginea noastră, iar al doilea spune programului unde să găsească imaginea.

Imaginea gamePiece a fost adăugată jocului în funcția de creare. Linia 29 spune că adăugăm imaginea gamePiece ca sprite 270px la stânga și 450px în jos din colțul din stânga sus al zonei noastre de joc.

Realizarea jocului nostru

Până acum, acest lucru poate fi numit cu greu un joc. În primul rând, nu ne putem mișca piesa de joc. Pentru a putea schimba lucrurile din jocul nostru, va trebui să adăugăm o funcție de actualizare. De asemenea, va trebui să ajustăm scena din variabila de configurare pentru a spune jocului ce funcție să ruleze atunci când actualizăm jocul.

Adăugarea unei funcții de actualizare

Scenă nouă în configurare:

scena: {
preîncărcare: preîncărcare,
create: create,
actualizare: actualizare
}

Apoi, adăugați o funcție de actualizare sub funcția de creare:

actualizare funcție () {
}

Obținerea intrărilor cheie

Pentru a permite jucătorului să controleze piesa de joc cu tastele săgeți, va trebui să adăugăm o variabilă pentru a urmări ce taste apasă jucătorul. Declarați o variabilă numită keyInputs de mai jos unde am declarat gamePieces. Dacă o declarați acolo, toate funcțiile vor permite accesul la noua variabilă.

var gamePiece;
var keyInputs;

Variabila keyInput trebuie inițializată atunci când jocul este creat în funcția create.

funcție create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Acum, în funcția de actualizare, putem verifica dacă jucătorul apasă o tastă săgeată și, dacă sunt, mișcă-ne piesa de joc în consecință. În exemplul de mai jos, piesa de joc este mutată de 2 px, dar puteți face ca acest număr să fie mai mare sau mai mic. Mutarea piesei 1 px la un moment dat părea puțin lentă.

actualizare funcție () {
if (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
if (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
if (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
if (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Jocul are un caracter mobil acum! Dar pentru a fi cu adevărat un joc, avem nevoie de un obiectiv. Să adăugăm câteva obstacole. Evitarea obstacolelor a stat la baza multor jocuri din era pe 8 biți.

Adăugarea de obstacole în joc

Acest exemplu de cod folosește două sprite de obstacol numite obstacol 1 și obstacol 2. obstacolul1 este un pătrat albastru și obstacolul2 este verde. Fiecare imagine va trebui să fie preîncărcată la fel ca sprite-ul jocului.

funcție preîncărcare () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('obstacol1', 'img / obstacol1.png');
this.load.image ('obstacol2', 'img / obstacol2.png');
}

Apoi, fiecare sprite de obstacole va trebui inițializat în funcția de creare, la fel ca gamepiece.

funcție create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
obstacol1 = this.physics.add.sprite (200, 0, 'obstacle1');
obstacol2 = this.physics.add.sprite (0, 200, 'obstacle2');
}

Făcând obstacolele să se miște

Pentru a muta piesele de data aceasta, nu vrem să folosim intrarea playerului. În schimb, să facem ca o piesă să se miște de sus în jos și cealaltă să se miște de la stânga la dreapta. Pentru aceasta, adăugați următorul cod la funcția de actualizare:

obstacol1.y = obstacol1.y + 4;
dacă (obstacol1.y> 600) {
obstacol1.y = 0;
obstacle1.x = Phaser. Matematica. Între (0, 600);
}
obstacol2.x = obstacol2.x + 4;
dacă (obstacol2.x> 600) {
obstacol2.x = 0;
obstacle2.y = Phaser. Matematica. Între (0, 600);
}

Codul de mai sus va muta obstacle1 în jos pe ecran și obstacle2 în zona de joc de 4 x fiecare cadru. Odată ce un pătrat este în afara ecranului, acesta este mutat înapoi în partea opusă într-un nou loc aleatoriu. Acest lucru va asigura că există întotdeauna un nou obstacol pentru jucător.

Detectarea coliziunilor

Dar încă nu am terminat. S-ar putea să fi observat că jucătorul nostru poate trece chiar prin obstacole. Trebuie să facem jocul să detecteze când jucătorul lovește un obstacol și termină jocul.

Biblioteca de fizică Phaser are un detector de coliziune. Tot ce trebuie să facem este să-l inițializăm în funcția de creare.

this.physics.add.collider (gamePiece, obstacle1, function (gamePiece, obstacle1) {
gamePiece.destroy ();
obstacol.destroy ();
obstacol2.distruge ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
obstacol.destroy ();
obstacol2.distruge ();
});

Metoda coliziunii necesită trei parametri. Primii doi parametri identifică obiectele care se ciocnesc. Deci, mai sus, avem doi colizori stabiliți. Primul detectează când jocul se ciocnește de obstacol1, iar cel de-al doilea colizor caută coliziuni între gamepiece și obstacol2.

Al treilea parametru îi spune colizorului ce să facă după ce detectează o coliziune. În acest exemplu, există o funcție. Dacă există o coliziune, toate elementele jocului sunt distruse; aceasta oprește jocul. Acum jucătorul va trece la joc dacă lovește un obstacol.

Încercați dezvoltarea jocului cu Phaser

Există multe modalități diferite prin care acest joc poate fi îmbunătățit și făcut mai complex. Am creat un singur jucător, dar un al doilea personaj redabil ar putea fi adăugat și controlat cu comenzile „awsd”. În mod similar, puteți experimenta adăugând mai multe obstacole și variind viteza mișcării lor.

Această introducere vă va ajuta să începeți, dar mai sunt multe de învățat. Lucrul grozav despre Phaser este că o mare parte din fizica jocului este făcută pentru dvs. Este o modalitate foarte bună de a începe să proiectezi jocuri 2D. Continuați să construiți pe acest cod și rafinați-vă jocul.

Dacă întâmpinați erori, depanatorul browserului dvs. este o modalitate excelentă de a descoperi problema.

Cum se utilizează Chrome DevTools pentru depanarea problemelor site-urilor web

Aflați cum să utilizați instrumentele de dezvoltare încorporate ale browserului Chrome pentru a vă îmbunătăți site-urile web.

Despre autor