Phaserin pelien kehittämisen aloittaminen

Phaserin pelien kehittämisen aloittaminen

Phaser on kehys 2D -videopelien luomiseen. Se käyttää HTML5 -kangasta pelin näyttämiseen ja JavaScriptiä pelin suorittamiseen. Phaserin käytön etu vanilja -JavaScriptin sijaan on se, että sillä on laaja kirjasto, joka täydentää suuren osan videopelien fysiikasta, joten voit keskittyä pelin suunnitteluun.





Phaser vähentää kehitysaikaa ja helpottaa työnkulkua. Opetellaan luomaan peruspeli Phaserilla.



Miksi kehittää Phaserilla?

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





Esilatauksessa pelin resurssit ladataan ja asetetaan pelin saataville.

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



Päivitys sitä vastoin kulkee koko pelin ajan. Työhevonen päivittää pelin elementit interaktiiviseksi.

Järjestelmän luominen pelien kehittämiseen Phaserilla

Huolimatta siitä, että Phaser toimii HTML: llä ja JavaScriptillä, pelit toimivat itse asiassa palvelinpuolella, ei asiakaspuolella. Tämä tarkoittaa, että sinun on suoritettava peli paikallinen isäntäsi . Pelin suorittaminen palvelinpuolella antaa pelillesi mahdollisuuden käyttää muita tiedostoja ja sisältöä ohjelman ulkopuolella. minä suosittelen XAMPP: n avulla paikallisen isännän määrittämiseen jos sinulla ei ole jo yhtä asetusta.



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







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


Peli vaatii toimiakseen 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ä. Pelin pitäisi näyttää tältä:



Jos kohtaat ongelman, selvitä selaimen vianmääritysohjelman avulla, mikä meni pieleen. Jopa yhden merkin puuttuminen voi aiheuttaa tuhoa, mutta yleensä virheenkorjaaja löytää ne pienet virheet.

Asennuskoodin selittäminen

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

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

kuinka vaihtaa reititin uuteen

Suuri osa koodista toistaiseksi määrittää peliympäristön, jonka muuttuja config myymälöissä. Esimerkissämme asennamme vaiheittaisen pelin, jonka tausta on sininen (CCFFFF heksadesimaalikoodilla) ja jonka koko on 600 x 600 kuvapistettä. Toistaiseksi pelifysiikka on asetettu Arkadialainen , mutta Phaser tarjoaa erilaista fysiikkaa.

Lopuksi, näkymä kehottaa ohjelmaa suorittamaan esijännitys toiminto ennen pelin alkua ja luoda toiminto pelin käynnistämiseksi. Kaikki nämä tiedot välitetään peliobjektille nimeltä peli .

Aiheeseen liittyviä: 6 parasta kannettavaa tietokonetta ohjelmointiin ja koodaukseen

Koodin seuraava osa on paikka, jossa peli todella muodostuu. Esilataustoiminto on paikka, jossa haluat alustaa kaiken, mitä tarvitset pelin suorittamiseen. Meidän tapauksessamme olemme ladanneet pelikappaleemme kuvan. Ensimmäinen parametri .kuva nimeää kuvan ja toinen kertoo ohjelmalle, mistä kuva löytyy.

GamePiece -kuva lisättiin peliin luontitoiminnossa. Rivillä 29 kerrotaan, että lisäämme gamePiece -sprinttiä 270 kuvapisteen vasemmalle ja 450 kuvapistettä alas pelialueemme vasemmasta yläkulmasta.

Saamme pelikappaleemme liikkumaan

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

Päivitystoiminnon lisääminen

Uusi kohtaus kokoonpanossa:

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

Lisää seuraavaksi päivitystoiminto luontitoiminnon alle:

kuinka pelata xbox 360 -pelejä tietokoneella Windows 7
function update(){
}

Avaintulojen hakeminen

Jotta pelaaja voi ohjata peliä nuolinäppäimillä, meidän on lisättävä muuttuja seurataksesi mitä näppäimiä pelaaja painaa. Ilmoita muuttuja nimeltä keyInputs alla, missä julistimme gamePieces. Kun ilmoitat sen siellä, kaikki toiminnot voivat käyttää uutta muuttujaa.

var gamePiece;
var keyInputs;

KeyInput -muuttuja tulee alustaa, kun peli luodaan luontitoiminnossa.

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

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

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

Pelissä on nyt liikuttava luonne! Mutta jotta voimme todella olla peli, tarvitsemme tavoitteen. Lisätään muutama este. Esteiden torjunta oli monien 8-bittisen aikakauden pelien perusta.

Esteen lisääminen peliin

Tässä koodiesimerkissä käytetään kahta este -spriittiä nimeltä este1 ja este 2. este1 on sininen neliö ja este2 on vihreä. Jokainen kuva on esiladattava aivan kuten pelikappale.

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

Sitten jokainen este sprite on alustettava luontitoiminnossa aivan kuten pelikappale.

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

Esteiden liikkuminen

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

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

Yllä oleva koodi siirtää esteen1 ruudulla alaspäin ja esteen2 pelialueella 4 pikseliä jokaisen kehyksen yli. Kun neliö on pois näytöstä, se siirretään takaisin vastakkaiselle puolelle uudessa satunnaisessa paikassa. Näin varmistetaan, että pelaajalle tulee aina uusi este.

Törmäysten havaitseminen

Mutta emme ole vielä valmiita. Olet ehkä huomannut, että pelaajamme voi kulkea esteiden läpi. Meidän on saatava peli havaitsemaan, milloin pelaaja osuu esteeseen ja lopetettava peli.

Phaserin fysiikkakirjastossa on törmäysilmaisin. Meidän tarvitsee vain alustaa se luontitoiminnossa.

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

Törmäysmenetelmä vaatii kolme parametria. Kaksi ensimmäistä parametria tunnistavat kohteet, jotka törmäävät. Joten yllä on kaksi törmäyspistettä. Ensimmäinen havaitsee, kun pelikappale törmää esteeseen1, ja toinen törmäyslaite etsii törmäyksiä pelikappaleen ja esteen2 välillä.

Kolmas parametri kertoo törmäilijälle, mitä tehdä, kun se havaitsee törmäyksen. Tässä esimerkissä on toiminto. Jos törmäys tapahtuu, kaikki pelielementit tuhoutuvat; tämä pysäyttää pelin. Nyt pelaaja pelaa, jos törmää esteeseen.

Kokeile pelikehitystä Phaserilla

Tätä peliä voidaan parantaa ja tehdä monimutkaisemmaksi monella eri tavalla. Olemme luoneet vain yhden pelaajan, mutta toinen pelattava hahmo voidaan lisätä ja ohjata awsd -säätimillä. Samoin voit kokeilla lisäämällä esteitä ja muuttamalla niiden liikenopeutta.

Paras ilmainen pelata pc -pelejä 2017

Tällä johdannolla pääset alkuun, mutta vielä on paljon opittavaa. Phaserin hieno asia on, että paljon pelifysiikkaa tehdään puolestasi. Se on loistava helppo tapa aloittaa 2D -pelien suunnittelu. Jatka tämän koodin rakentamista ja paranna peliäsi.

Jos kohtaat virheitä, selaimen virheenkorjaaja on hyvä tapa löytää ongelma.

Jaa Jaa Tweet Sähköposti Chrome DevToolsin käyttäminen verkkosivustoon liittyvien ongelmien vianmäärityksessä

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

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • JavaScript
  • HTML5
  • Pelikehitys
Kirjailijasta Jennifer Seaton(21 artikkelia julkaistu)

J. Seaton on tiedekirjoittaja, joka on erikoistunut monimutkaisten aiheiden jakamiseen. Hänellä on tohtori Saskatchewanin yliopistosta; hänen tutkimuksensa keskittyi pelipohjaisen oppimisen hyödyntämiseen opiskelijoiden sitoutumisen lisäämiseksi verkossa. Kun hän ei työskentele, löydät hänet lukemisen, videopelien tai puutarhanhoidon kanssa.

Lisää Jennifer Seatonilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi