Aan de slag met Phaser voor game-ontwikkeling

Aan de slag met Phaser voor game-ontwikkeling

Phaser is een raamwerk voor het maken van 2D-videogames. Het gebruikt HTML5 Canvas om het spel weer te geven en JavaScript om het spel uit te voeren. Het voordeel van Phaser boven vanille JavaScript is dat het een uitgebreide bibliotheek heeft die een groot deel van de fysica van videogames vervolledigt, zodat je je kunt concentreren op het ontwerpen van het spel zelf.





Phaser verkort de ontwikkeltijd en vereenvoudigt de workflow. Laten we leren hoe we een basisspel kunnen maken met Phaser.



Waarom ontwikkelen met Phaser?

Phaser is vergelijkbaar met andere visuele programmeertalen in die zin dat het programma is gebaseerd op lusupdates. Phaser heeft drie hoofdfasen: vooraf laden, maken en bijwerken.





In preload worden de assets van de game geüpload en beschikbaar gemaakt voor de game.

Create initialiseert het spel en alle beginspelelementen. Elk van deze functies wordt één keer uitgevoerd wanneer het spel wordt gestart.



Update daarentegen loopt in een lus gedurende het spel. Het is het werkpaard dat de elementen van het spel bijwerkt om het interactief te maken.

Stel uw systeem in voor het ontwikkelen van games met Phaser

Ondanks dat Phaser op HTML en JavaScript draait, worden de games eigenlijk server-side uitgevoerd, niet client-side. Dit betekent dat je je game op uw lokale host . Door de game server-side te draaien, heeft je game toegang tot extra bestanden en middelen buiten het programma. ik raad aan XAMPP gebruiken om een ​​localhost in te stellen als u nog geen installatie heeft.



Met de onderstaande code kunt u aan de slag. Het zet een basisspelomgeving op.







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


Om te kunnen spelen, heeft het spel een PNG-afbeelding met de naam 'gamePiece' nodig die is opgeslagen in een 'img'-map op uw localhost. Voor de eenvoud gebruikt dit voorbeeld een 60xgame de60px oranje vierkant. Je spel zou er ongeveer zo uit moeten zien:



Als je een probleem tegenkomt, gebruik dan de debugger van je browser om erachter te komen wat er is misgegaan. Zelfs het missen van een enkel teken kan grote schade aanrichten, maar over het algemeen vangt je debugger die kleine fouten op.

De installatiecode uitleggen

Tot nu toe doet het spel niets. Maar we hebben al heel wat afgelegd! Laten we de code dieper bekijken.

Om een ​​Phaser-game te laten draaien, moet je de Phaser-bibliotheek importeren. We doen dit op regel 3. In dit voorbeeld hebben we gekoppeld aan de broncode, maar u kunt deze ook downloaden naar uw localhost en naar het bestand verwijzen.

hoe de laatste browsersessie chrome te heropenen

Veel van de code tot nu toe configureert de spelomgeving, die de variabele configuratie winkels. In ons voorbeeld zetten we een phaser-spel op met een blauwe (CCFFFF in hexadecimale kleurcode) achtergrond van 600 px bij 600 px. Voorlopig is de spelfysica ingesteld op: Arcadisch , maar Phaser biedt verschillende fysica.

Eindelijk, tafereel vertelt het programma om de . uit te voeren voorladen functie voordat het spel begint en de creëren functie om het spel te starten. Al deze informatie wordt doorgegeven aan het game-object genaamd spel .

Verwant: De 6 beste laptops voor programmeren en coderen

Het volgende deel van de code is waar het spel echt vorm krijgt. De preload-functie is waar je alles wilt initialiseren dat je nodig hebt om je spel uit te voeren. In ons geval hebben we de afbeelding van ons speelstuk vooraf geladen. De eerste parameter van .afbeelding geeft onze afbeelding een naam en de tweede vertelt het programma waar de afbeelding te vinden is.

De gamePiece-afbeelding is aan het spel toegevoegd in de aanmaakfunctie. Regel 29 zegt dat we de afbeelding gamePiece toevoegen als een sprite 270px links en 450px naar beneden vanaf de linkerbovenhoek van ons spelgebied.

Ons speelstuk laten bewegen

Tot nu toe is dit nauwelijks een spel te noemen. Om te beginnen kunnen we ons speelstuk niet verplaatsen. Om dingen in ons spel te kunnen veranderen, zullen we een update-functie moeten toevoegen. We zullen ook de scène in de config-variabele moeten aanpassen om de game te vertellen welke functie moet worden uitgevoerd wanneer we de game updaten.

Een updatefunctie toevoegen

Nieuwe scène in configuratie:

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

Voeg vervolgens een update-functie toe onder de create-functie:

wanneer u een schijf formatteert, moet u de grootte kiezen van welke van de volgende bestandssysteemkenmerken?
function update(){
}

Sleutelinvoer verkrijgen

Om de speler het speelstuk te laten besturen met de pijltjestoetsen, moeten we een variabele toevoegen om bij te houden welke toetsen de speler indrukt. Declareer hieronder een variabele met de naam keyInputs waar we gamePieces hebben gedeclareerd. Door het daar te declareren, krijgen alle functies toegang tot de nieuwe variabele.

var gamePiece;
var keyInputs;

De keyInput-variabele moet worden geïnitialiseerd wanneer de game wordt gemaakt in de create-functie.

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

Nu kunnen we in de update-functie controleren of de speler op een pijltoets drukt, en als dat zo is, ons speelstuk dienovereenkomstig verplaatsen. In het onderstaande voorbeeld is het speelstuk 2px verplaatst, maar je kunt dat een groter of kleiner aantal maken. Het stuk per keer 1px verplaatsen leek een beetje traag.

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

Het spel heeft nu een verplaatsbaar karakter! Maar om echt een spel te zijn, hebben we een doel nodig. Laten we wat obstakels toevoegen. Het ontwijken van obstakels was de basis voor veel van de games in het 8-bit-tijdperk.

Obstakels aan het spel toevoegen

Dit codevoorbeeld gebruikt twee obstakelsprites, obstakel1 en obstakel 2. obstakel1 is een blauw vierkant en obstakel2 is groen. Elke afbeelding moet vooraf worden geladen, net als de 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');
}

Vervolgens moet elke obstakel-sprite worden geïnitialiseerd in de maakfunctie, net als het speelstuk.

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

De obstakels laten bewegen

Om de stukken deze keer te verplaatsen, willen we geen spelersinvoer gebruiken. Laten we in plaats daarvan één stuk van boven naar beneden laten bewegen en het andere van links naar rechts. Voeg hiervoor de volgende code toe aan de update-functie:

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

De bovenstaande code verplaatst obstakel1 over het scherm en obstakel2 over het spelgebied 4px per frame. Zodra een vierkant van het scherm is, wordt het terug verplaatst naar de andere kant op een nieuwe willekeurige plek. Dit zorgt ervoor dat er altijd een nieuw obstakel is voor de speler.

Botsingen detecteren

Maar we zijn nog niet helemaal klaar. Het is je misschien opgevallen dat onze speler dwars door de obstakels heen kan. We moeten het spel laten detecteren wanneer de speler een obstakel raakt en het spel beëindigen.

De Phaser-fysicabibliotheek heeft een colliderdetector. Het enige wat we hoeven te doen is het te initialiseren in de create-functie.

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

De collidermethode vereist drie parameters. De eerste twee parameters geven aan welke objecten botsen. Dus hierboven hebben we twee versnellers opgesteld. De eerste detecteert wanneer het speelstuk botst met obstakel1 en de tweede botser zoekt naar botsingen tussen het speelstuk en obstakel2.

De derde parameter vertelt de botser wat hij moet doen zodra hij een botsing detecteert. In dit voorbeeld is er een functie. Als er een botsing is, worden alle spelelementen vernietigd; dit stopt het spel. Nu zal de speler game-over zijn als ze een obstakel raken.

Geef game-ontwikkeling een kans met Phaser

Er zijn veel verschillende manieren waarop dit spel kan worden verbeterd en complexer kan worden gemaakt. We hebben maar één speler gemaakt, maar een tweede speelbaar personage kan worden toegevoegd en bestuurd met de 'awsd'-bedieningselementen. Op dezelfde manier zou je kunnen experimenteren met het toevoegen van meer obstakels en het variëren van de snelheid van hun beweging.

hoe een koptelefoon langer mee te laten gaan?

Deze introductie helpt je op weg, maar er valt nog veel meer te leren. Het mooie van Phaser is dat veel van de spelfysica voor je wordt gedaan. Het is een geweldige gemakkelijke manier om aan de slag te gaan met het ontwerpen van 2D-games. Bouw verder op deze code en verfijn je spel.

Als u fouten tegenkomt, is uw browserdebugger een geweldige manier om het probleem te ontdekken.

Deel Deel Tweeten E-mail Chrome DevTools gebruiken om problemen met websites op te lossen

Leer hoe u de ingebouwde ontwikkelingstools van de Chrome-browser kunt gebruiken om uw websites te verbeteren.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • JavaScript
  • HTML5
  • Spelontwikkeling
Over de auteur Jennifer Seaton(21 artikelen gepubliceerd)

J. Seaton is een wetenschapsschrijver die gespecialiseerd is in het opsplitsen van complexe onderwerpen. Ze is gepromoveerd aan de Universiteit van Saskatchewan; haar onderzoek was gericht op het gebruik van game-based learning om de online betrokkenheid van studenten te vergroten. Als ze niet aan het werk is, vind je haar terwijl ze leest, videospelletjes speelt of tuiniert.

Meer van Jennifer Seaton

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren