Kom godt i gang med Phaser til spiludvikling

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 over vanilla JavaScript er, at det har et omfattende bibliotek, der fuldender meget af videospilens fysik, så du kan koncentrere dig om at designe selve spillet.





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



Hvorfor udvikle med Phaser?

Phaser ligner andre visuelle programmeringssprog, idet programmet er baseret på looped -opdateringer. Phaser har tre hovedfaser: forudindlæsning, oprettelse og opdatering.





Ved forudindlæsning uploades spillets aktiver og gøres tilgængelige for spillet.

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



Opdatering, på den anden side, kører i en loop gennem hele spillet. Det er arbejdshesten, der opdaterer elementerne i spillet for at gøre det interaktivt.

Konfigurer 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. Det betyder, at du skal køre dit spil videre din lokale vært . Hvis du kører spilserversiden, kan dit spil få adgang til yderligere filer og aktiver uden for programmet. jeg anbefaler ved hjælp af XAMPP til at oprette en localhost hvis du ikke allerede har en opsætning.



Koden herunder får dig til at køre. Det opretter et grundlæggende spilmiljø.







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 at køre vil spillet kræve 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 fejlfinding til at finde ud af, hvad der gik galt. Mangler selv en enkelt karakter 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 en masse jord! Lad os se nærmere på koden.

For at et Phaser -spil kan 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 localhost og også referere til filen.

hvordan man sænker lysstyrken på computeren

Meget af koden konfigurerer hidtil spilmiljøet, som variablen konfiguration butikker. I vores eksempel opretter vi et phaser -spil med en blå (CCFFFF i hex -farvekode) baggrund, der er 600px ved 600px. For nu er spilfysikken blevet indstillet til Arkadisk , men Phaser tilbyder forskellig fysik.

Endelig, scene fortæller programmet til at køre forudindlæsning funktion inden spillet starter og skab funktion til at starte spillet. Alle disse oplysninger videregives til det kaldte spilobjekt spil .

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

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

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

Få vores spil til at bevæge sig

Indtil videre kan dette næsten ikke kaldes et spil. For det første kan vi ikke flytte vores spil. For at kunne ændre ting i vores spil skal vi 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: {
preload: preload,
create: create,
update: update
}

Tilføj derefter en opdateringsfunktion under oprettelsesfunktionen:

hvordan man kan kontrollere, om din facebook blev hacket
function update(){
}

Få nøgleindgange

For at lade spilleren styre spilstykket med piletasterne, skal vi tilføje en variabel for at spore, hvilke taster spilleren trykker på. Angiv en variabel kaldet keyInputs herunder, hvor vi erklærede gamePieces. Hvis du erklærer det der, vil alle funktioner få adgang til den nye variabel.

var gamePiece;
var keyInputs;

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

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

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

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 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. Undgåelse af forhindringer var grundlaget for mange af spillene i 8-bit-æraen.

Tilføjelse af forhindringer til spillet

Dette kodeeksempel bruger to forhindringssprites kaldet forhindring1 og forhindring 2. forhindring1 er en blå firkant og forhindring2 er grøn. Hvert billede skal forudindlæses ligesom 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');
}

Derefter skal hver forhindringssprite initialiseres i oprettelsesfunktionen, ligesom 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');
}

At få forhindringerne til at bevæge sig

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

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 forhindring1 ned på skærmen og forhindring2 hen over spilområdet 4px hver ramme. Når en firkant er slukket, 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 igennem forhindringerne. Vi er nødt til at få spillet til at opdage, når spilleren rammer en forhindring og afslutte spillet.

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

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 parametre. De to første parametre identificerer, hvilke objekter der kolliderer. Så ovenfor har vi oprettet to kolliderer. Den første registrerer, når gamepiece kolliderer med forhindring1, og den anden collider leder efter kollisioner mellem gamepiece og forhindring2.

Den tredje parameter fortæller kollideren, hvad han 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, hvis de rammer en forhindring.

Prøv spiludvikling med Phaser

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

2 verdenskrig film på netflix

Denne introduktion får dig i gang, men der er meget mere tilbage at lære. Det fantastiske ved Phaser er, at meget af fysikken i spillet er udført 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 forfine dit spil.

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

Del Del Tweet E -mail Sådan bruges Chrome DevTools til fejlfinding af webstedsproblemer

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

Læs Næste Relaterede emner
  • Programmering
  • JavaScript
  • HTML5
  • Spiludvikling
Om forfatteren Jennifer Seaton(21 artikler udgivet)

J. Seaton er en Science Writer, der har specialiseret sig i at nedbryde komplekse emner. Hun har en ph.d. fra University of Saskatchewan; hendes forskning fokuserede på at udnytte spilbaseret læring til at øge elevernes engagement online. Når hun ikke arbejder, finder du hende med sin læsning, videospil eller havearbejde.

Mere fra Jennifer Seaton

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere