Første trin til spiludvikling med Phaser

Ankomsten af HTML5 Det ændrede den måde, vi ser internettet på, ikke bare har det givet os bedre værktøjer til deres udvikling, men det har også åbnet mulighederne for os til at udvikle applikationer, der går længere, som i tilfælde af videospil.
Fordelen ved at lave et videospil i HTML5 det er, at det er kompatibelt med stort set enhver enhed, der har en browser, og hvad der er endnu bedre uden at skulle downloade eller foretage yderligere installationer.
Takket være denne nye popularitet er rammer for udvikling af videospil blevet flere, hver med sine egenskaber og fordele, denne gang vil vi koncentrere os om Phaser, årsagerne er flere, og vi kan se dem på følgende liste:

• Det har et fantastisk fællesskab og er aktivt.
• Det opdateres med jævne mellemrum.
• Det er gratis at bruge.
• Det har fysikværktøjer, der gør livet lettere for os.

Så da vi ser, at det har nogle interessante fordele, vil vi installere det, men lad os først se nogle krav, som rammen kræver.
1- Vi har brug for internetadgang for at kunne downloade alle de ressourcer, der opstår under installationen af ​​rammen, inklusive denne.
2- Vi skal have installeret eller være i stand til at installere en webserver af stilen LAMPE eller WAMP eller MAMP afhængigt af vores operativsystem, dette fordi Phaser bruger HTML5 og også JavaScript På grund af sikkerhedsforanstaltninger accepterer vores browser derfor ikke lokale henrettelser.
3- Vi har brug for tilladelser for at få adgang til de nødvendige mapper og tjenester, der er angivet under installationen af ​​rammen.
4- Vi har brug for en browser, der er kompatibel med HTML5 og at den har fejlfindingsværktøjer, i tilfælde af denne tutorial vil vi bruge Firefox Developer Edition i sin seneste version i øjeblikket, men de kan frit vælge den, der synes bedst for dem.
5- Endelig har vi brug for en tekstredigerer for at kunne skrive koden til eksemplerne, da det altid kan være hvad vi har, selvom vi anbefaler Sublim tekst o NotePad ++ på grund af det store antal plugins, der begge har, der gør vores liv som udviklere lettere.
Den første ting vi vil gøre for at kunne installere Phaser er at gå til dets officielle websted, og her finder vi flere ressourcer, men for nu vil vi gå til det afsnit, der siger Hent:

FORSTØRRE

Vi har flere muligheder for at downloade, de to, vi kan bruge, er at downloade den komprimerede .zip eller .tar.gz, vi kan også lave en klon fra Github af projektet, i vores tilfælde vil vi downloade projektet i .zip for at fremskynde processen. Når vi har downloadet eller klonet projektet, er de vigtigste mapper følgende:
docs / index.htmlHer har vi adgang til offline og officiel dokumentation af den version, som vi lige har downloadet, det kan hjælpe os med at gennemgå nogle detaljer, selvom hvis vi har mulighed for at gå til internettet og dokumentere os selv, vil vi altid have bedre muligheder.
build / phaser.min.jsDette er vores ramme som sådan, det er det formindskede og komprimerede bibliotek, der indeholder alle de værktøjer, vi skal bruge for at starte vores første projekter.
Da vi har downloadet projektet, for at kontrollere, at alt er korrekt, skal vi simpelthen kopiere den udpakkede mappe, hvor vi kan få adgang til det med vores webserver, generelt er det biblioteket www eller public_html, det hele afhænger virkelig af vores miljø.
Når vi er der, skal vi gå til vores browser og køre vores localhost / phaser eller det navn, vi har placeret, og vi vil se listen over filer, her skal vi navigere til følgende mappe: resources / tutorials / 01 Kom godt i gang / hellophaser / index.html og vi kan sætte pris på, hvad vi ser i følgende skærmbillede:

FORSTØRRE

Vores første spilDa vi har verificeret, at vores miljø fungerer perfekt, er det tid til at lave vores første spil, for dette skal vi etablere et opnåeligt mål for vores niveau på dette tidspunkt, hvor vi i slutningen af ​​eksemplet skal kunne vise et Sprite på skærmen.
I den mappe, hvor vi har rammerne på vores webserver, skal vi oprette en ny mappe, i dette tilfælde vil vi kalde det phaser-eksempel, indeni skal vi placere filen phaser.min.js ved roden af ​​det, vil vi oprette en fil kaldet index.html og en anden fil kaldet main.js, skal vi også placere et billede kaldet logo.png.webp som vil være den sprite, som vi vil vise, som kan findes i rammens ressourcer, og dette kan være en anbefalet størrelse på 180 x 64 pixels. I sidste ende skal vores bibliotek se sådan ud:

Da vi har vores struktur etableret nu, skal vi begynde at skrive koden til vores første projekt, for det vi skal gøre er at åbne vores fil index.html og der vil vi inkludere filerne .js som vi har oprettet, udover at skabe en som vil have ordet som identifikator gameDiv. Lad os se, hvordan vores kode ser ud:

 Vores første spil på Phaser
Vores første spil =)

Dette vil være grundlaget for vores spil, der understøttes, så brugeren kan se indholdet. Det næste trin i opbygningen af ​​vores første spil er at skrive koden til main.js, som håndterer al vores logik og indeholder tre nøglemetoder, lad os se:
forudindlæsningDenne metode er ansvarlig for forudindlæsning af alle de ressourcer, vores spil har brug for, det være sig billeder, lyd, videoer osv. Det kører altid ved opstart.
skabDenne metode kører, når den er færdig forudindlæsning og dens funktion er at inkorporere de indlæste ressourcer i vores spil, udover at give os mulighed for at etablere den første opsætning af det.
opdateringEndelig kører denne metode 60 gange i sekundet og indeholder den sande logik i vores spil, det er det, der giver os bevægelsen så at sige.
Som vi kan se, er hver af disse metoder ansvarlig for en tilstand i spillet, de to første er før spillets start, mens opdatering sker under udførelsen. Når vi har defineret, hvad hver metode gør, skal vi kun se den kode, vi har brug for:

 var mainState = {preload: function () {// Vi indlæser billedet game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Vi viser vores billede i spillet this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// vi ændrer vinklen med en enhed 60 gange i sekundet // dette giver os en billedrotationseffekt this.sprite.angle + = 1; }}; // her starter vi vores spil og sætter det // til at bruge det div gameDiv, som vi lagde i vores HTMLvar -spil = nyt Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. tilføj ('main', mainState); game.state.start ('main');

Som vi kan se i slutningen af ​​metoderne opretter vi en variabel kaldet spil og i dette udfører vi et eksempel på Phaser.Game hvor vi passerer nogle parametre, er det i øjeblikket ikke nødvendigt at vide meget om dem, vi kopierer dem simpelthen, som vi ser dem. Men nogenlunde dette er den del, hvor vi fortæller vores ansøgning at kigge efter Phaser så det fortæller dig, hvad du skal gøre med de metoder, vi skabte ovenfor og til sidst med game.state.start er det, hvor vi fortæller rammen om at starte vores spil.
Hvis alt er gået godt, vil vi køre vores projekt i browseren, og vi skulle se det valgte billede rotere på skærmen:

I tilfælde af dette eksempel har vi brugt et billede, der ligger inden for ressourcerne til PhaserDet er imidlertid ikke virkelig et krav, med ethvert billede kunne vi opnå de samme resultater. En anden ting, som vi kan bemærke i vores eksempel, er, at nedenfor har vi browser -fejlfindingskonsollen åben, dette værktøj er den bedste ven, vi vil have, da det er her, vi kan fejlsøge de forskellige fejl, vi kan finde, når vi udvikler vores spil.
Med dette har vi afsluttet denne vejledning, vi har installeret med succes Phaser, vi har kendt nogle af de indledende egenskaber ved denne store ramme, og med dette har vi skabt en lille applikation eller et spil. Det er vigtigt at tage denne vejledning som udgangspunkt for at lave lidt mere dybdegående research om Phaser, da dette ikke engang er 1% af alt, hvad det tilbyder os, er det dog et første skridt, der så ofte koster os at tage.