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 upotrebe Phasera u odnosu na vanilin JavaScript je u tome što ima opsežnu biblioteku koja dovršava velik dio fizike videoigara, što vam omogućuje da se usredotočite na dizajniranje same igre.

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

Zašto se razvijati s Phaserom?

Phaser je sličan ostalim vizualnim programskim jezicima jer se program temelji na petljastim ažuriranjima. Phaser ima tri glavne faze: prethodno učitavanje, stvaranje i ažuriranje.

U prethodnom učitavanju, imovina igre prenosi se i stavlja na raspolaganje igri.

Create inicijalizira igru ​​i sve početne elemente igre. Svaka od tih funkcija pokreće se jednom kada je igra pokrenuta.

Ažuriranje se, pak, odvija u petlji tijekom cijele igre. Konj za rad je taj koji ažurira elemente igre kako bi postala interaktivna.

Postavite svoj sustav za razvoj igara s Phaserom

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

Što je 127,0 0,1, Localhost ili Loopback adresa?

Vidjeli ste "localhost" na svom računalu, ali što je to? Što znači adresa 127.0.0.1? Jesu li vas hakirali?

Kôd u nastavku će vas pokrenuti. Postavlja osnovno okruženje za igru.

Da bi se pokrenula, igra će trebati PNG sliku pod nazivom "gamePiece" spremljenu u "img" mapu na vašem lokalnom hostu. Radi jednostavnosti, ovaj primjer koristi narančasti kvadrat od 60xgame de60px. Vaša bi igra trebala izgledati otprilike ovako:

Ako naiđete na problem, upotrijebite program za ispravljanje pogrešaka preglednika da biste utvrdili što je pošlo po zlu. Nedostatak čak i jednog znaka može uzrokovati pustoš, ali općenito će vaš program za ispravljanje pogrešaka uhvatiti te male pogreške.

Objašnjenje koda za postavljanje

Zasad igra ne poduzima ništa. Ali već smo pokrili puno tla! Pogledajmo kod dublje.

Da bi se igra Phaser pokrenula, trebate uvesti biblioteku Phaser. To radimo na liniji 3. U ovom smo se primjeru povezali s izvornim kodom, ali možete ga preuzeti na svoj lokalni host i također uputiti datoteku.

Većina dosadašnjeg koda konfigurira okruženje igre, što je varijabla konfiguracija 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 postavljena fizika igre arkada, ali Phaser nudi drugačiju fiziku.

Konačno, scena govori programu da pokrene predopterećenje prije početka igre i stvoriti funkcija za pokretanje igre. Sve se ove informacije prosljeđuju objektima igre pod nazivom igra.

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

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

Slika gamePiece dodana je u igru ​​u funkciji stvaranja. Redak 29 kaže da dodajemo imidž gamePiece kao sprite 270px lijevo i 450px dolje iz gornjeg lijevog kuta našeg područja igre.

Pokretanje naše igre

Zasad se ovo teško može nazvati igrom. Kao prvo, ne možemo premjestiti naš dio 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 kad ažuriramo igru.

Dodavanje funkcije ažuriranja

Nova scena u konfiguraciji:

scena: {
preload: preload,
stvoriti: stvoriti,
update: ažurirati
}

Zatim dodajte funkciju ažuriranja ispod funkcije stvaranja:

ažuriranje funkcije () {
}

Dobivanje ključnih unosa

Da bismo igraču omogućili da igraćim dijelom kontrolira tipke sa strelicama, morat ćemo dodati varijablu kako bismo pratili koje tipke igrač pritiska. Proglasite varijablu koja se naziva keyInputs ispod gdje smo proglasili gamePieces. Ako ga tamo objave, omogućit će svim funkcijama pristup novoj varijabli.

var gamePiece;
var keyInputs;

Varijabla keyInput trebala bi se inicijalizirati kada se igra kreira u funkciji kreiranja.

funkcija 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 i ako jesu, prema tome premjestiti naš dio igre. U donjem primjeru igraći komad premješten je za 2 piksela, ali to možete učiniti većim ili manjim brojem. Premještanje komada po 1 px činilo se pomalo sporim.

