Komma igång med Phaser för spelutveckling

Phaser är ett ramverk för att skapa 2D-videospel. Den använder HTML5 Canvas för att visa spelet och JavaScript för att köra spelet. Fördelen med att använda Phaser över vanilj JavaScript är att det har ett omfattande bibliotek som kompletterar mycket av fysiken i videospel så att du kan koncentrera dig på att designa själva spelet.

Phaser minskar utvecklingstiden och underlättar arbetsflödet. Låt oss lära oss att skapa ett grundläggande spel med Phaser.

Varför utvecklas med Phaser?

Phaser liknar andra visuella programmeringsspråk genom att programmet bygger på loopade uppdateringar. Phaser har tre huvudsteg: förinstallera, skapa och uppdatera.

I förinstallation laddas spelets tillgångar upp och görs tillgängliga för spelet.

Skapa initialiserar spelet och alla de inledande spelelementen. Var och en av dessa funktioner körs en gång när spelet startas.

Uppdatering, å andra sidan, körs i en loop genom hela spelet. Det är arbetshästen som uppdaterar elementen i spelet så att det blir interaktivt.

Ställ in ditt system för att utveckla spel med Phaser

Trots att Phaser körs på HTML och JavaScript körs spelen faktiskt på serversidan, inte på klientsidan. Det betyder att du måste köra ditt spel på din lokala värd. Genom att köra spelservernsidan kan ditt spel komma åt ytterligare filer och tillgångar utanför programmet. jag rekomenderar med XAMPP för att ställa in en lokal värd om du inte redan har en inställning.

Vad är 127.0 0.1, Localhost eller en Loopback-adress?

Du har sett "localhost" på din dator, men vad är det? Vad betyder 127.0.0.1-adressen? Har du blivit hackad?

Koden nedan kommer igång. Det skapar en grundläggande spelmiljö.

För att kunna köras krävs att en PNG-bild som heter "gamePiece" sparas i en "img" -mapp på din lokala värd. För enkelhetens skull använder detta exempel en 60xgame de60px orange fyrkant. Ditt spel ska se ut så här:

Om du stöter på ett problem, använd din webbläsares felsökare för att ta reda på vad som gick fel. Att sakna till och med en enda karaktär kan orsaka kaos, men i allmänhet kommer din felsökare att fånga de små felen.

Förklara installationskoden

Hittills gör spelet inget. Men vi har redan täckt mycket mark! Låt oss titta på koden mer ingående.

För att ett Phaser-spel ska kunna köras måste du importera Phaser-biblioteket. Vi gör det på rad 3. I det här exemplet länkade vi till källkoden, men du kan ladda ner den till din lokala värd och referera till filen också.

Mycket av koden hittills konfigurerar spelmiljön, som variabeln config butiker. I vårt exempel sätter vi upp ett faserspel med en blå (CCFFFF i hexfärgkod) bakgrund som är 600 pixlar vid 600 pixlar. För närvarande har spelfysiken ställts in på arkad, men Phaser erbjuder olika fysik.

Till sist, scen säger till programmet att köra förspänning funktion innan spelet startar och skapa funktion för att starta spelet. All denna information skickas till det spelobjekt som anropas spel.

Relaterad: De 6 bästa bärbara datorerna för programmering och kodning

Nästa kodavsnitt är där spelet verkligen tar form. Förladdningsfunktionen är där du vill initialisera allt du behöver för att köra ditt spel. I vårt fall har vi förinstallerat bilden av vår spelbit. Den första parametern för .bild namnger vår bild och den andra berättar för programmet var bilden ska hittas.

GamePiece-bilden lades till i spelet i skapa-funktionen. Linje 29 säger att vi lägger till image gamePiece som en sprite 270px vänster och 450px ner från det övre vänstra hörnet av vårt spelområde.

Att få vår spelbit att röra sig

Hittills kan detta knappast kallas ett spel. För det första kan vi inte flytta vår spelbit. För att kunna ändra saker i vårt spel måste vi lägga till en uppdateringsfunktion. Vi måste också justera scenen i konfigurationsvariabeln för att berätta för spelet vilken funktion som ska köras när vi uppdaterar spelet.

Lägga till en uppdateringsfunktion

Ny scen i konfiguration:

scen: {
förspänning: förspänning,
skapa: skapa,
uppdatering: uppdatering
}

Lägg sedan till en uppdateringsfunktion under skapa-funktionen:

funktionsuppdatering () {
}

Få viktiga ingångar

För att låta spelaren styra spelstycket med piltangenterna måste vi lägga till en variabel för att spåra vilka tangenter spelaren trycker på. Förklara en variabel som kallas keyInputs nedan där vi deklarerade gamePieces. Att förklara det där låter alla funktioner få tillgång till den nya variabeln.

var gamePiece;
var keyInputs;

KeyInput-variabeln bör initieras när spelet skapas i skapningsfunktionen.

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

Nu i uppdateringsfunktionen kan vi kontrollera om spelaren trycker på en piltangent, och om de är det, flytta vår spelbit därefter. I exemplet nedan flyttas spelstycket 2 pixlar, men du kan göra det till ett större eller mindre antal. Att flytta biten 1px åt gången verkade lite långsam.

funktionsuppdatering () {
om (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
om (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
om (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
om (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Spelet har en rörlig karaktär nu! Men för att verkligen vara ett spel behöver vi ett mål. Låt oss lägga till några hinder. Dodging hinder var grunden för många av spelen i 8-bitars eran.

Lägga till hinder i spelet

Detta kodexempel använder två hinder sprites som kallas hinder 1 och hinder 2. hinder1 är en blå fyrkant och hinder2 är grön. Varje bild måste laddas in precis som spelstycken sprite.

funktionsförspänning () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('hinder1', 'img / hinder1.png');
this.load.image ('obstacle2', 'img / obstacle2.png');
}

Då måste varje hinder sprite initieras i skapa-funktionen, precis som spelstycket.

funktion skapa () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
hinder1 = this.physics.add.sprite (200, 0, 'hinder1');
obstacle2 = this.physics.add.sprite (0, 200, 'obstacle2');
}

Få hindren att röra sig

För att flytta bitarna den här gången vill vi inte använda spelarens ingång. Låt oss istället flytta en bit från toppen till botten och den andra flytta från vänster till höger. För att göra det, lägg till följande kod i uppdateringsfunktionen:

hinder1.y = hinder1.y + 4;
if (hinder1.y> 600) {
hinder1.y = 0;
hindring1.x = Phaser. Matematik. Mellan (0, 600);
}
hinder2.x = hinder2.x + 4;
om (hinder2.x> 600) {
hinder2.x = 0;
hindring2.y = Phaser. Matematik. Mellan (0, 600);
}

Koden ovan flyttar hinder1 ner på skärmen och hinder2 över spelområdet 4px varje bild. När en fyrkant är avstängd från skärmen flyttas den tillbaka till motsatt sida på en ny slumpmässig plats. Detta kommer att säkerställa att det alltid finns ett nytt hinder för spelaren.

Upptäcka kollisioner

Men vi är inte helt klara än. Du kanske har märkt att vår spelare kan passera rakt igenom hinder. Vi måste få spelet att upptäcka när spelaren träffar ett hinder och avsluta spelet.

Phaser-fysikbiblioteket har en kollideringsdetektor. Allt vi behöver göra är att initialisera det i skapa-funktionen.

this.physics.add.collider (gamePiece, hinder1, funktion (gamePiece, hinder1) {
gamePiece.destroy ();
hinder. förstör ();
hinder2. förstöra ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
hinder. förstör ();
hinder2. förstöra ();
});

Collider-metoden kräver tre parametrar. De två första parametrarna identifierar vilka objekt som kolliderar. Så ovan har vi satt upp två kollider. Den första upptäcker när spelstycket kolliderar med hinder1 och den andra kollideraren letar efter kollisioner mellan spelstycket och hindret2.

Den tredje parametern berättar kollideraren vad man ska göra när den upptäcker en kollision. I det här exemplet finns en funktion. Om det är en kollision förstörs alla spelelement; detta stoppar spelet. Nu spelar spelaren om de träffar ett hinder.

Ge spelutveckling ett försök med Phaser

Det finns många olika sätt som detta spel kan förbättras och göras mer komplicerat. Vi har bara skapat en spelare, men en andra spelbar karaktär kan läggas till och kontrolleras med "awsd" -kontrollerna. På samma sätt kan du experimentera med att lägga till fler hinder och variera hastigheten på deras rörelse.

Denna introduktion kommer att komma igång, men det finns mycket mer kvar att lära sig. Det fantastiska med Phaser är att mycket av spelfysiken görs åt dig. Det är ett fantastiskt enkelt sätt att komma igång med att utforma 2D-spel. Fortsätt bygga vidare på den här koden och förfina ditt spel.

Om du stöter på några fel är din webbläsarfelsökare ett utmärkt sätt att upptäcka problemet.

Hur man använder Chrome DevTools för att felsöka webbplatsproblem

Lär dig hur du använder Chrome-webbläsarens inbyggda utvecklingsverktyg för att förbättra dina webbplatser.

Om författaren