Første trinn til spillutvikling med Phaser

Ankomsten til HTML5 Det endret måten vi ser på nettet, ikke bare har det gitt oss bedre verktøy for deres utvikling, men det har også åpnet mulighetene for oss til å utvikle applikasjoner som går lenger, som for videospill.
Fordelen med å lage et videospill i HTML5 det er at det er kompatibelt med praktisk talt alle enheter som har en nettleser og det som er enda bedre uten å måtte laste ned eller gjøre ytterligere installasjoner.
Takket være denne nye populariteten har rammer for utvikling av videospill spredt seg, hver med sine egenskaper og fordeler, denne gangen skal vi konsentrere oss om Phaser, årsakene er flere, og vi kan se dem i følgende liste:

• Det har et flott fellesskap og er aktivt.
• Den oppdateres med jevne mellomrom.
• Det er gratis å bruke.
• Den har fysikkverktøy som gjør livet lettere for oss.

Så siden vi ser at det har noen interessante fordeler, skal vi installere det, men la oss først se noen krav som rammeverket krever.
1- Vi trenger internettilgang for å kunne laste ned alle ressursene som oppstår under installasjonen av rammeverket, inkludert denne.
2- Vi må ha installert eller kunne installere en webserver av stilen LAMPE eller WAMP eller MAMP avhengig av operativsystemet vårt, dette fordi Phaser bruker HTML5 og også JavaScript På grunn av sikkerhetstiltak godtar derfor ikke nettleseren vår lokale henrettelser.
3- Vi trenger tillatelser for å få tilgang til de nødvendige mappene og tjenestene som er angitt under installasjonen av rammeverket.
4- Vi trenger en nettleser som er kompatibel med HTML5 og at den har feilsøkingsverktøy, i tilfelle av denne opplæringen vil vi bruke Firefox Developer Edition i sin siste versjon for øyeblikket, men de står fritt til å velge den som synes best for dem.
5- Til slutt trenger vi et tekstredigeringsprogram for å kunne skrive koden for eksemplene, ettersom det alltid kan være det vi har, selv om vi anbefaler Sublim tekst o NotePad ++ på grunn av det store antallet plugins som begge har som gjør livet vårt som utviklere lettere.
Det første vi skal gjøre for å kunne installere Phaser er å gå til det offisielle nettstedet, og her vil vi finne flere ressurser, men for nå vil vi gå til delen som sier nedlasting:

FORSTØRRE

Vi har flere alternativer å laste ned, de to vi kan bruke er å laste ned den komprimerte .zip eller .tar.gz, vi kan også lage en klon fra Github av prosjektet, i vårt tilfelle vil vi laste ned prosjektet i .zip for å fremskynde prosessen. Når vi har lastet ned eller klonet prosjektet, er de viktigste katalogene følgende:
docs / index.htmlHer har vi oppføringen til offline og offisiell dokumentasjon av versjonen som vi nettopp lastet ned, det kan hjelpe oss å gå gjennom noen detaljer, selv om vi har muligheten til å gå til Internett og dokumentere oss selv, vil vi alltid ha bedre alternativer.
build / phaser.min.jsDette er vårt rammeverk som sådan, det er det minifiserte og komprimerte biblioteket som inneholder alle verktøyene vi trenger for å starte våre første prosjekter.
Siden vi har lastet ned prosjektet, for å bekrefte at alt er riktig, må vi ganske enkelt kopiere den utpakkede mappen der vi kan få tilgang til den med vår webserver, vanligvis er det katalogen www eller offentlig_html, alt avhenger virkelig av miljøet vårt.
Når vi er der må vi gå til nettleseren vår og kjøre vår localhost / phaser eller navnet vi har plassert, og vi vil se listen over filer, her må vi navigere til følgende mappe: resources / tutorials / 01 Komme i gang / hellophaser / index.html og vi kan sette pris på det vi ser på følgende skjermbilde:

FORSTØRRE

Vår første kampSiden vi har bekreftet at miljøet vårt fungerer perfekt, er det på tide å lage vårt første spill, for dette skal vi etablere et oppnåelig mål for vårt nivå på dette tidspunktet, hvor vi på slutten av eksemplet må kunne vise et Sprite på skjermen.
I mappen som vi har rammeverket på vår webserver skal vi lage en ny mappe, i dette tilfellet vil vi kalle det phaser-eksempel, inne skal vi plassere filen phaser.min.js ved roten til det, vil vi lage en fil som heter index.html og en annen fil som heter main.js, må vi også plassere et bilde som heter logo.png.webp som vil være spriten som vi vil vise, som finnes i rammeverket, og dette kan være en anbefalt størrelse på 180 x 64 piksler. Til slutt bør katalogen vår se slik ut:

Siden vi har etablert strukturen vår nå, må vi begynne å skrive koden for vårt første prosjekt, for dette må vi åpne filen index.html og der skal vi inkludere filene .js som vi har laget, i tillegg til å lage en som vil ha ordet som identifikator gameDiv. La oss se hvordan koden vår ser ut:

 Vårt første spill på Phaser
Vårt første spill =)

Dette vil være grunnlaget for spillet vårt, slik at brukeren kan se innholdet. Det neste trinnet i å bygge vårt første spill er å skrive koden for main.js, som vil håndtere all logikk i spillet vårt og inneholder tre viktige metoder, la oss se:
forhåndslastDenne metoden er ansvarlig for forhåndsinnlasting av alle ressursene som spillet vårt trenger, det være seg bilder, lyd, videoer, etc. Den kjører alltid ved oppstart.
skapeDenne metoden kjøres etter at den er ferdig forhåndslast og dens funksjon er å inkorporere de lastede ressursene i spillet vårt, i tillegg til å gi oss muligheten til å etablere det første oppsettet av det.
OppdaterTil slutt kjører denne metoden 60 ganger per sekund og inneholder den sanne logikken i spillet vårt, det er det som gir oss bevegelsen så å si.
Som vi kan se, er hver av disse metodene ansvarlig for en tilstand av spillet, de to første er før starten av spillet, mens Oppdater skjer under henrettelsen. Når vi har definert hva hver metode gjør, trenger vi bare å se koden vi trenger:

 var mainState = {preload: function () {// Vi laster inn bildet game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Vi viser bildet vårt i spillet this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// vi endrer vinkelen med en enhet 60 ganger i sekundet // dette vil gi oss en bilderotasjonseffekt this.sprite.angle + = 1; }}; // her starter vi spillet vårt og setter det // til å bruke div gameDiv som vi legger i vårt HTMLvar -spill = nytt Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Som vi kan se på slutten av metodene lager vi en variabel som kalles spill og i dette utfører vi en forekomst av Phaser.Game der vi passerer noen parametere, er det for øyeblikket ikke nødvendig å vite så mye om dem, vi kopierer dem ganske enkelt som vi ser dem. Men grovt sett er dette delen der vi forteller søknaden vår å se etter Phaser slik at den forteller deg hva du skal gjøre med metodene vi opprettet ovenfor og til slutt med game.state.start Det er her vi forteller rammene for å starte spillet vårt.
Hvis alt har gått bra, skal vi kjøre prosjektet vårt i nettleseren, og vi bør se det valgte bildet rotere på skjermen:

I dette eksemplet har vi brukt et bilde som faller innenfor ressursene til PhaserImidlertid er det egentlig ikke et krav, med et hvilket som helst bilde kan vi oppnå de samme resultatene. En annen ting vi kan legge merke til i vårt eksempel er at nedenfor har vi nettleserens feilsøkingskonsoll åpen, dette verktøyet er den beste vennen vi vil ha siden det er der vi kan feilsøke de forskjellige feilene vi kan finne når vi utvikler spillene våre.
Med dette har vi fullført denne opplæringen, vi har installert Phaser, vi har kjent noen av de første egenskapene til dette flotte rammeverket, og med dette har vi laget en liten applikasjon eller et spill. Det er viktig å ta denne opplæringen som et utgangspunkt for å gjøre litt mer grundig forskning på Phaser, siden dette ikke engang er 1% av alt det tilbyr oss, men det er et første skritt som så ofte koster oss å ta.