Uvod v Phaser za razvoj iger

Phaser je okvir za ustvarjanje 2D video iger. Za prikaz igre uporablja HTML5 Canvas, za zagon pa JavaScript. Prednost uporabe Phaserja nad vanilijevim JavaScriptom je v tem, da ima obsežno knjižnico, ki zaključuje večino fizike video iger, kar vam omogoča, da se osredotočite na samo oblikovanje igre.

Phaser skrajša čas razvoja in olajša potek dela. Naučimo se, kako ustvariti osnovno igro s Phaserjem.

Zakaj razvijati s Phaserjem?

Phaser je podoben drugim vizualnim programskim jezikom, saj program temelji na zankastih posodobitvah. Phaser ima tri glavne faze: prednalaganje, ustvarjanje in posodobitev.

V prednalaganju se sredstva igre naložijo in dajo na voljo igri.

Ustvari inicializira igro in vse začetne elemente igre. Vsaka od teh funkcij se zažene enkrat, ko se igra začne.

Update pa teče v zanki skozi celotno igro. Delovni konj je tisti, ki posodablja elemente igre, da postane interaktivna.

Nastavite svoj sistem za razvoj iger s Phaserjem

Kljub temu, da Phaser deluje na HTML in JavaScript, se igre dejansko izvajajo na strani strežnika in ne na strani odjemalca. To pomeni, da boste morali svojo igro nadaljevati

vaš lokalni gostitelj. Zagon igre na strani strežnika omogoča vaši igri dostop do dodatnih datotek in sredstev zunaj programa. priporočam z uporabo XAMPP za nastavitev lokalnega gostitelja če še nimate ene nastavitve.

Kaj je 127,0 0,1, Localhost ali Loopback Address?

V računalniku ste videli "localhost", a kaj je to? Kaj pomeni naslov 127.0.0.1? Ste bili vdrli?

Spodnja koda vas bo pripravila in zagnala. Vzpostavlja osnovno igralno okolje.

Za zagon igre bo potrebna slika PNG, imenovana "gamePiece", shranjena v mapo "img" na vašem lokalnem gostitelju. Zaradi enostavnosti ta primer uporablja oranžni kvadrat 60xgame de60px. Vaša igra bi morala izgledati nekako takole:

Če naletite na težavo, z razhroščevalnikom brskalnika ugotovite, kaj je šlo narobe. Manjkajoči celo en znak lahko povzroči opustošenje, toda napak bo vaš razhroščevalnik odkril te majhne napake.

Pojasnilo namestitvene kode

Zaenkrat igra ne naredi ničesar. Toda že smo pokrili veliko tal! Poglejmo kodo bolj poglobljeno.

Za zagon igre Phaser morate uvoziti knjižnico Phaser. To naredimo v vrstici 3. V tem primeru smo povezali izvorno kodo, vendar jo lahko prenesete na svoj lokalni gostitelj in se tudi sklicujete na datoteko.

Veliko kode do zdaj konfigurira igralno okolje, ki je spremenljivka konfig trgovine. V našem primeru nastavljamo fazersko igro z modrim (CCFFFF v šestnajstiški barvni kodi) ozadjem, ki je 600 x 600 slikovnih pik. Za zdaj je fizika igre nastavljena na arkadna, vendar Phaser ponuja drugačno fiziko.

Končno, prizor pove programu, naj zažene prednapetost pred začetkom igre in ustvariti funkcijo za zagon igre. Vse te informacije se posredujejo predmetu igre, ki se imenuje igra.

Sorodno: 6 najboljših prenosnikov za programiranje in kodiranje

Naslednji odsek kode je, kjer se igra resnično oblikuje. Funkcija vnaprejšnjega nalaganja je mesto, kjer želite inicializirati vse, kar potrebujete za zagon igre. V našem primeru smo predhodno naložili podobo našega igralnega dela. Prvi parameter .slika poimenuje našo sliko, druga pa programu pove, kje najti sliko.

Slika gamePiece je bila dodana igri v funkciji ustvarjanja. V vrstici 29 piše, da dodajamo sliko gamePiece kot sprite 270px levo in 450px navzdol od zgornjega levega kota našega igralnega območja.

Premikanje naše igre

Zaenkrat temu težko rečemo igra. Najprej ne moremo premakniti svoje igre. Da bomo lahko kaj spremenili v naši igri, bomo morali dodati funkcijo posodabljanja. Prav tako bomo morali prilagoditi sceno v spremenljivki config, da bomo igri povedali, katero funkcijo naj zažene, ko posodobimo igro.

Dodajanje funkcije posodobitve

Nova scena v config:

scena: {
prednapetost: prednapetost,
ustvariti: ustvariti,
posodobitev: posodobitev
}

Nato dodajte funkcijo posodobitve pod funkcijo ustvarjanja:

posodobitev funkcije () {
}

Pridobivanje ključnih vnosov

