Noțiuni introductive despre Phaser pentru dezvoltarea jocului

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 JavaScript vanilat 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.



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







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}


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ă privim 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 consulta și fișierul.

cel mai bun mod de a reda muzică în mașină

O mare parte din cod până acum configurează mediul de joc, care este variabila config magazine. În exemplul nostru, configurăm un joc phaser cu un fundal albastru (CCFFFF în cod hexagonal) care este de 600 px cu 600 px. Deocamdată, fizica jocului a fost setată la Arcadian , 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 tot ce 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ă în prezent, 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:

scene: {
preload: preload,
create: create,
update: update
}

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

cum să conectați Xbox 360 la internet prin laptop Windows 10
function update(){
}

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 mai jos o variabilă numită keyInputs unde am declarat gamePieces. Dacă o declarați acolo, toate funcțiile vor avea acces la noua variabilă.

var gamePiece;
var keyInputs;

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

function 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, mutăm piesa de joc în consecință. În exemplul de mai jos, piesa de joc este mutată de 2 px, dar puteți face ca acesta să fie un număr mai mare sau mai mic. Mutarea piesei 1 px la un moment dat părea puțin lentă.

function update(){
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 obstacole numite obstacol1 ș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.

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = 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:

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

Codul de mai sus va muta obstacle1 în jos pe ecran și obstacle2 în zona de joc de 4 px 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();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

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 spune colizorului ce trebuie 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 moduri 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 de mișcare a acestora.

află cine te-a urmărit pe instagram

Această introducere vă va ajuta să începeți, dar mai sunt multe de învățat. Marele lucru despre Phaser este că o mare parte din fizica jocului este făcută pentru dvs. Este o modalitate foarte ușoară 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.

Acțiune Acțiune Tweet E-mail 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.

Citiți în continuare Subiecte asemănătoare
  • Programare
  • JavaScript
  • HTML5
  • Dezvoltarea jocului
Despre autor Jennifer Seaton(21 articole publicate)

J. Seaton este un scriitor științific specializat în descompunerea subiectelor complexe. Are un doctorat la Universitatea din Saskatchewan; cercetările sale s-au concentrat pe utilizarea învățării bazate pe jocuri pentru a spori implicarea elevilor online. Când nu lucrează, o veți găsi cu ea citind, jucând jocuri video sau grădinărit.

Mai multe de la Jennifer Seaton

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona