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 vanilla 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 hvordan du lager et grunnleggende spill med Phaser.

Hvorfor utvikle seg med Phaser?

Phaser ligner på andre visuelle programmeringsspråk ved at programmet er basert på oppdateringer i loop. Phaser har tre hovedfaser: forhåndslast, opprett og oppdater.

I forhåndslastingen blir spillets eiendeler lastet opp og gjort tilgjengelig for spillet.

Create initialiserer spillet og alle startspillelementene. Hver av disse funksjonene kjøres en gang når spillet startes.

Oppdatering løper derimot 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 å utvikle 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 ditt videre din lokale vert. Å kjøre spillserver-siden lar spillet ditt få tilgang til flere filer og eiendeler utenfor programmet. jeg anbefaler ved hjelp av XAMPP for å sette opp en lokal vert hvis du ikke allerede har ett oppsett.

Hva er 127.0 0.1, Localhost eller en Loopback-adresse?

Du har sett "localhost" på datamaskinen din, men hva er det? Hva betyr 127.0.0.1-adressen? Har du blitt hacket?

Koden nedenfor vil komme deg i gang. Det setter opp et grunnleggende spillmiljø.

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 ut slik:

Hvis du støter på et problem, kan du bruke nettleserens feilsøkingsprogram for å finne ut hva som gikk galt. Manglende selv en enkelt karakter kan forårsake kaos, men generelt vil feilsøkingsprogrammet fange de små feilene.

Forklaring av installasjonskoden

Så langt gjør ikke spillet noe. Men vi har allerede dekket mye bakke! 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å.

Mye av koden konfigurerer så langt spillmiljøet, som variabelen config butikker. I vårt eksempel setter vi opp et phaser-spill med en blå (CCFFFF i hex color code) bakgrunn som er 600 x 600 px. For nå er spillfysikken satt til arkade, men Phaser tilbyr forskjellig fysikk.

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

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

Den neste delen av koden er hvor spillet virkelig tar form. Forbelastningsfunksjonen 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 for .bilde navngir bildet vårt og det andre forteller programmet hvor du finner bildet.

GamePiece-bildet ble lagt til i spillet i create-funksjonen. 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.

Gjør spillet vårt stykket

Så langt kan dette knapt kalles et spill. For det første kan vi ikke flytte spillstykket vårt. 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.

Legge til en oppdateringsfunksjon

Ny scene i konfigurasjon:

scene: {
forhåndsinnlasting: forhåndsinnlasting,
skape: skape,
oppdatering: oppdatering
}

Deretter legger du til en oppdateringsfunksjon under opprettingsfunksjonen:

funksjonsoppdatering () {
}

Få viktige innganger

For å la spilleren kontrollere 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. Når du erklærer det der, vil alle funksjonene få tilgang til den nye variabelen.

var gamePiece;
var keyInnganger;

KeyInput-variabelen skal initialiseres når spillet er opprettet i create-funksjonen.

funksjon lage () {
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, flytter vi spillbiten tilsvarende. I eksemplet nedenfor flyttes spillstykket 2 px, men du kan gjøre det til et større eller mindre tall. Å flytte brikken 1px om gangen virket litt treg.

funksjonsoppdatering () {
hvis (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
hvis (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
hvis (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
hvis (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 hindringer var grunnlaget for mange spill i 8-biters tid.

Legge til hindringer i spillet

Dette kodeeksemplet bruker to hindringsspriter som kalles hindring1 og hindring 2. hindring1 er en blå firkant og hindring2 er grønn. Hvert bilde må forhåndslastes akkurat som spillstykket sprite.

funksjon forhåndslast () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('hindring1', 'img / hindring1.png');
this.load.image ('hindring2', 'img / hindring2.png');
}

Deretter må hver hindringssprite initialiseres i create-funksjonen, akkurat som spillstykket.

funksjon lage () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
hindring1 = this.physics.add.sprite (200, 0, 'hindring1');
hindring2 = this.physics.add.sprite (0, 200, 'hindring2');
}

Få hindringene til å bevege seg

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

hindring1.y = hindring1.y + 4;
hvis (hindring1.y> 600) {
hindring1.y = 0;
hindring1.x = Phaser. Matte. Mellom (0, 600);
}
hindring2.x = hindring2.x + 4;
hvis (hindring2.x> 600) {
hindring2.x = 0;
hindring2.y = Phaser. Matte. Mellom (0, 600);
}

Koden ovenfor vil bevege hindring1 nedover skjermen og hindring2 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 en ny hindring for spilleren.

Oppdage 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 kollider-detektor. Alt vi trenger å gjøre er å initialisere det i create-funksjonen.

this.physics.add.collider (gamePiece, hindring1, funksjon (gamePiece, hindring1) {
gamePiece.destroy ();
hindring. ødelegge ();
hindring2. ødelegge ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
hindring. ødelegge ();
hindring2. ødelegge ();
});

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

Den tredje parameteren forteller kollideren hva den 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å vil spilleren spille om hvis de treffer et hinder.

Gi spillutvikling et forsøk med Phaser

Det er mange forskjellige måter dette spillet kan forbedres og gjøres mer komplekst. Vi har bare opprettet en spiller, men en andre 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.

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

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

Hvordan bruke Chrome DevTools til å feilsøke problemer med nettsteder

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

Om forfatteren