Komma igång med Phaser för spelutveckling

Komma igång med Phaser för spelutveckling

Phaser är en ram 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 videospelens fysik 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 hur man skapar ett grundläggande spel med Phaser.





Varför utvecklas med Phaser?

Phaser liknar andra visuella programmeringsspråk genom att programmet är baserat på loopade uppdateringar. Phaser har tre huvudfaser: förladdning, skapa och uppdatering.





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

Skapa initierar spelet och alla element i startspelet. Var och en av dessa funktioner körs en gång när spelet startas.



Uppdatering, å andra sidan, körs i en loop under hela spelet. Det är arbetshästen som uppdaterar elementen i spelet för att göra det interaktivt.

Konfigurera 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 spelserversidan kan ditt spel komma åt ytterligare filer och tillgångar utanför programmet. jag rekomenderar använder XAMPP för att skapa en lokal värd om du inte redan har en installation.





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







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


För att köra spelet krävs en PNG -bild med namnet 'gamePiece' sparad 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 ungefär så här:





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

Förklarar installationskoden

Än så länge gör spelet ingenting. Men vi har redan täckt mycket mark! Låt oss titta närmare på koden.

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

hur man säger om hdd misslyckas

Mycket av koden konfigurerar hittills spelmiljön, som variabeln config butiker. I vårt exempel skapar vi ett phaser -spel med en blå (CCFFFF i hexfärgkod) bakgrund som är 600px med 600px. För tillfället har spelets fysik ställts in på Arkadian , men Phaser erbjuder olika fysiker.

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 kallas spel .

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

Nästa avsnitt av kod är där spelet verkligen tar form. Förladdningsfunktionen är där du vill initiera 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 man kan hitta bilden.

GamePiece -bilden lades till i spelet i skapningsfunktionen. 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.

Få vår spelbit att flytta

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 spelet vilken funktion som ska köras när vi uppdaterar spelet.

Lägga till en uppdateringsfunktion

Ny scen i konfigurationen:

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

Lägg sedan till en uppdateringsfunktion under funktionen skapa:

hur man kopplar controller till xbox one
function update(){
}

Få viktiga ingångar

För att låta spelaren styra spelbiten med piltangenterna måste vi lägga till en variabel för att spåra vilka tangenter spelaren trycker på. Deklarera en variabel som kallas keyInputs nedan där vi deklarerade gamePieces. Genom att förklara det där kommer alla funktioner att komma åt den nya variabeln.

var gamePiece;
var keyInputs;

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

function create(){
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 spelbiten 2px, men du kan göra det till ett större eller mindre antal. Att flytta stycket 1 px åt gången verkade lite långsamt.

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

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. Att undvika hinder var grunden för många spel under 8-bitars eran.

Lägga till hinder i spelet

Detta kodexempel använder två hindersprites som kallas hinder1 och hinder 2. hinder1 är en blå ruta och hinder2 är grön. Varje bild måste förinstalleras precis 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');
}

Sedan måste varje hindersprite initialiseras i skapningsfunktionen, precis som spelstycket.

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

Att 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:

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 ovan kommer att flytta hinder1 ner på skärmen och hinder2 över spelområdet 4px varje bildruta. När en ruta är borta 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äcker kollisioner

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

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

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 kräver tre parametrar. De två första parametrarna identifierar vilka objekt som kolliderar. Så ovan har vi två kolliderare installerade. 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 talar om för kollideraren vad han ska göra när den upptäcker en kollision. I det här exemplet finns det en funktion. Om det sker en kollision förstörs alla spelelement; detta stoppar spelet. Nu spelar spelaren om de träffar ett hinder.

Prova spelutvecklingen med Phaser

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

hur man skickar en grupptext på Android

Denna introduktion kommer att komma igång, men det finns mycket mer kvar att lära. Det fina med Phaser är att mycket av spelets fysik görs åt dig. Det är ett mycket enkelt sätt att komma igång med att designa 2D -spel. Fortsätt att bygga vidare på denna kod och förfina ditt spel.

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

Dela med sig Dela med sig Tweet E-post Så här använder du 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.

Läs Nästa
Relaterade ämnen
  • Programmering
  • JavaScript
  • HTML5
  • Spelutveckling
Om författaren Jennifer Seaton(21 artiklar publicerade)

J. Seaton är en Science Writer som specialiserat sig på att bryta ner komplexa ämnen. Hon har en doktorsexamen från University of Saskatchewan; hennes forskning fokuserade på att använda spelbaserat lärande för att öka studentens engagemang online. När hon inte arbetar hittar du henne med sin läsning, spelande tv -spel eller trädgårdsarbete.

Mer från Jennifer Seaton

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera