Početak rada s Phaserom za razvoj igara

Početak rada s Phaserom za razvoj igara

Phaser je okvir za stvaranje 2D video igara. Koristi HTML5 Canvas za prikaz igre i JavaScript za pokretanje igre. Prednost korištenja Phasera u odnosu na vanilin JavaScript je u tome što ima opsežnu biblioteku koja upotpunjuje veliki dio fizike videoigara i omogućuje vam da se koncentrirate na dizajniranje same igre.





Phaser skraćuje vrijeme razvoja i olakšava tijek rada. Naučimo kako stvoriti osnovnu igru ​​s Phaserom.



Zašto se razvijati s Phaserom?

Phaser sličan je drugim vizualnim programskim jezicima po tome što se program temelji na petljastim ažuriranjima. Phaser ima tri glavne faze: unaprijed učitavanje, stvaranje i ažuriranje.





U prednaprezanju, sredstva igre se učitavaju i stavljaju na raspolaganje igri.

Create pokreće igru ​​i sve početne elemente igre. Svaka od tih funkcija pokreće se jednom pri pokretanju igre.



S druge strane, ažuriranje se odvija u toku kroz igru. Radni konj ažurira elemente igre kako bi bila interaktivna.

Postavite svoj sustav za razvoj igara s Phaserom

Unatoč tome što Phaser radi na HTML-u i JavaScript-u, igre se zapravo izvode na poslužiteljskoj, a ne na klijentskoj strani. To znači da ćete morati pokrenuti igru vaš lokalni domaćin . Pokretanje igre na strani poslužitelja omogućuje vašoj igri pristup dodatnim datotekama i sredstvima izvan programa. preporučam pomoću XAMPP -a za postavljanje lokalnog hosta ako već nemate jedno postavljanje.



Donji kôd će vas pokrenuti. Postavlja osnovno okruženje za igru.







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');
}


Za izvođenje igre potrebna je PNG slika zvana 'gamePiece' spremljena u mapu 'img' na vašem lokalnom hostu. Radi jednostavnosti, ovaj primjer koristi narančasti kvadrat veličine 60x160 piksela. Vaša igra bi trebala izgledati otprilike ovako:



Ako naiđete na problem, pomoću programa za otklanjanje pogrešaka u pregledniku utvrdite što je pošlo po zlu. Nedostatak čak i jednog znaka može izazvati pustoš, ali općenito, vaš program za otklanjanje pogrešaka će uhvatiti te male pogreške.

Objašnjenje koda za postavljanje

Zasad igra ne čini ništa. Ali već smo pokrili dosta terena! Pogledajmo kod detaljnije.

Za pokretanje Phaser igre morate uvesti Phaser knjižnicu. To radimo na liniji 3. U ovom primjeru povezali smo se s izvornim kodom, ali možete ga preuzeti na svoj localhost i referencirati datoteku.

pregledajte profile i dodajte nove prijatelje

Veći dio dosadašnjeg koda konfigurira okruženje igre, što je varijabla config trgovinama. U našem primjeru postavljamo fazersku igru ​​s plavom (CCFFFF u heksadecimalnom kodu boje) pozadinom koja je 600 x 600 piksela. Za sada je fizika igre postavljena na arkadijski , ali Phaser nudi drugačiju fiziku.

Konačno, scena govori programu da pokrene prednaprezanje funkciju prije početka igre i stvoriti funkciju za pokretanje igre. Svi ti podaci prosljeđuju se objektu igre koji se naziva igra .

Povezano: 6 najboljih prijenosnih računala za programiranje i kodiranje

Sljedeći odjeljak koda je mjesto gdje se igra zaista oblikuje. Funkcija pred učitavanja je mjesto gdje želite pokrenuti sve što vam je potrebno za pokretanje igre. U našem slučaju, unaprijed smo učitali sliku našeg komada igre. Prvi parametar .slika imenuje našu sliku, a druga govori programu gdje pronaći sliku.

Slika gamePiece dodana je igri u funkciju stvaranja. Redak 29 kaže da dodajemo sliku gamePiece kao sprite 270px lijevo i 450px dolje od gornjeg lijevog kuta našeg područja za igru.

Pokretanje našeg komada igre

Zasad se to teško može nazvati igrom. Kao prvo, ne možemo pomaknuti svoj komad igre. Da bismo mogli promijeniti stvari u našoj igri, morat ćemo dodati funkciju ažuriranja. Također ćemo morati prilagoditi scenu u varijabli config kako bismo rekli igri koju funkciju treba pokrenuti kada ažuriramo igru.

Dodavanje funkcije ažuriranja

Nova scena u konfiguraciji:

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

Zatim dodajte funkciju ažuriranja ispod funkcije izrade:

besplatni stream filmova na mreži bez prijave
function update(){
}

