Share
Phaser er et open source HTML5-spill rammeverk laget av Photon Storm. Den er designet for å lage spill som vil kjøre på desktop og mobile nettlesere. Det ble lagt stor vekt på ytelse inne i mobile nettlesere, et voksende og viktig område for webspill. Hvis enheten er i stand, bruker den WebGL for gjengivelse, men ellers går den sømløst tilbake til lerret. I denne artikkelen vil jeg dekke ressurser for å lære Phaser, i tillegg til å vise hva det kan gjøre og noen av tankene som gikk inn i designen.
Det er rimelig å si at det føles som om et nytt HTML5-spillramme er utgitt hver uke, slik er spredning av dem. Så hvorfor skal du selv vurdere Phaser blant det store valget der ute? Jeg liker å tro at årsaken er noe å gjøre med arven til teamet som er involvert i å bygge den.
Vi hos Photon Storm dedikert oss til å utvikle noe annet enn HTML5-spill for flere år siden, tilbake da det virkelig ikke var mye rammeverkvalg, og du kunne telle antall HTML5-spill-devs i enkelt siffer. Når du går inn i rommet så tidlig, og kommer fra Flash, følte vi øyeblikkelig behovet for å bygge verktøy som vi var vant til i AS3.
Vi hadde vært gode fans av Flixel og hatt glede både med våre egne spill og med Flixel Power Tools. Det var en ekte buzz å se andre devs bruke dem til å hjelpe med å få sine spill utgitt, og dette var noe vi ønsket å duplisere i HTML5.
Det vi ikke var forberedt på var imidlertid hvor raskt HTML5-landskapet endret seg. Selv i dag har jeg et lysbilde i mine presentasjoner som jeg viser på konferanser som sier "Vær forberedt på å unlearn hva du vet hvert halvår", og jeg tror at dette fortsatt er sant. Nettleserselgere er iterating og forbedring til en fenomenal hastighet akkurat nå. Det tar bare noen uker for nye funksjoner å boble gjennom til publikum, og hvis du er saddled med et spillramme som opprettholdes i løpet av fritiden eller har en sakte utgivelsesperiode, tar det ikke lang tid før ting er svært utdatert.
Et annet tegn på denne forandringen var i de typer klientarbeid vi ble pålagt å bygge. Som et selskap gjør vi bare to ting: Bygg HTML5-spill, og bygg Phaser. Vi har laget HTML5-spill for noen av verdens største underholdningsmerker, og det har gitt oss et godt innblikk i hva slags krav de krever. Det største området vi ble bedt om å jobbe med var spill som kjørte inne i mobilbrowseren. så mange HTML5-rammer er fokusert på skrivebordet, hvor ytelsen er rikelig og tilkoblinger raske og stabile, og ignorerer den mobile nettleserens side av livet. Likevel er det fortsatt hvor kundenes etterspørsel er sterkest. Så det var viktig at Phaser kunne brukes til å bygge våre klientspill, uavhengig av plattform.
Siden utgivelsen av Phaser 1.0 har oppdateringer vært vanlige og omfattende, med mange nye funksjoner og reparasjoner på plass raskt. Vi jobber med en turnaround på omtrent en måned fra dev til master-du kan se en komplett changelog på GitHub. Interessant, vi ser nå etterspørsel etter spill som kjører inne i en WebView, så vi vil sikre at Phaser fungerer godt i dette miljøet, går inn i 2014.
I tillegg til å holde Phaser oppdatert, var det også avgjørende for oss at vi bygget noe som var egentlig lett å bruke. Og du vil se dette reflektert over hele rammen. Dette stammer fra vår erfaring med Flixel Power Tools, og utover det da jeg pleide å jobbe for The Game Creators som bidrar til å definere formen på deres språket. Jeg antar at det alltid har vært en del av meg at jeg ønsket å gjøre spillutvikling så lett som mulig for utviklere, en trend jeg vil fortsette som Phaser utvikler seg.
Jeg beklager på forhånd om noen av følgende (eller over!) Høres litt 'markedsføring'. Phaser er et gratis produkt, vi tjener ingen penger fra deg, og hvis jeg forrømmer det, er det bare fordi jeg er lidenskapelig om hva jeg har laget. Så vær så snill å bære med meg!
Phaser er et JavaScript-bibliotek designet for å kjøre på alle de store nettleserne. Dette inkluderer Internet Explorer 9 og nyere, Firefox, Chrome og Safari. Før IE9 støttet det ikke lerret, så hvis du absolutt trenger et rammeverk som kan håndtere DOM-rendering, vil Phaser ikke være egnet. Men etterspørselen etter disse typer spill blir ved siden av minimal; Om noe, skifter den motsatt retning (mot WebGL).
På mobilen kjører Phaser på iOS5 og over innsiden av Mobile Safari. På Android kjører den i 2.2 og nyere i både nettleseren og i Chrome. Chrome er nå den vanlige Android-nettleseren, med nyere versjoner som selv støtter WebGL, men du kan fortsatt ikke ignorere de millioner av arv Android-enheter som fortsatt er i bruk.
Takket være Mozilla mottok vi en rekke FFOS-testenheter, og har begynt å sikre at Phaser går bra på dem. Så langt ser det bra ut, og vi skal produsere distribusjons guider i det nye året.
Vi har også sett Phaser-spill som kjører bra på Tizen-enheter og feilfritt under Kindle HTML5-wrapper, noe som betyr at du kan distribuere til disse enhetene "ute av boksen". Siden flere nettdrevne telefoner begynner å komme inn i markedet, vil vi sørge for at Phaser oppdateres for dem.
Det er et så stort utvalg av gode spillutviklingspakker som har som mål å opprette innfødte apps (Unity, Corona, Loom osv.), At det ikke var et område vi ønsket å bruke mye innsats på, først og fremst sammenlignet med underserved mobil nettleser markedet.
Men med utviklingen av wrappere som CocoonJS og Ejecta, ser vi utviklere som bruker Phaser, omslutte spillene sine og slipper dem som native apps. Så, inn i 2014 vil vi begynne å legge til støtte for CocoonJS direkte inn i kjernen, samt støtte for desktop wrappers som node-webkit.
Vi vil markere noen av det vi anser for å være de viktigste funksjonene i Phaser fra utviklerens synspunkt:
Dette kan høres ut som en merkelig 'funksjon', men det burde faktisk være ganske overbevisende. Phaser bruker ikke noen faux OO-stil praksis internt. Det er ingen massiv arvsketting eller komponentsystem, og du trenger heller ikke å tvinge dine objekter i noen fast klasse struktur. Det er en enkel straight-forward prototype-kjede, måten JavaScript var ment å bli brukt på.
Dette betyr ikke at du ikke kan bygge spillet ditt på en strukturert måte; langt ifra. Alt det betyr er at vi ikke gjør det håndheve den. Det betyr også at Phaser er internt veldig lett å hacke med.
Men jeg liker TypeScript!
Bra fordi vi har en TypeScript-definisjonsfil også! Det er en veiledning spesifikt om bruk av Phaser med TypeScript tilgjengelig.
Phaser har en innebygd aktiv Loader som kan håndtere:
Vi rutinemessig eksporterer teksturatlasfiler fra Flash direkte til våre Phaser-spill, og den støtter fullt trimmet atlasser. Eiendeler kan delregistreres, bufres og trekkes fra forskjellige nettadresser (for CDN-støtte), og du kan til og med slå sprite inn i en fremdriftslinje med en enkelt linje med kode.
Internt bruker Phaser Pixi.js for gjengivelse. Pixi er et flott, raskt gjengivelsesbibliotek som fokuserer på lerret og WebGL. Det er et bibliotek vi fortsetter å bidra til for å bidra til å skape ting fremover.
For dine spill betyr dette at hvis nettleseren støtter WebGL, vil spilleren oftere enn ikke få en jevnere opplevelse. WebGL er vanlig på skrivebordet, men fremdeles på mobil; likevel, det er der HTML5-spill er ledet i fremtiden, så det er viktig å støtte det. Den nyeste utgivelsen av Phaser introduserte WebGL-shader og filterstøtte, og kommende vil implementere vanlige kart, slik at du kan dra nytte av nye verktøy som Sprite Lampe.
Lyd har lenge vært en av de svakeste punktene i HTML-spill. For bare et par år siden ble vi møtt med valget om å ha en enkelt kanal med høy latenslyd som ville kreme enheten under avspilling eller ikke ha lyd i det hele tatt. Men tider har endret seg, og Web Audio API kom til vår frelse. Det muliggjør riktig nodestøttet lydstøtte, med flere kanaler, node-ruting og alle slags effekter. Så Phaser støtter fullt ut Web Audio.
Men på Android spesielt, støtter mange enheter fortsatt ikke-så vi støtter også arv Audio og bruk av Audio Sprites: metoden for å pakke en haug med prøver sammen i en enkelt fil og bruke avspillingsmarkører til å hoppe til forskjellige effekter. Phaser bytter mellom de to, avhengig av enhetens muligheter, og inkluderer også låse opp lydsubsystemet automatisk for deg, noe som fanger ut mange første gangs mobile devs!
Når du støtter skrivebord og mobil, er det et stadig mer variert antall mulige innspillingsmuligheter. Phaser støtter tastatur, mus, berøring, MSPointer (nå Pointer under IE11), og kombinasjoner av disse. For eksempel på Windows Surface-enheter kan du bytte mellom å bruke en mus og berøring, eller faktisk bruke begge sammen.
For berøringsinngang, klare Phaser med både enkeltrykks- og multi-touch-miljøer. Du kan definere opptil 10 berøringspunkter og spore dem alle uavhengig, ved å bruke hendelsene deres til å håndtere Sprite-interaksjoner som å dra, tappe og kollisjonere..
Bundet i kjernebiblioteket er ArcadePhysics og ArcadeParticles-systemene. Dette er enkle AABB lettvektsbiblioteker som lar deg bruke tyngdekraften og bevegelsen til noen Sprite, og deretter teste for kollisjon og separasjon. Ved å bruke en verdensbasert quadtree for å minimere kollisjonstester, kan du oppnå rimelige resultater raskt med liten behandlingstid som kreves.
Vi forstår imidlertid at dette ikke passer til alle typer spill, slik at fysikksystemet er enkelt å erstatte, og ingen av fysikkegenskapene er bundet til faktiske sprites (men snarere til en kroppsdel), så det kan byttes ut for liker Box2D eller p2.js. Et tweening-system er også innebygd, slik at du enkelt kan tween objekter eller egenskaper. Og hvis spillet stopper, vil alle dine tweens pause automatisk og fortsette etter behov.
Det er vårt mål at kjernefasen i Phaser til slutt vil slå seg ned og treffe en fin stabil likevekt, der vi ikke sannsynligvis vil berøre det mye utover reparasjoner og nettleseroppdateringer. Vi vil imidlertid at Phaser fortsetter å vokse, og gir funksjoner for alle slags spill, men uten at kjernebiblioteket eksploderer i vekst. For dette formål har vi bygget inn et pluginsystem.
Phaser-plugins kan registrere seg med kjernevirksomheten, oppdateres i tråd med kjernens spillsløyfe, og utføre alle slags nyttige tilleggsoppgaver. Et godt eksempel på dette er den nylig utgitte EasyStar-banen for søking av spor. Vi vil frigjøre plugins oss selv og forventer å se mer kommer fra samfunnet i fremtiden.
Her vil vi dekke hvor du kan laste ned Phaser, hvordan du blir satt opp for utvikling, og hvor du skal begynne.
Phaser-prosjektet er vert på GitHub på https://github.com/photonstorm/phaser. Det er to hovedgrener: Mesteren er hvor den siste stabile utgivelsen kan bli funnet, og dev er der arbeidsoppgaven er bygget. Så snart en ny versjon er fullført, skyver vi fra dev til master og deretter dev er oppdatert for å forberede seg til neste utgave. Med mindre du vet at du trenger dev-avdelingen, bør du alltid starte med master.
Ideelt sett bør du bruke git og kassa eller gaffel lageret, slik at du enkelt kan oppdatere den. Men hvis du er ny for å git eller ikke er komfortabel å bruke den ennå, er det mulighet til å laste ned en zip-fil i hele depotet også.
Relaterte innlegg
Når du er lastet ned, anbefaler vi sterkt at du følger den offisielle Komme i gang-veiledningen. Dette vil gå deg gjennom å sette opp en lokal webserver, velge et utviklingsmiljø, og til og med bygge i skyen hvis du ønsker det.
Veiledningen brytes ned i følgende seksjoner:
Det finnes også en tilsvarende veiledning for TypeScript.
Med ditt utviklingsmiljø satt opp, er det på tide å bygge et spill. Vi anbefaler at du starter med å lage din første Phaser-spillveiledning. Det vil gå deg gjennom prosessen med å lage et enkelt plattformspill, introdusere deg til kjernekonseptene av hvordan Phaser fungerer, og sette deg klar til å utvide på det og lære mer.
Når du sjekker ut eller laster ned Phaser, kommer den med vår eksempler suite. Dette er et selvstendig nettsted som består av over 170 forskjellige kodeeksempler, fordelt på nøkkelområder: Fysikk, Kollisjon, Sprites, Tekst og mer. Hvert eksempel er et fullt fungerende selvstendig stykke kode som du kan åpne, enkelt redigere og lære av. Brukes i forbindelse med API-dokumentene, dette er et raskt spor for raskt å lære om bestemte deler av Phaser.
API-dokumentene er tilgjengelige i Phaser-depotet i docs mappe. Vi har jobbet hardt på doksene i noen måneder nå, og mens de fortsatt er litt grove rundt kantene, er de nå omfattende og dekker hele rammen.
Den nyeste versjonen (1.1.3) så en annen stor oppdatering til dem, med mange områder fylt ut med flere detaljer, og det er vårt løpende oppdrag å forbedre dokumentene med alle nye Phaser-utgivelser.
Siden versjon 1.1.3 av Phaser, er hele rammen nå gjennom JSHint før utgivelsen. Vi tilbyr også vår konfigurasjonsfil i depotet.
JSHint er en måte for oss å sikre at rammekoden følger et fast sett med retningslinjene for kodestruktur, fra hvordan vi håndterer faner og innrykk til variable navn og sitatstiler. De som ønsker å bidra til Phaser, bør sjekke deres oppdateringer mot vår JSHint-konfigurasjon.
Hvis du har fulgt gjennom denne artikkelen, vil du forstå hvorfor Phaser er flott, hva vi har til hensikt å oppnå fra å gjøre det, og hvordan du kan lære å lage spill med det. Men det viktigste aspektet av et hvilket som helst spillramme er ikke så mye funksjonene det er idrett eller teknologiske demoer, det er samfunnet bak det.
Å lage et spill er hardt arbeid, periode. Og det er enda vanskeligere å gjøre isolert, med et helt nytt rammeverk som nesten sikkert virker annerledes enn alt du har brukt tidligere. Heldigvis har Phaser et blomstrende samfunn basert på det.
Vi satte opp forumet for HTML5 Game Devs for kort tid siden, ikke spesielt for Phaser, men bare fordi å lage HTML5-spill var et nytt område som vi ønsket å kunne snakke med andre om det. Siden da har den gått fra styrke til styrke, med aktive boards, 250.000 visninger i måneden og en vennlig og profesjonell brukerbase.
Det var fornuftig at vi ville bruke dette som det offisielle hjemmet til Phaser, og du vil finne mange vennlige kolleger der ute for å sprette ideer og spørsmål. Forumet er også hjemmet til andre flotte biblioteker, inkludert Pixi.js og Babylon.js 3D-rammeverket, og det er et flott spillutstillingsområde for å vise ut hva du gjør og slippe der hver dag er en konstant inspirasjonskilde for meg, og Det er virkelig flott å se hva devs klarer å få HTML5 til å gjøre i disse dager.
Phaser-nyhetsbrevet er utgitt en gang i måneden, og inneholder detaljer om nye utgivelser, korte artikler om nye Phaser-emner og programtillegg og opplæringsprogrammer. Abonnementet er selvsagt gratis, og administreres gjennom Kampanje Monitor, slik at du kan være trygg på at du ikke har spam og en enkel måte å abonnere på hvis du ønsker å.
Du kan bidra til å forme måten Phaser vokser på. Hvis du finner en feil, vennligst rapporter det. Det tar ikke lang tid, og til dags dato har vi løst over 91% av alle rapporterte problemer (og vi jobber fortsatt på de andre 9%). Du kan også utstede trekkforespørsler mot utviklingsavdelingen, eller frigjøre dine egne plugins eller filtre.
Vi bruker mange utrettelige timer på Phaser fordi vi vil at den skal være den beste HTML5-spillutviklingsrammen det muligens kan være. Vi forstår at det ikke vil være perfekt for alle, og vi er kule med det. Men hvis du bruker det og gjør noe, uansett hvor lite du tror det er, vennligst gi oss beskjed. Du vil ikke tro på en ekte motivasjonsforhøyelse. Det er når devs viser oss spillene de har jobbet med! Nå ut til oss enten på forumet, via Twitter (@photonstorm) eller via e-post.
Mest av alt, skjønt, vi håper virkelig at du har det gøy å lage spillet ditt.
Accentsconagua