Če želimo igralcu omogočiti nadzor nad igralnim delom s puščičnimi tipkami, bomo morali dodati spremenljivko, s katero bomo spremljali, katere tipke igralec pritiska. Spremenljivko, imenovano keyInputs, prijavite spodaj, kjer smo razglasili gamePieces. Če jo prijavite, bodo vse funkcije omogočile dostop do nove spremenljivke.

var gamePiece;
var keyInputs;

Spremenljivko keyInput je treba inicializirati, ko je igra ustvarjena v funkciji create.

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

Zdaj v funkciji posodabljanja lahko preverimo, ali predvajalnik pritiska puščično tipko, in če je, ustrezno premaknemo naš igro. V spodnjem primeru je igralni del premaknjen za 2 slikovnih pik, vendar ga lahko nastavite za večje ali manjše število. Premikanje dela za 1 slikovno piko naenkrat se je zdelo nekoliko počasno.

posodobitev 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 ima zdaj premičen značaj! Da pa bi bili resnično igra, potrebujemo cilj. Dodajmo še nekaj ovir. Izmikanje oviram je bilo osnova za veliko iger v 8-bitni dobi.

Dodajanje ovir v igro

Ta primer kode uporablja dve prepreki, imenovani ovira1 in ovira 2. ovira1 je modri kvadrat, ovira2 pa zelena. Vsako sliko bo treba predhodno naložiti, tako kot sprite igralne igre.

prednalaganje funkcije () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('ovira1', 'img / ovira1.png');
this.load.image ('ovira2', 'img / ovira2.png');
}

Potem bo treba vsak sprite ovir inicializirati v funkciji ustvarjanja, tako kot igralec.

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

Premikanje ovir

Za premikanje kosov tokrat ne želimo uporabiti vnosa predvajalnika. Namesto tega naj se en kos premakne od zgoraj navzdol, drugi pa od leve proti desni. Če želite to narediti, v funkcijo posodobitve dodajte naslednjo kodo:

ovira1.y = ovira1.y + 4;
če (ovira1.y> 600) {
ovira1.y = 0;
ovira1.x = Phaser. Matematika. Med (0, 600);
}
ovira2.x = ovira2.x + 4;
če (ovira2.x> 600) {
ovira2.x = 0;
ovira2.y = Phaser. Matematika. Med (0, 600);
}

Zgornja koda bo premaknila oviro1 po zaslonu in oviro2 po igralnem območju 4px v vsakem okvirju. Ko je kvadrat zunaj zaslona, ​​se premakne nazaj na nasprotno stran na novem naključnem mestu. To bo zagotovilo, da bo igralcu vedno na voljo nova ovira.

Odkrivanje trkov

Toda še nismo končali. Morda ste opazili, da lahko naš igralec gre skozi ovire. Igro moramo zaznati, ko igralec zadene oviro, in igro končati.

Fizična knjižnica Phaser ima detektor trkov. Vse, kar moramo storiti, je, da ga inicializiramo v funkciji create.

this.physics.add.collider (gamePiece, ovira1, funkcija (gamePiece, ovira1) {
gamePiece.destroy ();
ovira.destroy ();
ovira2.destroy ();
});
this.physics.add.collider (gamePiece, ovira2, funkcija (gamePiece, ovira2) {
gamePiece.destroy ();
ovira.destroy ();
ovira2.destroy ();
});

Metoda trčenja zahteva tri parametre. Prva dva parametra določita, kateri predmeti trčijo. Torej zgoraj imamo postavljena dva trkalnika. Prvi zazna, ko igralec trči z oviro1, drugi trkalnik pa išče trke med igranjem in oviro2.

Tretji parameter pove trkalniku, kaj storiti, ko zazna trk. V tem primeru je funkcija. Če pride do trka, se uničijo vsi elementi igre; to ustavi igro. Zdaj bo igralec igral, če bo zadel oviro.

Poskusite razvoj iger s Phaserjem

Obstaja veliko različnih načinov, kako lahko to igro izboljšate in jo naredite bolj zapleteno. Ustvarili smo samo enega igralca, lahko pa dodamo drugega igralnega lika in ga nadzorujemo s kontrolniki "awsd". Podobno lahko poskusite z dodajanjem več ovir in spreminjanjem hitrosti njihovega gibanja.

Ta uvod vas bo začel, vendar se je treba naučiti še veliko. Odlična stvar Phaserja je, da je veliko fizike iger narejeno za vas. To je odličen enostaven način za začetek oblikovanja 2D iger. Nadaljujte z gradnjo na tej kodi in izboljšajte svojo igro.

Če naletite na napake, je razhroščevalnik brskalnika odličen način za odkrivanje težave.

Kako uporabljati Chrome DevTools za odpravljanje težav s spletnimi mesti

Naučite se, kako z vgrajenimi razvojnimi orodji brskalnika Chrome izboljšate svoja spletna mesta.

O avtorju