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 het gebruik van Phaser ten opzichte van vanille JavaScript is dat het een uitgebreide bibliotheek heeft die veel van de fysica van videogames voltooit, zodat u zich kunt concentreren op het ontwerpen van de game zelf.

Phaser verkort de ontwikkelingstijd 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 doordat het programma is gebaseerd op geloopte updates. Phaser heeft drie hoofdfasen: vooraf laden, maken en bijwerken.

Bij preload worden de items van de game geüpload en beschikbaar gemaakt voor de game.

Create initialiseert het spel en alle elementen van het startspel. Elk van deze functies wordt eenmaal uitgevoerd wanneer het spel wordt gestart.

Update daarentegen loopt tijdens het spel in een lus. 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, draaien de games eigenlijk aan de serverzijde, niet aan de clientzijde. Dit betekent dat je je game moet draaien uw localhost. Als u de gameserver uitvoert, heeft uw game toegang tot extra bestanden en middelen buiten het programma. ik raad aan XAMPP gebruiken om een ​​localhost op te zetten als u nog geen configuratie heeft.

Wat is 127.0 0.1, Localhost of een loopback-adres?

U hebt "localhost" op uw computer gezien, maar wat is het? Wat betekent het adres 127.0.0.1? Ben je gehackt?

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

Om het spel uit te voeren, heeft u 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 oranje vierkant van 60xgame de60px. Je game 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 mis is gegaan. Het missen van zelfs maar een enkel teken kan grote schade aanrichten, maar over het algemeen zal uw debugger die kleine foutjes opvangen.

De installatiecode uitleggen

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

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

Een groot deel van de code configureert tot nu toe de game-omgeving, die de variabele config winkels. In ons voorbeeld zetten we een phaser-game op met een blauwe (CCFFFF in hexadecimale kleurcode) achtergrond van 600px bij 600px. Voorlopig is de gamefysica ingesteld op arcade, maar Phaser biedt verschillende fysica.

Tenslotte, tafereel vertelt het programma om het voorladen functie voordat het spel start en de creëren functie om het spel te starten. Al deze informatie wordt doorgegeven aan het opgeroepen spelobject spel.

Verwant: De 6 beste laptops voor programmeren en coderen

In het volgende gedeelte van de code krijgt het spel echt vorm. De preload-functie is waar je alles wilt initialiseren dat je nodig hebt om je game uit te voeren. In ons geval hebben we de afbeelding van ons spelstuk vooraf geladen. De eerste parameter van .beeld noemt onze afbeelding en de tweede vertelt het programma waar het de afbeelding kan vinden.

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

Ons spel in beweging zetten

Tot nu toe kan dit nauwelijks een spel worden genoemd. Om te beginnen kunnen we ons speelstuk niet verplaatsen. Om dingen in onze game te kunnen veranderen, zullen we een updatefunctie moeten toevoegen. We zullen ook de scène in de configuratievariabele moeten aanpassen om het spel te vertellen welke functie moet worden uitgevoerd wanneer we het spel updaten.

Een updatefunctie toevoegen

Nieuwe scène in configuratie:

tafereel: {
preload: preload,
create: creëren,
update: update
}

Voeg vervolgens een updatefunctie toe onder de aanmaakfunctie:

functie-update () {
}

Belangrijke ingangen verkrijgen

Om de speler het speelstuk met de pijltjestoetsen te laten besturen, moeten we een variabele toevoegen om bij te houden welke toetsen de speler indrukt. Declareer een variabele met de naam keyInputs hieronder 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 het spel wordt gemaakt in de functie create.

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

Nu kunnen we in de updatefunctie controleren of de speler op een pijltoets drukt, en als dat het geval is, ons speelstuk dienovereenkomstig verplaatsen. In het onderstaande voorbeeld wordt het speelstuk 2px verplaatst, maar je kunt er een groter of kleiner getal van maken. Het stuk 1px per keer verplaatsen leek een beetje traag.

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

De game heeft nu een beweegbaar personage! 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 games in het 8-bit-tijdperk.

Obstakels toevoegen aan het spel

Dit codevoorbeeld gebruikt twee obstakel-sprites genaamd obstacle1 en obstacle 2. obstacle1 is een blauw vierkant en obstacle2 is groen. Elke afbeelding moet vooraf worden geladen, net als de gamepiece-sprite.

functie 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 create-functie, net als de gamepiece.

functie 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 het ene stuk van boven naar beneden laten bewegen en het andere van links naar rechts. Voeg hiervoor de volgende code toe aan de updatefunctie:

obstakel1.y = obstakel1.y + 4;
if (obstacle1.y> 600) {
obstakel1.y = 0;
obstacle1.x = Phaser. Wiskunde. Tussen (0, 600);
}
obstakel2.x = obstakel2.x + 4;
if (obstacle2.x> 600) {
obstacle2.x = 0;
obstacle2.y = Phaser. Wiskunde. Tussen (0, 600);
}

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

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-fysica-bibliotheek heeft een collider-detector. Het enige wat we hoeven te doen is het 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 collider-methode vereist drie parameters. De eerste twee parameters geven aan welke objecten botsen. Dus hierboven hebben we twee colliders opgesteld. De eerste detecteert wanneer het spelstuk botst met obstakel1 en de tweede botser zoekt naar botsingen tussen het spelstuk en obstakel2.

De derde parameter vertelt de botser wat hij moet doen als hij een botsing detecteert. In dit voorbeeld is er een functie. Bij een botsing worden alle spelelementen vernietigd; dit stopt het spel. Nu speelt de speler het spel als ze een obstakel raken.

Probeer game-ontwikkeling eens uit met Phaser

Er zijn veel verschillende manieren waarop dit spel kan worden verbeterd en ingewikkelder gemaakt. We hebben maar één speler gemaakt, maar een tweede speelbaar personage kan worden toegevoegd en bediend met de "awsd" -besturing. Evenzo zou je kunnen experimenteren door meer obstakels toe te voegen en de snelheid van hun bewegingen te variëren.

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 te beginnen met het ontwerpen van 2D-spellen. Ga door met het bouwen van deze code en verfijn je spel.

Als u fouten tegenkomt, is uw browser-debugger een uitstekende manier om het probleem te ontdekken.

Chrome DevTools gebruiken om websiteproblemen op te lossen

Lees hoe u de ingebouwde ontwikkeltools van de Chrome-browser gebruikt om uw websites te verbeteren.

Over de auteur