Komme i gang med Phaser for spillutvikling

Phaser er et rammeverk for å lage 2D -videospill. Den bruker HTML5 Canvas for å vise spillet og JavaScript for å kjøre spillet. Fordelen med å bruke Phaser over vanilje JavaScript er at det har et omfattende bibliotek som fullfører mye av fysikken til videospill, slik at du kan konsentrere deg om å designe selve spillet.

Phaser reduserer utviklingstiden og letter arbeidsflyten. La oss lære å lage et grunnleggende spill med Phaser.

---

---

Hvorfor utvikle med Phaser?

Phaser ligner på andre visuelle programmeringsspråk ved at programmet er basert på løkkede oppdateringer. Phaser har tre hovedtrinn: forhåndsinnlasting, opprett og oppdater.

Ved forhåndsinnlasting lastes spillets eiendeler opp og gjøres tilgjengelig for spillet.

Lag initialiserer spillet og alle elementene i startspillet. Hver av disse funksjonene kjøres en gang når spillet startes.

Oppdatering, derimot, går i en løkke gjennom hele spillet. Det er arbeidshesten som oppdaterer elementene i spillet for å gjøre det interaktivt.

Sett opp systemet ditt for utvikling av spill med Phaser

Til tross for at Phaser kjører på HTML og JavaScript, kjøres spillene faktisk på serversiden, ikke på klientsiden. Dette betyr at du må kjøre spillet på din lokale vert . Å kjøre spillserversiden gir spillet ditt tilgang til flere filer og eiendeler utenfor programmet. jeg anbefaler bruker XAMPP til å sette opp en lokal vert hvis du ikke allerede har et oppsett.

---

---

Koden nedenfor får deg i gang. Det setter opp et grunnleggende spillmiljø.







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




For å kjøre vil spillet kreve et PNG -bilde kalt 'gamePiece' lagret i en 'img' -mappe på din lokale vert. For enkelhets skyld bruker dette eksemplet en 60xgame de60px oransje firkant. Spillet ditt skal se slik ut:

---

---

Hvis du støter på et problem, kan du bruke nettleserens feilsøkingsprogram til å finne ut hva som gikk galt. Hvis du mangler et enkelt tegn, kan det føre til ødeleggelse, men vanligvis vil feilsøkingsprogrammet fange de små feilene.

Forklare oppsettskoden

Så langt gjør ikke spillet noe. Men vi har allerede dekket mye terreng! La oss se nærmere på koden.

For at et Phaser -spill skal kjøre, må du importere Phaser -biblioteket. Vi gjør dette på linje 3. I dette eksemplet koblet vi til kildekoden, men du kan laste den ned til din lokale vert og referere til filen også.

hvorfor er firefox så treg?

Mye av koden konfigurerer så langt spillmiljøet, som variabelen konfigur butikker. I vårt eksempel setter vi opp et phaser -spill med en blå (CCFFFF i hex -fargekode) bakgrunn som er 600 x 600 piksler. For øyeblikket er spillets fysikk satt til Arkadisk , men Phaser tilbyr forskjellig fysikk.

Endelig, scene forteller programmet å kjøre forhåndslast funksjon før spillet starter og skape funksjon for å starte spillet. All denne informasjonen sendes til spillobjektet som kalles spill .

I slekt: De 6 beste bærbare datamaskinene for programmering og koding

Den neste delen av koden er hvor spillet virkelig tar form. Forladingsfunksjonen er der du vil initialisere alt du trenger for å kjøre spillet ditt. I vårt tilfelle har vi forhåndslastet bildet av spillstykket vårt. Den første parameteren til .bilde navngir bildet vårt og det andre forteller programmet hvor du kan finne bildet.

GamePiece -bildet ble lagt til i spillet i opprettingsfunksjonen. Linje 29 sier at vi legger til image gamePiece som en sprite 270px til venstre og 450px ned fra øverste venstre hjørne av spillområdet vårt.

Få vår spillbit til å bevege seg

Så langt kan dette neppe kalles et spill. For det første kan vi ikke flytte spillbrikken vår. For å kunne endre ting i spillet vårt, må vi legge til en oppdateringsfunksjon. Vi må også justere scenen i konfigurasjonsvariabelen for å fortelle spillet hvilken funksjon som skal kjøres når vi oppdaterer spillet.

Legger til en oppdateringsfunksjon

Ny scene i konfigurasjonen:

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

Deretter legger du til en oppdateringsfunksjon under opprettingsfunksjonen:

hva er en .gz fil

function update(){
}

Få nøkkelinnganger

For å la spilleren styre spillstykket med piltastene, må vi legge til en variabel for å spore hvilke taster spilleren trykker på. Erklær en variabel kalt keyInputs nedenfor der vi erklærte gamePieces. Hvis du erklærer det der, vil alle funksjonene få tilgang til den nye variabelen.

var gamePiece;
var keyInputs;

KeyInput -variabelen bør initialiseres når spillet opprettes i opprettingsfunksjonen.

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

Nå i oppdateringsfunksjonen, kan vi sjekke om spilleren trykker på en piltast, og hvis de er det, kan vi flytte spillbrikken vår deretter. I eksemplet nedenfor flyttes spillstykket 2px, men du kan gjøre det til et større eller mindre tall. Å flytte stykket 1 px om gangen virket litt tregt.

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

Spillet har en bevegelig karakter nå! Men for å virkelig være et spill, trenger vi et mål. La oss legge til noen hindringer. Dodging hinder var grunnlaget for mange av spillene i 8-biters æra.

Legge til hindringer i spillet

Dette kodeeksemplet bruker to hindersprites som kalles hinder1 og hinder 2. hinder1 er en blå firkant og hinder2 er grønn. Hvert bilde må forhåndslastes akkurat som gamepiece sprite.

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

Deretter må hver hindersprite initialiseres i opprettingsfunksjonen, akkurat som gamepiece.

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

Få hindrene til å bevege seg

For å flytte brikkene denne gangen, ønsker vi ikke å bruke spillerinngang. I stedet, la oss flytte ett stykke fra toppen til bunnen og det andre flytte fra venstre til høyre. For å gjøre det, legg til følgende kode i oppdateringsfunksjonen:

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

Koden ovenfor vil flytte hinder1 nedover skjermen og hinder2 over spillområdet 4px hver ramme. Når en firkant er utenfor skjermen, flyttes den tilbake til motsatt side på et nytt tilfeldig sted. Dette vil sikre at det alltid er et nytt hinder for spilleren.

Oppdager kollisjoner

Men vi er ikke helt ferdige ennå. Du har kanskje lagt merke til at spilleren vår kan passere rett gjennom hindringene. Vi må få spillet til å oppdage når spilleren treffer et hinder og avslutte spillet.

Phaser fysikkbibliotek har en kolliderdetektor. Alt vi trenger å gjøre er å initialisere det i opprettingsfunksjonen.

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

Collider -metoden krever tre parametere. De to første parameterne identifiserer hvilke objekter som kolliderer. Så ovenfor har vi satt opp to kolliderer. Den første oppdager når gamepiece kolliderer med hinder1 og den andre kollideren leter etter kollisjoner mellom gamepiece og hinder2.

Den tredje parameteren forteller kollideren hva han skal gjøre når den oppdager en kollisjon. I dette eksemplet er det en funksjon. Hvis det er en kollisjon, blir alle spillelementene ødelagt; dette stopper spillet. Nå spiller spilleren om de treffer et hinder.

Prøv spillutviklingen med Phaser

Det er mange forskjellige måter dette spillet kan forbedres og gjøres mer komplekst. Vi har bare opprettet én spiller, men en annen spillbar karakter kan legges til og kontrolleres med 'awsd' -kontrollene. På samme måte kan du eksperimentere med å legge til flere hindringer og variere hastigheten på bevegelsen.

hvordan åpne en jar -fil windows 10

Denne introduksjonen vil komme i gang, men det er mye mer igjen å lære. Det flotte med Phaser er at mye av spillets fysikk er gjort for deg. Det er en veldig enkel måte å komme i gang med å designe 2D -spill. Fortsett å bygge videre på denne koden og finpusse spillet ditt.

Hvis du støter på noen feil, er nettleserfeilsøkingen en fin måte å oppdage problemet på.

Dele Dele kvitring E -post Slik bruker du Chrome DevTools til å feilsøke nettstedproblemer

Lær hvordan du bruker Chrome-nettleserens innebygde utviklingsverktøy for å forbedre nettstedene dine.

Les neste Relaterte temaer

• Programmering
• JavaScript
• HTML5
• Spillutvikling

Om forfatteren Jennifer Seaton(21 artikler publisert)

J. Seaton er en vitenskapsforfatter som spesialiserer seg på å bryte ned komplekse temaer. Hun har en doktorgrad fra University of Saskatchewan; forskningen hennes fokuserte på å utnytte spillbasert læring for å øke studentengasjementet online. Når hun ikke jobber, vil du finne henne mens hun leser, spiller videospill eller hagearbeid.

Mer fra Jennifer Seaton

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere