Phaserin käytön aloittaminen pelikehityksessä

Phaser on kehys 2D-videopelien luomiseen. Se käyttää HTML5-kangasta pelin näyttämiseen ja JavaScriptiä pelin suorittamiseen. Phaserin käytön etuna vanilja JavaScriptiin verrattuna on, että sillä on laaja kirjasto, joka täydentää suurimman osan videopelien fysiikasta, jolloin voit keskittyä itse pelin suunnitteluun.

Phaser lyhentää kehitysaikaa ja helpottaa työnkulkua. Opitaan luomaan peruspeli Phaserilla.

Miksi kehittää Phaserin kanssa?

Phaser on samanlainen kuin muut visuaaliset ohjelmointikielet, koska ohjelma perustuu silmukkapäivityksiin. Phaserilla on kolme päävaihetta: esilataus, luominen ja päivittäminen.

Esilatauksessa pelin varat ladataan ja asetetaan pelin saataville.

Luo alustaa pelin ja kaikki alkavat pelielementit. Jokainen näistä toiminnoista suoritetaan kerran, kun peli aloitetaan.

Päivitys puolestaan ​​toimii silmukan läpi pelin. Työhevonen päivittää pelin elementit interaktiiviseksi.

Määritä järjestelmäsi kehittämään pelejä Phaserin avulla

Huolimatta siitä, että Phaser toimii HTML: llä ja JavaScriptillä, pelejä pelataan itse asiassa palvelinpuolella, ei asiakaspuolella. Tämä tarkoittaa, että sinun on suoritettava peli

paikallinen isäntä. Pelin palvelinpuolen suorittaminen antaa pelillesi mahdollisuuden käyttää muita tiedostoja ja resursseja ohjelman ulkopuolella. minä suosittelen XAMPP: n avulla paikallinen isäntä jos sinulla ei vielä ole yhtä asetusta.

Mikä on 127.0 0.1, Localhost tai Loopback-osoite?

Olet nähnyt "localhost" tietokoneellasi, mutta mikä se on? Mitä 127.0.0.1-osoite tarkoittaa? Oletko hakkeroitu?

Alla oleva koodi saa sinut toimimaan. Se luo peruspeliympäristön.

Suoritettavaksi peli vaatii PNG-kuvan nimeltä "gamePiece", joka on tallennettu paikallisen isännän "img" -kansioon. Yksinkertaisuuden vuoksi tässä esimerkissä käytetään 60xgame de60px oranssia neliötä. Pelisi pitäisi näyttää tältä:

Jos kohtaat ongelman, selvitä selaimesi virheenkorjaimella, mikä meni pieleen. Jopa yhden merkin puuttuminen voi aiheuttaa tuhoa, mutta yleensä virheenkorjaajasi havaitsee nuo pienet virheet.

Asennuskoodin selittäminen

Toistaiseksi peli ei tee mitään. Mutta olemme jo peittäneet paljon maata! Katsotaanpa koodia syvällisemmin.

Jotta Phaser-peli voidaan suorittaa, sinun on tuotava Phaser-kirjasto. Teemme tämän linjalla 3. Tässä esimerkissä linkitimme lähdekoodiin, mutta voit ladata sen paikalliseen palvelimeesi ja viitata myös tiedostoon.

Suuri osa koodista tähän mennessä määrittää peliympäristön, jonka muuttuja kokoonpano myymälöissä. Esimerkissämme olemme luomassa phaser-pelin, jossa on sininen (CCFFFF heksavärikoodina) tausta, joka on 600 x 600 kuvapistettä. Toistaiseksi pelifysiikka on asetettu pelihalli, mutta Phaser tarjoaa erilaista fysiikkaa.

Lopuksi, näkymä käskee ohjelman suorittamaan esilataus toiminto ennen pelin alkua ja luoda toiminto pelin aloittamiseksi. Kaikki nämä tiedot välitetään kutsutulle peliobjektille peli.

Liittyvät: 6 parasta kannettavaa tietokonetta ohjelmointiin ja koodaukseen

Seuraava koodiosa on paikka, jossa peli todella muotoutuu. Esilataustoiminto on paikka, jossa haluat alustaa kaiken, mitä tarvitset pelin suorittamiseen. Meidän tapauksessamme olemme esiladanneet pelikappaleen kuvan. Ensimmäinen parametri .kuva nimeää kuvamme ja toinen kertoo ohjelmalle, mistä kuva löytyy.

GamePiece-kuva lisättiin peliin luontitoiminnolla. Rivillä 29 sanotaan, että lisäämme kuvapeli GamePiece spriteinä 270px vasemmalle ja 450px alas pelialueemme vasemmasta yläkulmasta.

Pelikappaleen liikkuminen

Toistaiseksi tätä tuskin voidaan kutsua peliksi. Ensinnäkin emme voi siirtää pelikappalettamme. Jotta voimme muuttaa asioita pelissämme, meidän on lisättävä päivitystoiminto. Meidän on myös mukautettava kohtaus konfigurointimuuttujassa kertomaan pelille, mikä toiminto suoritetaan, kun päivitämme peliä.

Päivitystoiminnon lisääminen

Uusi kohtaus kokoonpanossa:

kohtaus: {
esilataus: esilataus,
luoda: luoda,
päivitys: päivitys
}

Lisää seuraavaksi päivitystoiminto luontitoiminnon alle:

funktion päivitys () {
}

Avaintulojen saaminen

Jotta pelaaja voi antaa pelin hallita nuolinäppäimillä, meidän on lisättävä muuttuja seuraamaan mitä näppäimiä pelaaja painaa. Ilmoita muuttuja nimeltä KeyInput alla, jossa ilmoitimme gamePieces. Kun ilmoitat sen, kaikki toiminnot pääsevät käyttämään uutta muuttujaa.

var peliPala;
var keyInput;

KeyInput-muuttuja tulisi alustaa, kun peli luodaan luontitoiminnossa.

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

Nyt päivitystoiminnossa voimme tarkistaa, painaako pelaaja nuolinäppäintä, ja jos ne ovat, siirrä pelikappalettamme vastaavasti. Alla olevassa esimerkissä pelinappulaa siirretään 2 kuvapistettä, mutta voit tehdä siitä suuremman tai pienemmän numeron. Kappaleen siirtäminen 1px kerrallaan tuntui hieman hitaalta.

funktion päivitys () {
if (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
if (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
if (keyInputs.up.isDown) {
gamePiece.y = peliPiece.y - 2;
}
if (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Peli on nyt liikuteltava! Mutta jotta voimme todella olla peli, tarvitsemme tavoitteen. Lisätään joitain esteitä. Esteiden karkottaminen oli perusta monille peleille 8-bittisessä aikakaudessa.

Esteiden lisääminen peliin

Tässä koodiesimerkissä käytetään kahta estettä, nimeltään este1 ja este 2. este1 on sininen neliö ja este2 on vihreä. Jokainen kuva on ladattava esiladattavaksi samalla tavalla kuin pelikappale.

funktion esilataus () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('este1', 'img / este1.png');
this.load.image ('este2', 'img / este2.png');
}

Sitten jokainen este-sprite on alustettava luomisfunktiossa, aivan kuten pelikappale.

funktio create () {
gamePiece = this.fysiikka.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
este1 = tämä.fysiikka.lisäosa (200, 0, 'este1');
este2 = tämä.fysiikka.lisäosa (0, 200, 'este2');
}

Esteiden liikkuminen

Jos haluat siirtää kappaleita tällä kertaa, emme halua käyttää soittimen syöttöä. Sen sijaan, annetaan yksi kappale siirtyä ylhäältä alas ja toinen liikkua vasemmalta oikealle. Voit tehdä tämän lisäämällä seuraavan koodin päivitystoimintoon:

este1.y = este1.y + 4;
jos (este1.y> 600) {
este1.y = 0;
este1.x = Phaser. Matematiikka. Välillä (0, 600);
}
este2.x = este2.x + 4;
jos (este2.x> 600) {
este2.x = 0;
este2.y = Phaser. Matematiikka. Välillä (0, 600);
}

Yllä oleva koodi siirtää esteen1 alas ruudulle ja esteen2 koko pelialueelle 4 kuvapistettä kutakin kehystä kohti. Kun neliö on pois ruudulta, se siirretään takaisin vastakkaiselle puolelle uudessa satunnaisessa paikassa. Tämä varmistaa, että pelaajalla on aina uusi este.

Törmäysten havaitseminen

Mutta emme ole vielä täysin valmiita. Olet ehkä huomannut, että pelaajamme kulkee esteiden läpi. Meidän on saatava peli havaitsemaan, kun pelaaja osuu esteeseen, ja lopetettava peli.

Phaser-fysiikkakirjastossa on törmäystunnistin. Ainoa mitä meidän on tehtävä, on alustaa se luomisfunktioon.

this.physics.add.collider (gamePiece, este1, toiminto (gamePiece, este1) {
gamePiece.destroy ();
este.hävitä ();
este2.hävitä ();
});
this.physics.add.collider (gamePiece, este2, toiminto (gamePiece, este2) {
gamePiece.destroy ();
este.hävitä ();
este2.hävitä ();
});

Törmäysmenetelmä vaatii kolme parametria. Kaksi ensimmäistä parametria tunnistavat törmäävät objektit. Joten yllä, meillä on kaksi törmäystä. Ensimmäinen havaitsee pelikappaleen törmäämisen esteen1 kanssa ja toinen törmäys etsii törmäyksiä pelikappaleen ja esteen2 välillä.

Kolmas parametri kertoo törmäykselle, mitä tehdä, kun se havaitsee törmäyksen. Tässä esimerkissä on funktio. Jos tapahtuu törmäys, kaikki pelielementit tuhoutuvat; tämä pysäyttää pelin. Nyt pelaaja siirtyy peliin, jos he osuvat esteeseen.

Kokeile pelikehitystä Phaserin kanssa

Tätä peliä voi parantaa ja tehdä monimutkaisemmaksi monella eri tavalla. Olemme luoneet vain yhden pelaajan, mutta toinen pelattava hahmo voitaisiin lisätä ja hallita "awsd" -ohjaimilla. Vastaavasti voit kokeilla lisäämällä lisää esteitä ja vaihtelemalla niiden liikkumisnopeutta.

Tämän johdannon avulla pääset alkuun, mutta opittavaa on paljon enemmän. Phaserissa on hienoa, että suuri osa pelifysiikasta tehdään sinulle. Se on hieno helppo tapa aloittaa 2D-pelien suunnittelu. Jatka tämän koodin rakentamista ja tarkenna peliäsi.

Jos törmäät virheisiin, selaimesi virheenkorjausohjelma on hyvä tapa löytää ongelma.

Kuinka käyttää Chrome DevTools -sovellusta verkkosivusto-ongelmien vianmääritykseen

Opi käyttämään Chrome-selaimen sisäänrakennettuja kehitystyökaluja verkkosivustojesi parantamiseen.

Kirjailijasta