✅ Primii pași pentru dezvoltarea jocului cu Phaser

Cuprins

Sosirea lui HTML5 A schimbat modul în care vedem webul, nu numai că ne-a oferit instrumente mai bune pentru dezvoltarea lor, dar ne-a deschis și posibilitățile de a dezvolta aplicații care merg mai departe, ca în cazul jocurilor video.
Avantajul realizării unui joc video în HTML5 este că este compatibil cu practic orice dispozitiv care are un browser și ceea ce este chiar mai bun fără a fi nevoie să descărcați sau să faceți instalări suplimentare.
Datorită acestei noi popularități, au proliferat cadrele pentru dezvoltarea jocurilor video, fiecare cu caracteristicile și avantajele sale, de data aceasta ne vom concentra asupra Phaser, motivele sunt mai multe și le putem vedea în următoarea listă:

Are o comunitate excelentă și este activă.
Se actualizează periodic.
Este gratuit.
Are instrumente de fizică care ne fac viața mai ușoară.

Deci, din moment ce vedem că are unele avantaje interesante, îl vom instala, dar mai întâi să vedem câteva cerințe pe care le cere cadrul.
1- Avem nevoie de acces la Internet pentru a putea descărca toate resursele care apar în timpul instalării cadrului, inclusiv acesta.
2- Trebuie să avem instalat sau să putem instala un server web de acest gen LAMPĂ sau WAMP sau MAMP în funcție de sistemul nostru de operare, asta pentru că Phaser utilizări HTML5 Si deasemenea JavaScript Prin urmare, din cauza măsurilor de securitate, browserul nostru nu va accepta execuții locale.
3- Avem nevoie de permisiuni pentru a accesa folderele și serviciile necesare care sunt setate în timpul instalării cadrului.
4- Avem nevoie de un browser compatibil cu HTML5 și că are instrumente de depanare, în cazul acestui tutorial vom folosi Firefox Developer Edition în cea mai recentă versiune a sa în acest moment, totuși sunt liberi să o aleagă pe cea care li se pare cea mai bună.
5- În sfârșit, avem nevoie de un editor de text pentru a putea scrie codul pentru exemple, deoarece poate fi oricând orice avem, deși recomandăm Text sublim o NotePad ++ datorită numărului mare de pluginuri pe care le au ambele, care ne ușurează viața ca dezvoltatori.
Primul lucru pe care îl vom face pentru a putea instala Phaser este să accesați site-ul său oficial și aici vom găsi mai multe resurse, cu toate acestea, deocamdată vom merge la secțiunea care spune Descarca:

MARI

Avem mai multe opțiuni de descărcat, cele două pe care le putem folosi sunt pentru a descărca .zip comprimat sau .tar.gz, putem face și o clonă din Github a proiectului, în cazul nostru vom descărca proiectul în .zip pentru a accelera procesul. Odată ce am descărcat sau clonat proiectul, cele mai importante directoare sunt următoarele:
docs / index.htmlAici avem intrarea în documentația offline și oficială a versiunii pe care tocmai am descărcat-o, ne poate ajuta să analizăm câteva detalii, deși, dacă avem opțiunea de a merge la Internet și de a ne documenta, vom avea întotdeauna opțiuni mai bune.
build / phaser.min.jsAcesta este cadrul nostru ca atare, este biblioteca redusă și comprimată care conține toate instrumentele de care vom avea nevoie pentru a începe primele noastre proiecte.
Deoarece am descărcat proiectul, pentru a verifica dacă totul este corect, trebuie pur și simplu să copiem folderul dezarhivat de unde îl putem accesa cu serverul nostru web, în general acesta este directorul www sau public_html, totul depinde cu adevărat de mediul nostru.
Odată ajuns acolo, trebuie să mergem la browserul nostru și să rulăm localhost / phaser sau numele pe care l-am plasat și vom vedea lista de fișiere, aici trebuie să navigăm la următorul folder: resurse / tutoriale / 01 Noțiuni introductive / hellophaser / index.html și putem aprecia ceea ce vedem în următoarea captură de ecran:

MARI

Primul nostru jocDeoarece am verificat că mediul nostru funcționează perfect, este timpul să ne realizăm primul joc, pentru aceasta vom stabili un obiectiv realizabil pentru nivelul nostru în acest moment, unde la sfârșitul exemplului trebuie să putem arăta un Sprite pe ecran.
În folderul pe care avem cadrul pe serverul nostru web vom crea un folder nou, în acest caz îl vom numi phaser-exemplu, în interior vom plasa fișierul phaser.min.js la rădăcina acestuia, vom crea un fișier numit index.html și un alt fișier numit main.js, trebuie să plasăm și o imagine numită logo.png.webp care va fi sprite-ul pe care îl vom arăta, care poate fi găsit în resursele cadru și aceasta poate fi o dimensiune recomandată de 180 pe 64 de pixeli. În cele din urmă, directorul nostru ar trebui să arate astfel:

Întrucât structura noastră este stabilită acum, trebuie să începem să scriem codul pentru primul nostru proiect, pentru aceasta ceea ce trebuie să facem este să ne deschidem fișierul index.html și acolo vom include fișierele .js pe care le-am creat, pe lângă crearea unui care va avea ca identificator cuvântul gameDiv. Să vedem cum arată codul nostru:

 Primul nostru joc pe Phaser
Primul nostru joc =)

Aceasta va fi baza pe care va fi sprijinit jocul nostru, astfel încât utilizatorul să poată vizualiza conținutul. Următorul pas în construirea primului nostru joc este să scriem codul pentru main.js, care va gestiona toată logica jocului nostru și conține trei metode cheie, să vedem:
preîncărcareAceastă metodă este responsabilă pentru preîncărcarea tuturor resurselor de care are nevoie jocul nostru, fie că sunt imagini, audio, videoclipuri etc. Rulează întotdeauna la pornire.
creaAceastă metodă rulează după ce a terminat preîncărcare și funcția sa este de a încorpora resursele încărcate în jocul nostru, pe lângă faptul că ne oferă posibilitatea de a stabili configurarea inițială a acestuia.
ActualizațiÎn cele din urmă, această metodă rulează de 60 de ori pe secundă și conține adevărata logică a jocului nostru, este ceea ce ne oferă mișcarea ca să spunem așa.
După cum putem vedea, fiecare dintre aceste metode este responsabilă de o stare a jocului, primele două sunt înainte de începerea jocului, în timp ce Actualizați apare în timpul execuției. Odată ce am definit ce face fiecare metodă, trebuie doar să vedem codul de care avem nevoie:

 var mainState = {preload: function () {// Încărcăm imaginea game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Ne arătăm imaginea în jocul this.sprite = game.add.sprite (200, 150, „logo”); }, update: function () {// schimbăm unghiul cu o unitate de 60 de ori pe secundă // acest lucru ne va oferi un efect de rotație a imaginii this.sprite.angle + = 1; }}; // aici ne începem jocul și îl setăm // să folosim div gameDiv pe care l-am pus în jocul nostru HTMLvar = nou Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

După cum putem vedea la sfârșitul metodelor, creăm o variabilă numită joc și în aceasta executăm o instanță de Phaser.Joc unde trecem câțiva parametri, în acest moment nu este necesar să știm multe despre ei, pur și simplu îi copiem așa cum îi vedem. Dar aproximativ aceasta este partea în care îi spunem aplicației noastre să o caute Phaser astfel încât să vă spună ce să faceți cu metodele pe care le-am creat mai sus și la final game.state.start este locul în care spunem cadrului pentru a începe jocul nostru.
Acum, dacă totul a mers bine, vom rula proiectul nostru în browser și ar trebui să vedem imaginea selectată rotindu-se pe ecran:

În cazul acestui exemplu, am folosit o imagine care intră în resursele PhaserCu toate acestea, nu este cu adevărat o cerință, cu orice imagine am putea obține aceleași rezultate. Un alt lucru pe care îl putem observa în exemplul nostru este că, mai jos, avem consola de depanare a browserului deschisă, acest instrument este cel mai bun prieten pe care îl vom avea, de aceea putem depana diferitele erori pe care le putem găsi atunci când ne dezvoltăm jocurile.
Cu aceasta am terminat acest tutorial, am instalat cu succes Phaser, am cunoscut câteva dintre caracteristicile inițiale ale acestui cadru excelent și cu aceasta am creat o mică aplicație sau joc. Este important să luați acest tutorial ca punct de plecare pentru a face o cercetare puțin mai aprofundată Phaser, deoarece acesta nu este nici măcar 1% din tot ceea ce ne oferă, totuși este un prim pas pe care atât de des ne costă să îl facem.