Sadržaj
Dolazak HTML5 Promijenio je način na koji gledamo web, ne samo da nam je dao bolje alate za njihov razvoj, već nam je i otvorio mogućnosti za razvoj aplikacija koje idu dalje, kao u slučaju video igara.Prednost izrade video igre u HTML5 to je da je kompatibilan s gotovo svim uređajima koji imaju preglednik i što je još bolje bez preuzimanja ili dodatnih instalacija.
Zahvaljujući ovoj novoj popularnosti, okviri za razvoj video igara su se proširili, svaki sa svojim karakteristikama i prednostima, ovaj put ćemo se koncentrirati na Phaser, razloga je nekoliko i možemo ih vidjeti na sljedećem popisu:
- Ima veliku zajednicu i aktivan je.
- Povremeno se ažurira.
- Besplatno je korištenje.
- Ima fizičke alate koji nam olakšavaju život.
1- Potreban nam je pristup internetu kako bismo mogli preuzeti sve resurse koji nastanu tijekom instalacije okvira, uključujući i ovaj.
2- Morali smo instalirati ili moći instalirati web poslužitelj u stilu SVJETILJKA ili WAMP ili KARTA ovisno o našem operativnom sustavu, to je zato što Phaser koristi HTML5 I također JavaScript Stoga, zbog sigurnosnih mjera, naš preglednik neće prihvatiti lokalna izvršenja.
3- Potrebna su nam dopuštenja za pristup potrebnim mapama i uslugama koje su postavljene tijekom instalacije okvira.
4- Trebamo preglednik kompatibilan sa HTML5 te da ima alate za ispravljanje pogrešaka, u slučaju ovog vodiča koristit ćemo se Firefox Developer Edition u svojoj najnovijoj inačici u ovom trenutku, međutim, mogu slobodno izabrati onu koja im se čini najboljom.
5- Konačno, potreban nam je uređivač teksta da bismo mogli napisati kôd za primjere, jer uvijek može biti sve što imamo, iako preporučujemo Uzvišen tekst o NotePad ++ zbog velikog broja dodataka koji oboje imaju koji nam olakšavaju život kao programerima.
Prvo što ćemo učiniti kako bismo mogli instalirati Phaser je da odete na njegovu službenu web stranicu i ovdje ćemo pronaći nekoliko resursa, međutim za sada ćemo otići na odjeljak koji kaže preuzimanje datoteka:
POVEĆAJTE
docs / index.htmlOvdje imamo unos u izvanmrežnu i službenu dokumentaciju verzije koju smo upravo preuzeli, može nam pomoći da pregledamo neke detalje, iako ćemo, ako imamo mogućnost odlaska na internet i dokumentiranja, uvijek imati bolje mogućnosti.
build / phaser.min.jsOvo je naš okvir kao takav, to je minificirana i komprimirana knjižnica koja sadrži sve alate koji će nam biti potrebni za pokretanje naših prvih projekata.
Budući da smo preuzeli projekt, da bismo provjerili je li sve ispravno, jednostavno moramo kopirati raspakiranu mapu u koju joj možemo pristupiti s našim web poslužiteljem, općenito je to direktorij www ili public_html, sve doista ovisi o našem okruženju.
Kad stignemo tamo, moramo otići u naš preglednik i pokrenuti svoj localhost / phaser ili naziv koji smo postavili i vidjet ćemo popis datoteka, ovdje moramo otići do sljedeće mape: resursi / vodiči / 01 Početak rada / hellophaser / index.html i možemo cijeniti ono što vidimo na sljedećoj snimci zaslona:
POVEĆAJTE
U mapi u kojoj imamo okvir na našem web poslužitelju stvorit ćemo novu mapu, u ovom slučaju ćemo je nazvati phaser-primjer, unutra ćemo postaviti datoteku phaser.min.js u korijenu toga stvorit ćemo datoteku pod nazivom index.html i druga datoteka pod nazivom main.js, moramo postaviti i sliku tzv logo.png.webp koji će biti sprajt koji ćemo prikazati, a koji se može naći u resursima okvira, a to može biti preporučena veličina 180 x 64 piksela. Na kraju bi naš imenik trebao izgledati ovako:
Naša prva igra na PhaseruTo će biti temelj na kojem će naša igra biti podržana kako bi korisnik mogao vidjeti sadržaj. Sljedeći korak u izgradnji naše prve igre je pisanje koda za main.js, koji će obraditi svu logiku naše igre i sadrži tri ključne metode, da vidimo:Naša prva igra =)
prednaprezanjeOva metoda je odgovorna za unaprijed učitavanje svih resursa koji su potrebni našoj igri, bilo da se radi o slikama, zvuku, video zapisima itd. Uvijek se pokreće pri pokretanju.
stvoritiOva metoda se izvodi nakon što je završila prednaprezanje a njegova je funkcija uključiti učitane resurse u našu igru, osim što nam daje mogućnost uspostavljanja početnog postavljanja iste.
AžurirajKonačno, ova metoda radi 60 puta u sekundi i sadrži pravu logiku naše igre, to nam daje pokret, da tako kažemo.
Kao što vidimo, svaka od ovih metoda zadužena je za stanje igre, prve dvije su prije početka igre, dok Ažuriraj nastaje tijekom izvođenja. Nakon što definiramo što svaka metoda radi, samo moramo vidjeti kôd koji nam je potreban:
var mainState = {preload: function () {// Učitavamo sliku game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Pokazujemo našu sliku u igri this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// mijenjamo kut za jednu jedinicu 60 puta u sekundi // to će nam dati učinak rotacije slike this.sprite.angle + = 1; }}; // ovdje započinjemo našu igru i postavljamo je // da koristimo div gameDiv koji smo stavili u našu HTMLvar igru = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('glavni');Kao što možemo vidjeti na kraju metoda stvaramo varijablu tzv igra i u ovom izvršavamo instancu Phaser.Igra gdje prosljeđujemo neke parametre, trenutno nije potrebno znati mnogo o njima, jednostavno ih kopiramo onako kako ih vidimo. Ali otprilike ovo je dio u kojem kažemo našoj aplikaciji da traži Phaser tako da vam govori što učiniti s metodama koje smo stvorili gore i na kraju s game.state.start tu kažemo okviru da započne našu igru.Sada, ako je sve prošlo dobro, mi ćemo pokrenuti naš projekt u pregledniku i trebali bismo vidjeti da se odabrana slika rotira na ekranu:
Ovim smo završili ovaj vodič, uspješno smo ga instalirali Phaser, znali smo neke od početnih karakteristika ovog sjajnog okvira i s tim smo stvorili malu aplikaciju ili igru. Važno je uzeti ovaj vodič kao polazište za malo dublje istraživanje Phaser, budući da ovo nije ni 1% svega što nam nudi, međutim to je prvi korak koji nas često košta poduzeti.