Dobivanje ključnih unosa

Da bismo omogućili igraču da kontrolira komad igre sa strelicama, morat ćemo dodati varijablu za praćenje koje tipke igrač pritisne. Promenite varijablu pod nazivom keyInputs ispod gdje smo deklarirali gamePieces. Ako ga tamo proglasite, sve će funkcije pristupiti novoj varijabli.

var gamePiece;
var keyInputs;

Varijabla keyInput trebala bi se inicijalizirati kada se igra stvori u funkciji create.

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

Sada u funkciji ažuriranja možemo provjeriti pritiska li igrač tipku sa strelicom, a ako jesu, prema tome pomaknuti naš komad igre. U donjem primjeru komad igre se pomiče za 2 piksela, ali to možete povećati ili povećati. Pomicanje komada od 1 piksela odjednom činilo se pomalo sporo.

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;
}
}

Igra sada ima pokretni karakter! No da bismo uistinu bili igra, potreban nam je cilj. Dodajmo neke prepreke. Izbjegavanje prepreka bila je osnova za mnoge igre u 8-bitnoj eri.

Dodavanje prepreka u igru

Ovaj primjer koda koristi dva sprajta prepreke koji se nazivaju prepreka1 i prepreka 2. prepreka1 je plavi kvadrat, a prepreka2 je zelena. Svaka slika mora biti unaprijed učitana baš kao i sprite igraćeg komada.

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

Tada će svaki sprite prepreku biti potrebno inicijalizirati u funkciji create, baš kao i komad igre.

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');
}

Uklanjanje prepreka

Za pomicanje figura ovaj put, ne želimo koristiti ulaz igrača. Umjesto toga, neka se jedan komad pomakne odozgo prema dolje, a drugi s lijeva na desno. Da biste to učinili, dodajte sljedeći kôd u funkciju ažuriranja:

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);
}

Gornji kôd pomaknut će prepreku1 niz zaslon i prepreku2 preko područja igre 4 piksela za svaki okvir. Nakon što je kvadrat izvan zaslona, ​​pomiče se na drugu stranu na novom slučajnom mjestu. To će osigurati da uvijek postoji nova prepreka za igrača.

Otkrivanje sudara

No, još nismo dovršili. Možda ste primijetili da naš igrač može proći ravno kroz prepreke. Moramo natjerati igru ​​da otkrije kada igrač naiđe na prepreku i završi igru.

Knjižnica fizike Phaser ima detektor sudarača. Sve što trebamo učiniti je inicijalizirati ga u funkciji create.

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 sudara zahtijeva tri parametra. Prva dva parametra identificiraju koji se objekti sudaraju. Dakle, gore imamo postavljena dva sudarača. Prvi detektira kada se igraći komad sudari s preprekom1, a drugi sudarač traži sudare između igraćeg komada i prepreke2.

Treći parametar govori sudaraču što treba učiniti kada otkrije sudar. U ovom primjeru postoji funkcija. Ako dođe do sudara, svi elementi igre se uništavaju; ovo zaustavlja igru. Sada će igrač prelaziti ako naleti na prepreku.

Isprobajte razvoj igara s Phaserom

Postoji mnogo različitih načina na koje se ova igra može poboljšati i učiniti složenijom. Stvorili smo samo jednog igrača, ali drugi lik koji se može igrati može se dodati i kontrolirati pomoću 'awsd' kontrola. Slično, mogli biste eksperimentirati s dodavanjem više prepreka i promjenom brzine njihovog kretanja.

kako sakriti mape windows 10

Ovaj uvod će vas pokrenuti, ali ima još mnogo toga za naučiti. Sjajna stvar u vezi Phasera je što je velik dio fizike igre napravljen za vas. To je sjajan jednostavan način za početak dizajniranja 2D igara. Nastavite graditi na ovom kodu i poboljšajte igru.

Ako naiđete na bilo koju pogrešku, program za otkrivanje pogrešaka u pregledniku odličan je način za otkrivanje problema.

Udio Udio Cvrkut E -pošta Kako koristiti Chrome DevTools za rješavanje problema s web stranicama

Saznajte kako koristiti ugrađene razvojne alate preglednika Chrome za poboljšanje svojih web stranica.

Pročitajte Dalje Povezane teme
  • Programiranje
  • JavaScript
  • HTML5
  • Razvoj igara
O autoru Jennifer Seaton(Objavljen 21 članak)

J. Seaton je znanstveni pisac specijaliziran za razbijanje složenih tema. Doktorirala je na Sveučilištu Saskatchewan; njezino se istraživanje usredotočilo na korištenje učenja zasnovanog na igrama za povećanje angažmana učenika na internetu. Kad ne radi, zateći ćete je kako čita, igra video igrice ili radi u vrtu.

Više od Jennifer Seaton

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu