Kom godt i gang med Phaser til spiludvikling

Phaser er en ramme til oprettelse af 2D-videospil. Det bruger HTML5 Canvas til at vise spillet og JavaScript til at køre spillet. Fordelen ved at bruge Phaser frem for vanilje JavaScript er, at der er et omfattende bibliotek, der fuldender meget af fysikken i videospil, så du kan koncentrere dig om at designe selve spillet.

Phaser reducerer udviklingstiden og letter arbejdsgangen. Lad os lære at skabe et grundlæggende spil med Phaser.

Hvorfor udvikle sig med Phaser?

Phaser ligner andre visuelle programmeringssprog, idet programmet er baseret på loopede opdateringer. Phaser har tre hovedfaser: forudindlæse, oprette og opdatere.

I forudindlæsning uploades spilets aktiver og gøres tilgængelige for spillet.

Opret initialiserer spillet og alle de startende spilelementer. Hver af disse funktioner køres en gang, når spillet startes.

Opdatering kører derimod i en løkke gennem hele spillet. Det er arbejdshesten, der opdaterer elementerne i spillet for at gøre det interaktivt.

Opsæt dit system til udvikling af spil med Phaser

På trods af at Phaser kører på HTML og JavaScript, køres spillene faktisk på serversiden, ikke på klientsiden. Dette betyder, at du bliver nødt til at køre dit spil videre din lokale vært. At køre spilserverens side giver dit spil adgang til yderligere filer og aktiver uden for programmet. jeg anbefaler ved hjælp af XAMPP til at oprette en lokal vært hvis du ikke allerede har en opsætning.

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

Du har set "localhost" på din computer, men hvad er det? Hvad betyder 127.0.0.1-adressen? Er du blevet hacket?

Koden nedenfor får dig i gang. Det opretter et grundlæggende spilmiljø.

For at køre kræver spillet et PNG-billede kaldet "gamePiece" gemt i en "img" -mappe på din lokale vært. For enkelheds skyld bruger dette eksempel en 60xgame de60px orange firkant. Dit spil skal se sådan ud:

Hvis du støder på et problem, skal du bruge din browsers fejlfindingsprogram til at finde ud af, hvad der gik galt. Manglende selv et enkelt tegn kan forårsage kaos, men generelt vil din debugger fange de små fejl.

Forklaring af opsætningskoden

Indtil videre gør spillet ikke noget. Men vi har allerede dækket meget grund! Lad os se nærmere på koden.

For at et Phaser-spil skal køre, skal du importere Phaser-biblioteket. Vi gør dette på linje 3. I dette eksempel linkede vi til kildekoden, men du kan downloade den til din lokale vært og også henvise til filen.

Meget af koden konfigurerer hidtil spilmiljøet, som variablen config butikker. I vores eksempel opretter vi et phaser-spil med en blå (CCFFFF i hex color code) baggrund, der er 600 px ved 600 pixel. Indtil videre er spilfysikken indstillet til arkade, men Phaser tilbyder forskellig fysik.

Langt om længe, scene fortæller programmet at køre forudindlæsning funktion før spillet starter og skab funktion til at starte spillet. Al denne information videregives til det kaldte spilobjekt spil.

Relaterede: De 6 bedste bærbare computere til programmering og kodning

Det næste afsnit af kode er, hvor spillet virkelig tager form. Forudindlæsningsfunktionen er, hvor du vil initialisere alt, hvad du har brug for til at køre dit spil. I vores tilfælde har vi forudindlæst billedet af vores spil. Den første parameter for .billede navngiver vores billede, og det andet fortæller programmet, hvor billedet skal findes.

GamePiece-billedet blev føjet til spillet i oprettelsesfunktionen. Linie 29 siger, at vi tilføjer billedspilstykket som en sprite 270px til venstre og 450px ned fra det øverste venstre hjørne af vores spilområde.

At få vores spil til at bevæge sig

Indtil videre kan dette næppe kaldes et spil. For det første kan vi ikke flytte vores spil. For at kunne ændre ting i vores spil bliver vi nødt til at tilføje en opdateringsfunktion. Vi bliver også nødt til at justere scenen i konfigurationsvariablen for at fortælle spillet, hvilken funktion der skal køres, når vi opdaterer spillet.

Tilføjelse af en opdateringsfunktion

Ny scene i konfiguration:

scene: {
forudindlæsning: forudindlæsning,
skabe: skabe,
opdatering: opdatering
}

Tilføj derefter en opdateringsfunktion under oprettelsesfunktionen:

funktionsopdatering () {
}

Få nøgleindgange

For at lade spilleren kontrollere spilstykket med piletasterne bliver vi nødt til at tilføje en variabel for at spore hvilke taster spilleren trykker på. Erklær en variabel kaldet keyInputs nedenfor, hvor vi erklærede gamePieces. Når man erklærer det der, vil alle funktionerne få adgang til den nye variabel.

var spilstykke;
var keyInputs;

KeyInput-variablen skal initialiseres, når spillet oprettes i create-funktionen.

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

Nu i opdateringsfunktionen kan vi kontrollere, om afspilleren trykker på en piletast, og hvis de er, skal vi flytte vores spil i overensstemmelse hermed. I eksemplet nedenfor flyttes spilstykket 2 pixel, men du kan gøre det til et større eller mindre antal. Flytning af stykket 1 px ad gangen syntes lidt langsomt.

funktionsopdatering () {
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 bevægelig karakter nu! Men for virkelig at være et spil har vi brug for et mål. Lad os tilføje nogle forhindringer. Undvigende forhindringer var grundlaget for mange af spillene i 8-bit æraen.

Tilføje forhindringer til spillet

Dette kodeeksempel bruger to forhindringssprites kaldet obstacle1 og obstacle 2. hindring1 er en blå firkant og hindring2 er grøn. Hvert billede skal forudindlæses ligesom gamepiece sprite.

funktion forudindlæsning () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('hindring1', 'img / hindring1.png');
this.load.image ('obstacle2', 'img / obstacle2.png');
}

Derefter skal hver forhindringssprite initialiseres i oprettelsesfunktionen, ligesom gamestykket.

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

Få hindringerne til at bevæge sig

For at flytte brikkerne denne gang ønsker vi ikke at bruge spillerindgang. Lad os i stedet få det ene stykke til at bevæge sig fra toppen til bunden, og det andet bevæge sig fra venstre mod højre. For at gøre det skal du tilføje følgende kode til opdateringsfunktionen:

hindring1.y = hindring1.y + 4;
hvis (hindring1.y> 600) {
hindring1.y = 0;
hindring1.x = Phaser. Matematik. Mellem (0, 600);
}
hindring2.x = hindring2.x + 4;
hvis (hindring2.x> 600) {
forhindring2.x = 0;
hindring2.y = Phaser. Matematik. Mellem (0, 600);
}

Koden ovenfor flytter forhindring1 ned ad skærmen og forhindring2 over spilområdet 4px hver ramme. Når en firkant er slukket for skærmen, flyttes den tilbage til den modsatte side på et nyt tilfældigt sted. Dette vil sikre, at der altid er en ny hindring for spilleren.

Registrering af kollisioner

Men vi er ikke helt færdige endnu. Du har måske bemærket, at vores spiller kan passere lige gennem forhindringerne. Vi er nødt til at få spillet til at opdage, hvornår spilleren rammer en hindring og afslutte spillet.

Phaser-fysikbiblioteket har en kollideredetektor. Alt hvad vi skal gøre er at initialisere det i oprettelsesfunktionen.

this.physics.add.collider (gamePiece, obstacle1, function (gamePiece, obstacle1) {
gamePiece.destroy ();
hindring. ødelægge ();
hindring2. ødelægge ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
hindring. ødelægge ();
hindring2. ødelægge ();
});

Collider-metoden kræver tre parametre. De to første parametre identificerer, hvilke objekter der kolliderer. Så ovenfor har vi oprettet to kollidere. Den første registrerer, når gamestykket kolliderer med forhindring1, og den anden kolliderer søger kollisioner mellem gamestykket og hindringen2.

Den tredje parameter fortæller kollideren, hvad den skal gøre, når den registrerer en kollision. I dette eksempel er der en funktion. Hvis der er en kollision, ødelægges alle spilelementerne; dette stopper spillet. Nu spiller spilleren om, hvis de rammer en forhindring.

Giv spiludvikling et forsøg med Phaser

Der er mange forskellige måder, hvorpå dette spil kan forbedres og gøres mere komplekst. Vi har kun oprettet en spiller, men en anden spilbar karakter kan tilføjes og kontrolleres med "awsd" -knapperne. På samme måde kan du eksperimentere med at tilføje flere forhindringer og variere hastigheden på deres bevægelse.

Denne introduktion vil komme i gang, men der er meget mere tilbage at lære. Det fantastiske ved Phaser er, at meget af spilfysikken er gjort for dig. Det er en fantastisk nem måde at komme i gang med at designe 2D-spil. Fortsæt med at bygge videre på denne kode og finjuster dit spil.

Hvis du støder på fejl, er din browserdebugger en fantastisk måde at opdage problemet på.

Sådan bruges Chrome DevTools til fejlfinding af webstedsproblemer

Lær hvordan du bruger Chrome-browserens indbyggede udviklingsværktøjer til at forbedre dine websteder.

Om forfatteren