ažuriranje funkcije () {
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 je sada pokretnog karaktera! Ali da bismo uistinu bili igra, potreban nam je cilj. Dodajmo neke prepreke. Izmicanje preprekama bilo je osnova za mnoge igre u 8-bitnoj eri.

Dodavanje prepreka igri

Ovaj primjer koda koristi dva sprita za prepreke koji se nazivaju prepreka1 i prepreka 2. prepreka1 je plavi kvadrat, a prepreka2 je zelena. Svaka će slika trebati biti unaprijed učitana baš poput spriteta igre.

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

Tada će svaki sprit s preprekama trebati inicijalizirati u funkciji kreiranja, baš kao i igrački komad.

funkcija create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
prepreka1 = this.physics.add.sprite (200, 0, 'prepreka1');
prepreka2 = this.physics.add.sprite (0, 200, 'prepreka2');
}

Pokretanje prepreka

Da bismo ovaj put premjestili dijelove, ne želimo koristiti unos igrača. Umjesto toga, neka se jedan komad pomakne od vrha prema dnu, a drugi se pomakne slijeva udesno. Da biste to učinili, dodajte sljedeći kôd u funkciju ažuriranja:

prepreka1.y = prepreka1.y + 4;
ako (prepreka1.y> 600) {
prepreka1.y = 0;
prepreka1.x = Phaser. Matematika. Između (0, 600);
}
prepreka2.x = prepreka2.x + 4;
ako (prepreka2.x> 600) {
prepreka2.x = 0;
prepreka2.y = Phaser. Matematika. Između (0, 600);
}

Gornji kod će premjestiti prepreku1 niz zaslon i prepreku2 preko područja igre 4px svaki kadar. Jednom kad se kvadrat isključi s ekrana, vraća se na suprotnu stranu na novom slučajnom mjestu. To će osigurati da uvijek postoji nova prepreka za igrača.

Otkrivanje sudara

Ali još nismo sasvim gotovi. Možda ste primijetili da naš igrač može proći ravno kroz prepreke. Moramo učiniti da igra otkrije kada igrač udari u prepreku i prekine igru.

Fizička knjižnica Phaser ima detektor sudarača. Sve što trebamo je inicijalizirati u funkciji create.

this.physics.add.collider (gamePiece, prepreka1, funkcija (gamePiece, prepreka1) {
gamePiece.destroy ();
prepreka.destroy ();
prepreka2.destroy ();
});
this.physics.add.collider (gamePiece, prepreka2, funkcija (gamePiece, prepreka2) {
gamePiece.destroy ();
prepreka.destroy ();
prepreka2.destroy ();
});

Metoda sudarača zahtijeva tri parametra. Prva dva parametra identificiraju koji se objekti sudaraju. Dakle, gore imamo postavljena dva sudarača. Prvi otkriva sudar gamepiecea s preprekom1, a drugi sudarač traži sudare između gamepiecea i prepreke2.

Treći parametar govori sudaraču što treba učiniti nakon što otkrije sudar. U ovom primjeru postoji funkcija. Ako dođe do sudara, svi elementi igre uništavaju se; ovo zaustavlja igru. Sada će igrač preskočiti ako udari u 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 mogao bi se dodati i kontrolirati pomoću "awsd" kontrola. Slično tome, mogli biste eksperimentirati s dodavanjem dodatnih prepreka i mijenjanjem brzine njihova kretanja.

Ovaj će vas uvod započeti, ali još je mnogo toga za naučiti. Sjajna stvar kod Phasera je što se puno fizike igre radi za vas. To je sjajan jednostavan način za početak dizajniranja 2D igara. Nastavite nadograđivati ​​ovaj kôd i usavršite svoju igru.

Ako naiđete na pogreške, program za pronalaženje pogrešaka u pregledniku izvrstan je način za otkrivanje problema.

Kako koristiti Chrome DevTools za rješavanje problema s web stranicama

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

O autoru