Eerste stappen naar game-ontwikkeling met Phaser

De aankomst van HTML5 Het veranderde de manier waarop we het web zien, het heeft ons niet alleen betere hulpmiddelen gegeven voor hun ontwikkeling, maar het heeft ons ook de mogelijkheid geboden om toepassingen te ontwikkelen die verder gaan, zoals in het geval van videogames.
Het voordeel van het maken van een videogame in HTML5 het is dat het compatibel is met vrijwel elk apparaat met een browser en wat nog beter is zonder de noodzaak om te downloaden of extra installaties uit te voeren.
Dankzij deze nieuwe populariteit zijn er steeds meer frameworks voor het ontwikkelen van videogames, elk met zijn kenmerken en voordelen, deze keer gaan we ons concentreren op Phaser, de redenen zijn verschillende en we kunnen ze zien in de volgende lijst:

• Het heeft een geweldige community en is actief.
• Het wordt periodiek bijgewerkt.
• Het is gratis te gebruiken.
• Het heeft natuurkundige hulpmiddelen die het leven voor ons gemakkelijker maken.

Dus, omdat we zien dat het een aantal interessante voordelen heeft, gaan we het installeren, maar laten we eerst eens kijken naar enkele vereisten die het raamwerk vereist.
1- We hebben internettoegang nodig om alle bronnen te kunnen downloaden die ontstaan ​​tijdens de installatie van het framework, inclusief deze.
2- We moeten een webserver van de stijl hebben geïnstalleerd of kunnen installeren LAMP of WAMP of MAMP afhankelijk van ons besturingssysteem, dit omdat: Phaser toepassingen HTML5 en ook JavaScript Daarom accepteert onze browser vanwege beveiligingsmaatregelen geen lokale uitvoeringen.
3- We hebben machtigingen nodig om toegang te krijgen tot de benodigde mappen en services die zijn ingesteld tijdens de installatie van het framework.
4- We hebben een browser nodig die compatibel is met: HTML5 en dat het debug-tools heeft, in het geval van deze tutorial zullen we gebruiken Firefox-ontwikkelaarseditie in de nieuwste versie op dit moment, maar ze zijn vrij om degene te kiezen die hen het beste lijkt.
5- Ten slotte hebben we een teksteditor nodig om de code voor de voorbeelden te kunnen schrijven, omdat het altijd kan zijn wat we hebben, hoewel we aanbevelen Sublieme tekst o NotePad ++ vanwege het grote aantal plug-ins die beide hebben die ons leven als ontwikkelaars gemakkelijker maken.
Het eerste wat we zullen doen om te kunnen installeren Phaser is om naar de officiële website te gaan en hier zullen we verschillende bronnen vinden, maar voor nu gaan we naar de sectie die zegt: Downloaden:

VERGROTEN

We hebben verschillende opties om te downloaden, de twee die we kunnen gebruiken zijn om de gecomprimeerde .zip of .tar.gz te downloaden, we kunnen ook een kloon maken van Github van het project, in ons geval zullen we het project downloaden in .zip om het proces te versnellen. Nadat we het project hebben gedownload of gekloond, zijn de belangrijkste mappen de volgende:
docs / index.htmlHier hebben we de toegang tot de offline en officiële documentatie van de versie die we zojuist hebben gedownload, het kan ons helpen om enkele details te bekijken, hoewel als we de mogelijkheid hebben om naar internet te gaan en onszelf te documenteren, we altijd betere opties zullen hebben.
build / phaser.min.jsDit is ons raamwerk als zodanig, het is de verkleinde en gecomprimeerde bibliotheek die alle tools bevat die we nodig hebben om onze eerste projecten te starten.
Aangezien we het project hebben gedownload, om te controleren of alles correct is, moeten we gewoon de uitgepakte map kopiëren waar we toegang toe hebben met onze webserver, over het algemeen is dit de map www of public_html, het hangt allemaal echt af van onze omgeving.
Eenmaal daar moeten we naar onze browser gaan en onze localhost / phaser of de naam die we hebben geplaatst en we zullen de lijst met bestanden zien, hier moeten we naar de volgende map navigeren: bronnen / tutorials / 01 Aan de slag / hellophaser / index.html en we kunnen waarderen wat we zien in de volgende schermafbeelding:

VERGROTEN

Onze eerste wedstrijdAangezien we hebben geverifieerd dat onze omgeving perfect werkt, is het tijd om onze eerste game te maken, hiervoor gaan we een haalbaar doel stellen voor ons niveau op dit moment, waarbij we aan het einde van het voorbeeld een Sprite op het scherm.
In de map waarin we het framework op onze webserver hebben, gaan we een nieuwe map maken, in dit geval noemen we het phaser-voorbeeld, binnen gaan we het bestand plaatsen phaser.min.js in de root ervan, zullen we een bestand maken met de naam index.html en een ander bestand genaamd main.js, we moeten ook een afbeelding plaatsen met de naam logo.png.webp wat de sprite zal zijn die we zullen laten zien, die te vinden is in de framework-bronnen en dit kan een aanbevolen grootte zijn van 180 bij 64 pixels. Uiteindelijk zou onze directory er als volgt uit moeten zien:

Aangezien we onze structuur nu hebben vastgesteld, moeten we beginnen met het schrijven van de code voor ons eerste project, hiervoor moeten we ons bestand openen index.html en daar gaan we de bestanden opnemen .js die we hebben gemaakt, naast het maken van een die als identifier het woord . zal hebben spelDiv. Laten we eens kijken hoe onze code eruit ziet:

 Onze eerste game op Phaser
Ons eerste spel =)

Dit zal de basis zijn waarop onze game zal worden ondersteund, zodat de gebruiker de inhoud kan bekijken. De volgende stap bij het bouwen van onze eerste game is het schrijven van de code voor main.js, die alle logica van ons spel aankan en drie belangrijke methoden bevat, laten we eens kijken:
voorladenDeze methode is verantwoordelijk voor het vooraf laden van alle bronnen die onze game nodig heeft, of het nu afbeeldingen, audio, video's, enz. Het draait altijd bij het opstarten.
creërenDeze methode wordt uitgevoerd nadat deze is voltooid voorladen en zijn functie is om de geladen bronnen in ons spel op te nemen, naast ons de mogelijkheid te geven om de initiële opzet ervan te maken.
bijwerkenTen slotte wordt deze methode 60 keer per seconde uitgevoerd en bevat de ware logica van ons spel, het is wat ons de beweging geeft om zo te zeggen.
Zoals we kunnen zien, heeft elk van deze methoden de leiding over een staat van het spel, de eerste twee zijn vóór het begin van het spel, terwijl de bijwerken gebeurt tijdens de uitvoering. Zodra we hebben gedefinieerd wat elke methode doet, hoeven we alleen de code te zien die we nodig hebben:

 var mainState = {preload: function () {// We laden de afbeelding game.load.image ('logo', 'logo.png.webp'); }, create: function () {// We tonen onze afbeelding in het spel this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// we veranderen de hoek 60 keer per seconde met één eenheid // dit geeft ons een beeldrotatie-effect this.sprite.angle + = 1; }}; // hier starten we ons spel en stellen het in // om de div gameDiv te gebruiken die we in onze HTMLvar-game hebben geplaatst = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Zoals we aan het einde van de methoden kunnen zien, maken we een variabele met de naam spel en hierin voeren we een instantie uit van Phaser.Game waar we enkele parameters doorgeven, is het op dit moment niet nodig om er veel over te weten, we kopiëren ze gewoon zoals we ze zien. Maar ongeveer dit is het deel waar we onze applicatie vertellen om naar te zoeken Phaser zodat het u vertelt wat u moet doen met de methoden die we hierboven hebben gemaakt en aan het einde met game.state.start is waar we het raamwerk vertellen om ons spel te starten.
Als alles goed is gegaan, gaan we ons project in de browser uitvoeren en zouden we de geselecteerde afbeelding op het scherm moeten zien draaien:

In het geval van dit voorbeeld hebben we een afbeelding gebruikt die binnen de bronnen van . valt PhaserHet is echter niet echt een vereiste, met elke afbeelding zouden we dezelfde resultaten kunnen bereiken. Een ander ding dat we in ons voorbeeld kunnen opmerken, is dat we hieronder de browserfoutopsporingsconsole hebben geopend, deze tool is de beste vriend die we zullen hebben, want daar kunnen we de verschillende fouten opsporen die we kunnen tegenkomen bij het ontwikkelen van onze games.
Hiermee hebben we deze tutorial voltooid, we hebben met succes geïnstalleerd Phaser, we kennen enkele van de eerste kenmerken van dit geweldige framework en hiermee hebben we een kleine applicatie of game gemaakt. Het is belangrijk om deze tutorial als uitgangspunt te nemen om wat meer diepgaand onderzoek te doen naar: Phaser, aangezien dit nog niet eens 1% is van alles wat het ons biedt, maar het is een eerste stap die ons zo vaak kost.