Första steget till spelutveckling med Phaser

Ankomsten av HTML5 Det förändrade hur vi ser på webben, inte bara har det gett oss bättre verktyg för deras utveckling, det har också öppnat möjligheterna för oss att utveckla applikationer som går längre, som i fallet med videospel.
Fördelen med att göra ett videospel i HTML5 det är att det är kompatibelt med praktiskt taget alla enheter som har en webbläsare och vad som är ännu bättre utan att behöva ladda ner eller göra ytterligare installationer.
Tack vare denna nya popularitet har ramarna för utveckling av videospel spridits, var och en med sina egenskaper och fördelar, den här gången ska vi koncentrera oss på Phaser, anledningarna är flera och vi kan se dem i följande lista:

• Det har en stor gemenskap och är aktiv.
• Den uppdateras regelbundet.
• Det är gratis att använda.
• Den har fysikverktyg som gör livet enklare för oss.

Så eftersom vi ser att det har några intressanta fördelar, kommer vi att installera det, men låt oss först se några krav som ramverket kräver.
1- Vi behöver internetåtkomst för att kunna ladda ner alla resurser som uppstår under installationen av ramverket, inklusive den här.
2- Vi måste ha installerat eller kunna installera en webbserver av stilen LAMPA eller WAMP eller MAMP beroende på vårt operativsystem, detta eftersom Phaser användningsområden HTML5 och även JavaScript På grund av säkerhetsåtgärder accepterar vår webbläsare därför inte lokala avrättningar.
3- Vi behöver behörigheter för att komma åt nödvändiga mappar och tjänster som ställs in under installationen av ramverket.
4- Vi behöver en webbläsare som är kompatibel med HTML5 och att den har felsökningsverktyg, i fallet med denna handledning kommer vi att använda Firefox Developer Edition i sin senaste version för närvarande, men de är fria att välja den som verkar bäst för dem.
5- Slutligen behöver vi en textredigerare för att kunna skriva koden för exemplen, eftersom det alltid kan vara vad vi än har, även om vi rekommenderar Sublim text o NotePad ++ på grund av det stora antalet plugins som båda har som gör våra liv som utvecklare enklare.
Det första vi kommer att göra för att kunna installera Phaser är att gå till dess officiella hemsida och här hittar vi flera resurser, men för närvarande kommer vi att gå till avsnittet som säger Ladda ner:

FÖRSTORA

Vi har flera alternativ att ladda ner, de två som vi kan använda är att ladda ner den komprimerade .zip eller .tar.gz, vi kan också göra en klon från Github av projektet, i vårt fall kommer vi att ladda ner projektet i .zip för att påskynda processen. När vi har laddat ner eller klonat projektet är de viktigaste katalogerna följande:
docs / index.htmlHär har vi inträdet till offline och officiell dokumentation av den version som vi just laddade ner, det kan hjälpa oss att granska några detaljer, men om vi har möjlighet att gå till Internet och dokumentera oss själva, kommer vi alltid att ha bättre alternativ.
build / phaser.min.jsDetta är vårt ramverk som sådant, det är det förminskade och komprimerade biblioteket som innehåller alla verktyg som vi kommer att behöva för att starta våra första projekt.
Eftersom vi har laddat ner projektet, för att verifiera att allt är korrekt måste vi helt enkelt kopiera den uppackade mappen där vi kan komma åt den med vår webbserver, i allmänhet är det katalogen www eller public_html, allt beror verkligen på vår miljö.
Väl där måste vi gå till vår webbläsare och köra vår localhost / phaser eller namnet som vi har placerat och vi kommer att se listan över filer, här måste vi navigera till följande mapp: resurser / självstudier / 01 Komma igång / hellophaser / index.html och vi kan uppskatta det vi ser i följande skärmdump:

FÖRSTORA

Vårt första spelEftersom vi har verifierat att vår miljö fungerar perfekt är det dags att göra vårt första spel, för detta kommer vi att uppnå ett uppnåeligt mål för vår nivå vid denna tidpunkt, där vi i slutet av exemplet måste kunna visa en Sprite på skärm.
I den mapp som vi har ramarna på vår webbserver ska vi skapa en ny mapp, i det här fallet kommer vi att kalla det phaser-exempel, inuti ska vi placera filen phaser.min.js vid roten till det skapar vi en fil som heter index.html och en annan fil som heter main.js, måste vi också placera en bild som heter logo.png.webp vilket blir spriten som vi kommer att visa, som finns i ramresurserna och detta kan vara en rekommenderad storlek på 180 x 64 pixlar. I slutändan bör vår katalog se ut så här:

Eftersom vi har vår struktur etablerad nu måste vi börja skriva koden för vårt första projekt, för det vi måste göra är att öppna vår fil index.html och där kommer vi att inkludera filerna .js som vi har skapat, förutom att skapa en som kommer att ha ordet som identifierare gameDiv. Låt oss se hur vår kod ser ut:

 Vårt första spel på Phaser
Vårt första spel =)

Detta kommer att ligga till grund för vårt spel kommer att stödjas så att användaren kan se innehållet. Nästa steg i att bygga vårt första spel är att skriva koden för main.js, som kommer att hantera all logik i vårt spel och innehåller tre viktiga metoder, låt oss se:
förspänningDenna metod är ansvarig för att ladda om alla resurser som vårt spel behöver, vare sig det är bilder, ljud, videor etc. Den körs alltid vid start.
skapaDenna metod körs när den är klar förspänning och dess funktion är att införliva de laddade resurserna i vårt spel, förutom att ge oss möjligheten att etablera den första konfigurationen av det.
uppdateringSlutligen körs denna metod 60 gånger per sekund och innehåller den sanna logiken i vårt spel, det är det som ger oss rörelsen så att säga.
Som vi kan se är var och en av dessa metoder ansvariga för spelets tillstånd, de två första är innan spelet startar, medan uppdatering inträffar under körningen. När vi har definierat vad varje metod gör behöver vi bara se koden vi behöver:

 var mainState = {preload: function () {// Vi laddar bilden game.load.image ('logo', 'logo.png.webp'); }, skapa: function () {// Vi visar vår bild i spelet this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// vi ändrar vinkeln med en enhet 60 gånger per sekund // detta ger oss en bildrotationseffekt this.sprite.angle + = 1; }}; // här startar vi vårt spel och ställer in // för att använda div gameDiv som vi lägger i vårt HTMLvar -spel = nya Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Som vi kan se i slutet av metoderna skapar vi en variabel som kallas spel och i detta kör vi en instans av Phaser.Game där vi passerar några parametrar, för närvarande är det inte nödvändigt att veta mycket om dem, vi kopierar dem helt enkelt som vi ser dem. Men ungefär detta är den del där vi säger till vår ansökan att leta efter Phaser så att den berättar vad du ska göra med metoderna vi skapade ovan och i slutet med game.state.start det är där vi säger till ramarna för att börja vårt spel.
Om allt har gått bra ska vi köra vårt projekt i webbläsaren och vi bör se den valda bilden rotera på skärmen:

I det här exemplet har vi använt en bild som faller inom resurserna för PhaserDet är dock inte ett krav, med någon bild kan vi uppnå samma resultat. En annan sak som vi kan märka i vårt exempel är att nedanför har vi webbläsarfelsökningskonsolen öppen, det här verktyget är den bästa vännen vi kommer att ha eftersom det är där vi kan felsöka de olika felen som vi kan hitta när vi utvecklar våra spel.
Med detta har vi avslutat den här självstudien, vi har framgångsrikt installerat Phaser, vi har känt till några av de första egenskaperna hos denna fantastiska ram och med detta har vi skapat en liten applikation eller ett spel. Det är viktigt att ta denna handledning som utgångspunkt för att göra lite mer fördjupad forskning om Phaser, eftersom detta inte ens är 1% av allt det erbjuder oss, är det dock ett första steg som så ofta kostar oss att ta.