Začnite s Phaserjem za razvoj iger

Začnite s Phaserjem za razvoj iger

Phaser je okvir za ustvarjanje 2D video iger. Uporablja HTML5 Canvas za prikaz igre in JavaScript za izvajanje igre. Prednost uporabe Phaserja pred vanilijevim JavaScriptom je, da ima obsežno knjižnico, ki dopolnjuje večino fizike video iger in vam omogoča, da se osredotočite na oblikovanje same igre.





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



Zakaj se razvijati s Phaserjem?

Phaser je podoben drugim vizualnim programskim jezikom, saj program temelji na petljastih posodobitvah. Phaser ima tri glavne stopnje: prednalaganje, ustvarjanje in posodabljanje.





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

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



Posodobitev pa teče skozi igro skozi igro. Delovni konj 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, ne na strani odjemalca. To pomeni, da boste morali igro zagnati naprej vašega lokalnega gostitelja . Izvajanje na strani strežnika igre 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.



Spodnja koda vas bo zagotovila. Vzpostavlja osnovno igralno okolje.







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


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



Če naletite na težavo, s pomočjo iskalnika napak v brskalniku ugotovite, kaj je šlo narobe. Pomanjkanje enega samega znaka lahko povzroči opustošenje, na splošno pa bo vaš razhroščevalnik odkril te majhne napake.

Pojasnilo nastavitvene kode

Doslej igra ne naredi ničesar. Smo pa že pokrili veliko tal! Poglejmo kodo bolj poglobljeno.

Če želite zagnati igro Phaser, morate uvoziti knjižnico Phaser. To naredimo v vrstici 3. V tem primeru smo se povezali z izvorno kodo, vendar jo lahko prenesete na svoj localhost in se sklicujete tudi na datoteko.

kako ponastaviti windows 10 iz zagona

Večina dosedanje kode konfigurira igralno okolje, ki je spremenljivka config trgovine. V našem primeru postavljamo fazersko igro z modrim ozadjem (CCFFFF v šestnajsti barvni kodi), ki je 600 x 600 slikovnih pik. Za zdaj je fizika igre nastavljena na Arkadijski , vendar Phaser ponuja drugačno fiziko.

Končno, prizor pove programu, da zažene prednapetost funkcijo pred začetkom igre in ustvarite funkcijo za začetek igre. Vse te informacije se posredujejo igralnemu objektu, imenovanemu igro .

Povezano: 6 najboljših prenosnih računalnikov za programiranje in kodiranje

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

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

Kako premakniti naš kos igre

Doslej tega komaj lahko imenujemo igra. Prvič, ne moremo premakniti svojega dela igre. Če želimo spremeniti stvari v naši igri, bomo morali dodati funkcijo posodobitve. Prav tako moramo prilagoditi prizor v spremenljivki config, da igri povemo, katero funkcijo naj zažene, ko igro posodobimo.

Dodajanje funkcije posodobitve

Nova scena v konfiguraciji:

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

Nato pod funkcijo ustvarjanja dodajte funkcijo posodobitve:

poiščite geslo za wifi na androidu
function update(){
}

Pridobivanje ključnih vnosov

Če želite igralcu omogočiti, da s puščičnimi tipkami nadzoruje del igre, bomo morali dodati spremenljivko, ki bo spremljala, katere tipke igralec pritiska. Spodaj razglasite spremenljivko, imenovano keyInputs, kjer smo razglasili gamePieces. Če to označite, bodo vse funkcije imele dostop do nove spremenljivke.

var gamePiece;
var keyInputs;

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

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

Zdaj v funkciji posodobitve lahko preverimo, ali igralec pritisne puščično tipko, in če je tako, ustrezno premaknemo naš del igre. V spodnjem primeru se igralni kos premakne za 2 slikovne pike, vendar ga lahko povečate ali zmanjšate. Premikanje kosa 1px naenkrat se mi je zdelo nekoliko počasno.

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

Igra ima zdaj premični značaj! Toda, da bi bili resnično igra, potrebujemo cilj. Dodajmo še nekaj ovir. Izogibanje oviram je bilo osnova za številne igre v 8-bitni dobi.

Dodajanje ovir igri

V tem primeru kode sta uporabljena dva praga ovir, imenovana ovira1 in ovira 2. ovira1 je modri kvadrat in ovira2 je zelena. Vsaka slika bo morala biti vnaprej naložena, tako kot spite igralnega kosa.

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

Nato bo treba v funkciji ustvarjanja, tako kot igralnega koda, inicializirati vsak sprite ovire.

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

Odstranitev ovir

Za premik 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:

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

Zgornja koda bo premaknila oviro1 navzdol po zaslonu in oviro2 čez območje igre 4 px za vsak okvir. Ko je kvadrat izven zaslona, ​​se premakne nazaj na nasprotno stran na novo naključno mesto. To bo zagotovilo, da bo za igralca vedno nova ovira.

Odkrivanje trkov

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

Knjižnica fizike Phaser ima detektor trkov. Vse kar moramo storiti je, da ga inicializiramo v funkciji create.

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

Metoda trkalnika zahteva tri parametre. Prva dva parametra določata, kateri predmeti trčita. Torej, zgoraj imamo nastavljena dva trkalnika. Prvi zazna, ko igralec trči v oviro1, drugi trkalnik pa trči med igralnim kosom in oviro2.

Tretji parameter trkaču pove, kaj naj naredi, ko zazna trk. V tem primeru obstaja funkcija. Če pride do trka, se vsi elementi igre uničijo; s tem se igra ustavi. Zdaj bo igralec prestopil, če bo zadel oviro.

Preizkusite razvoj iger s Phaserjem

Obstaja veliko različnih načinov, kako lahko to igro izboljšamo in naredimo bolj zapleteno. Ustvarili smo samo enega igralca, lahko pa dodamo še drugega igralnega lika in ga nadziramo s kontrolniki 'awsd'. Podobno lahko eksperimentirate z dodajanjem več ovir in spreminjanjem hitrosti njihovega gibanja.

kako narediti slušalke vr

Ta uvod vas bo začel, vendar se morate še veliko naučiti. Odlična stvar pri Phaserju je, da veliko fizike igre naredite namesto vas. To je odličen preprost način za začetek oblikovanja 2D iger. Nadaljujte z gradnjo te kode in izboljšajte igro.

Če naletite na napake, je iskalnik napak v brskalniku odličen način, da odkrijete težavo.

Deliti Deliti Cvrkutati E-naslov Kako z orodji Chrome DevTools odpraviti težave s spletnim mestom

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

Preberite Naprej Sorodne teme
  • Programiranje
  • JavaScript
  • HTML5
  • Razvoj iger
O avtorju Jennifer Seaton(21 objavljenih člankov)

J. Seaton je znanstveni pisatelj, specializiran za razčlenjevanje kompleksnih tem. Je doktorica znanosti na Univerzi v Saskatchewanu; njena raziskava se je osredotočila na uporabo učenja na podlagi iger za povečanje vključenosti študentov na spletu. Ko ne dela, jo boste našli z branjem, igranjem video iger ali vrtnarjenjem.

Več od Jennifer Seaton

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite