Share
Phaser är ett open source HTML5-spel ramverk skapat av Photon Storm. Det är utformat för att skapa spel som kommer att köras på stationära och mobila webbläsare. Många fokuserades på prestanda inom mobila webbläsare, ett växande och viktigt område för webbspel. Om enheten är kapabel använder den WebGL för återgivning, men annars återgår den sömlöst till Canvas. I den här artikeln kommer jag att täcka resurser för att lära mig Phaser, liksom att visa vad det kan göra och en del av det tänkande som gick in i dess design.
Det är rättvist att säga att det känns som om ett nytt HTML5-spelramar släpps varje vecka, så är spridningen av dem. Så varför ska du överväga Phaser bland det stora valet där ute? Jag tycker om att anledningen är något att göra med arvet hos laget som är inblandat i att bygga det.
Vi på Photon Storm ägnade oss åt att utveckla inget annat än HTML5-spel för flera år sedan, tillbaka när det verkligen inte fanns en hel del ramval, och du kunde räkna antalet HTML5-spel-devs i enstaka siffror. När vi kom in i rymden så tidigt och kom från Flash så kände vi oss omedelbart behovet av att bygga verktyg som vi var vana vid i AS3.
Vi hade varit fantastiska fans av Flixel och hade haft framgång både med våra egna spel och med våra Flixel Power Tools. Det var en riktig buzz att se andra devs använda dem för att hjälpa till att få ut sina spel, och det var något vi ville kopiera i HTML5.
Det vi inte var beredda på var dock hur snabbt HTML5-landskapet förändrades. Till och med idag har jag en bild i mina presentationer som jag visar på konferenser som säger "Var beredd att lära ut vad du vet var sjätte månad", och jag tror att det fortfarande är sant. Browseleverantörer är iterating och förbättring i en fenomenal takt just nu. Det tar bara några veckor för nya funktioner att bubbla till allmänheten, och om du sadelas med ett spelramverk som upprätthålls under någons fritid eller går långsammare, tar det inte lång tid innan sakerna är mycket föråldrade.
Ett annat tecken på denna förändring var i de typer av klientarbete som vi fick uppdrag att bygga. Som ett företag gör vi bara två saker: bygga HTML5-spel och bygga Phaser. Vi har byggt HTML5-spel för några av världens största underhållningsvarumärken och det har gett oss en inblick i de krav som de efterfrågar. Det största området vi blev uppmanade att arbeta med var spel som körde inuti den mobila webbläsaren. så många HTML5-ramar är inriktade på skrivbordet, där prestanda är riklig och anslutningar snabbt och stabilt, och ignorerar den mobila webbläsarens sida av livet. Men det är där vi fortfarande ser att kundens efterfrågan är starkast. Så det var viktigt att Phaser kunde användas för att bygga våra kundspel oavsett plattform.
Sedan utgåvan av Phaser 1.0 har uppdateringar varit vanliga och omfattande, med många nya funktioner och korrigeringar på plats snabbt. Vi arbetar med en vändning på ungefär en månad från dev till master-du kan se en komplett changelog på GitHub. Intressant är att vi nu ser en efterfrågan på spel som kör inuti en WebView, så vi kommer att se till att Phaser fungerar bra i den här miljön och går in i 2014.
Förutom att hålla Phaser uppdaterad var det också avgörande för oss att vi byggde något som var verkligen lätt att använda. Och du kommer se detta reflekteras över hela ramen. Detta härrör från vår erfarenhet av Flixel Power Tools, och bortom det när jag brukade arbeta för The Game Creators som hjälper till att definiera formen på deras språkspråk. Jag antar att det alltid varit en del av mig att jag ville göra spelutveckling så enkel som möjligt för utvecklare, en trend som jag kommer att fortsätta när Phaser utvecklas.
Jag ber om ursäkt för något av följande (eller ovan!) Låter lite "marknadsföring". Phaser är en fri produkt, vi gör inga pengar från dig med det, och om jag lockar mig till det är det bara för att jag är passionerad över vad jag har skapat. Så snälla bära med mig!
Phaser är ett JavaScript-bibliotek som är utformat för att köras på alla större skrivbords webbläsare. Detta inkluderar Internet Explorer 9 och senare, Firefox, Chrome och Safari. Före IE9 stödde den inte kanfas, så om du absolut behöver en ram som kan hantera DOM-rendering, kommer Phaser inte att vara lämplig. Efterfrågan på dessa typer av spel blir dock nästan minimal; Om något ändras ändras den andra riktningen (mot WebGL).
På mobilen kör Phaser på iOS5 och över insidan av Mobile Safari. På Android går det i 2.2 och senare i både webbläsaren och i Chrome. Chrome är nu standard Android-webbläsare, med nya versioner som även stödjer WebGL, men du kan fortfarande inte ignorera de miljoner äldre Android-enheterna som fortfarande används.
Tack vare Mozilla fick vi en massa FFOS-testenheter och har börjat se till att Phaser fungerar bra på dem. Hittills ser det bra ut, och vi ska producera installationsguider i det nya året.
Vi har också sett Phaser-spel som fungerar bra på Tizen-enheter och felfritt under Kindle HTML5-omslaget, vilket innebär att du kan distribuera till dessa enheter "out of the box". Eftersom fler webbdrivna telefoner börjar komma in på marknaden, kommer vi vara säkra på att hålla Phaser uppdaterad för dem.
Det finns ett så stort utbud av utmärkta spelutvecklingspaket som är inriktade på att skapa inhemska appar (Unity, Corona, Loom osv.), Att det inte var ett område vi önskade att tillbringa mycket ansträngningsskydd först, särskilt i jämförelse med de underserverade mobil webbläsare marknaden.
Med utvecklingen av wrappers som CocoonJS och Ejecta ser vi emellertid utvecklare som använder Phaser-omslag deras spel och släpper dem som inbyggda appar. Så, till och med 2014 börjar vi lägga till stöd för CocoonJS direkt i kärnan, samt stöd för skrivbordsförpackningar som nod-webkit.
Vi lyfter fram några av vad vi anser vara de viktigaste egenskaperna hos Phaser från utvecklarens synvinkel:
Det kan låta som en konstig "funktion", men det borde egentligen vara ganska övertygande. Phaser använder inte någon form av otroligt OO-stil internt. Det finns ingen massiv arvskedja eller komponentsystem, och du behöver inte tvinga dina föremål i någon fast klassstruktur heller. Det är en enkel rakt fram prototypkedja, hur JavaScript var tänkt att användas.
Det betyder inte att du inte kan bygga ditt spel på ett strukturerat sätt. långt ifrån. Allt det betyder är att vi inte gör det förstärka Det. Det betyder också att Phaser är internt mycket lätt att hacka med.
Men jag gillar TypeScript!
Bra eftersom vi har en TypeScript-definitionsfil också! Det finns en guide specifikt om att använda Phaser med TypeScript tillgängligt.
Phaser har en inbyggd tillgång Loader som kan hantera:
Vi exporterar rutinmässigt atlasfiler från Flash direkt till våra Phaser-spel, och det stöder helt trimmade atlaser. Tillgångar kan delbelastas, cachas och dras från olika webbadresser (för CDN-stöd), och du kan till och med vrida sprite i en progressivfält med en enda kodrad.
Internt använder Phaser Pixi.js för återgivning. Pixi är ett bra snabbbibliotek som fokuserar på Canvas och WebGL. Det är ett bibliotek som vi fortsätter att bidra till för att hjälpa till att driva saker framåt.
För dina spel betyder detta att om webbläsaren stöder WebGL kommer spelaren oftare än inte att få en mjukare upplevelse. WebGL är vanligt på skrivbordet men framstår fortfarande på mobilen; men det är där HTML5-spel är på väg i framtiden, så att stödja det är viktigt. Den senaste versionen av Phaser introducerade WebGL-skuggning och filterstöd, och kommande kommer att implementera vanliga kartor så att du kan dra nytta av nya verktyg som Sprite Lampa.
Ljud har varit en av de svagaste punkterna i HTML-spel under lång tid. För bara några år sedan mötte vi valet att ha en enda kanal med hög latent ljud som skulle störa enheten under uppspelning eller inte ha något ljud alls. Men tiderna har förändrats, och Web Audio API kom till vår frälsning. Det möjliggör korrekt nodbaserat ljudstöd, med flera kanaler, noddirigering och alla slags effekter. Så Phaser stöder fullt ut Web Audio.
Men på Android speciellt stödjer många enheter fortfarande inte-så vi stöder också äldre ljud och användningen av ljudspridningar: metoden att packa en massa prover tillsammans i en enda fil och använda uppspelningsmarkörer för att hoppa till olika effekter. Phaser byter mellan de två beroende på enhetens funktioner och inkluderar även låsa upp ljudsubsystem automatiskt för dig, något som hämtar ut en hel del mobila enheter för första gången!
När du stöder skrivbord och mobil finns det ett alltmer varierat antal potentiella ingångsalternativ. Phaser stöder tangentbord, mus, beröring, MSPointer (nu Pointer under IE11) och kombinationer av dessa. Till exempel på Windows Surface-enheter kan du växla mellan att använda en mus och en touch eller använda båda båda tillsammans.
För kontaktinmatning klarar Phaser både med enkelhets- och multi-touch-miljöer. Du kan definiera upp till 10 beröringspunkter och spåra dem alla självständigt, med hjälp av deras händelser för att hantera Sprite-interaktioner som att dra, tappa och kollisera.
Inbundna i kärnbiblioteket är ArcadePhysics och ArcadeParticles-systemen. Dessa är enkla AABB-ljusbibliotek som tillåter dig att applicera gravitation och rörelse till alla Sprite, sedan prova kollision och separation. Genom att använda en världsbaserad quadtree som hjälper till att minimera kollisionstest kan du snabbt uppnå anständiga resultat med liten behandlingstid.
Vi förstår dock att detta inte passar alla typer av spel, så att fysiksystemet är lätt att ersätta och ingen av fysikegenskaperna är bundna till faktiska sprites (men snarare till en kroppskomponent), så kan bytas ut för gillar Box2D eller p2.js. Ett interpoleringssystem är också inbyggt, så att du enkelt kan mellan objekt eller egenskaper. Och om spelet pausar kommer alla dina tweens att pausa automatiskt och fortsätta efter behov.
Det är vårt mål att kärnan i Phaser i slutändan kommer att sätta sig ner och träffa en fin stabil jämvikt, där vi inte kommer att röra det mycket förutom korrigeringar och uppdateringar av webbläsare. Vi vill dock att Phaser fortsätter växa, vilket ger funktioner för alla typer av spel men utan att kärnbiblioteket exploderar i tillväxt. För detta ändamål har vi byggt in ett pluginsystem.
Phaser plugins kan registrera sig med kärnramen, uppdateras i linje med kärnspelets slinga och utföra alla typer av användbara ytterligare uppgifter. Ett bra exempel på detta är det nyligen släppta EasyStar-sökverktyget. Vi kommer att släppa ut plugins själva och förvänta oss att se mer från samhället i framtiden.
Här kommer vi att täcka var du ska ladda ner Phaser, hur du konfigureras för utveckling och var du ska börja.
Phaser-projektet är värd på GitHub på https://github.com/photonstorm/phaser. Det finns två huvudgrenar: mästaren är där den senaste stabila utgåvan finns och dev är där den inbyggda versionen är byggd. Så snart en ny version är klar trycker vi från dev till master och sedan dev uppdateras för att förbereda oss för nästa release. Om du inte vet att du behöver dev-filialen bör du alltid börja med mästare.
Helst bör du använda git och checkout eller gaffla förvaret, så att du enkelt kan uppdatera det. Men om du är ny eller inte bekväm med att använda den ändå, finns det möjlighet att ladda ner en zip-fil i hela arkivet också.
relaterade inlägg
När du har laddat ner, rekommenderar vi starkt att du följer den officiella Komma igångsguiden. Detta kommer att leda dig genom att ställa in en lokal webbserver, välja en utvecklingsmiljö, och till och med bygga i molnet om du så önskar.
Guiden bryts ned i följande avsnitt:
Det finns också en motsvarande guide för TypeScript.
Med din utvecklingsmiljö inrättad är det dags att bygga ett spel. Vi rekommenderar att du börjar med att göra din första Phaser-spelhandledning. Det kommer att leda dig genom processen med att skapa ett enkelt plattformsspel, presentera dig för de grundläggande begreppen om hur Phaser fungerar och ställa dig redo att expandera på det och lära dig mer.
När du kassar eller laddar ner Phaser kommer den med vår exemplarpaket. Detta är en fristående webbplats som består av över 170 olika kodexemplar, uppdelad i nyckelområden: Fysik, Kollision, Sprites, Text och mycket mer. Varje exempel är ett fullt fungerande självständigt kodstycke som du kan öppna, enkelt redigera och lära av. Används i samband med API-dokumenten, det här är en snabb spår för att snabbt lära sig om specifika delar av Phaser.
API-dokumenten finns i Phaser-förvaret i docs mapp. Vi har arbetat hårt på docsna i några månader nu och, medan de fortfarande är lite grova runt kanterna, är de nu omfattande och täcker hela ramen.
Den senaste versionen (1.1.3) såg en annan stor uppdatering till dem, med många områden fyllda med mer detaljer, och det är vårt pågående uppdrag att förbättra dokumenten med alla nya Phaser-utgåvor.
Sedan version 1.1.3 av Phaser, kör hela ramen nu genom JSHint före utgåvan. Vi tillhandahåller också vår konfigurationsfil i förvaret.
JSHint är ett sätt för oss att se till att ramkoden följer en fast uppsättning riktlinjer för kodstruktur, från hur vi hanterar flikar och indragning till variabla namn och citatstilar. De som vill bidra till Phaser bör kontrollera sina uppdateringar mot vår JSHint-konfiguration.
Om du har följt igenom den här artikeln förstår du varför Phaser är bra, vad vi har som mål att uppnå från att göra det och hur du kan lära dig att skapa spel med det. Men den viktigaste aspekten av varje spelram är inte så mycket funktionerna som sport eller tech demos, det är samhället bakom det.
Att göra ett spel är hårt arbete, period. Och det är ännu svårare att göra isolerat, med en helt ny ram som nästan säkert fungerar annorlunda än vad du tidigare har använt. Lyckligtvis har Phaser ett blomstrande samhälle baserat på det.
Vi startade forumet HTML5 Game Devs för ett tag sedan, inte specifikt för Phaser, utan bara för att göra HTML5-spel var ett sådant nytt område som vi ville kunna prata med andra om det. Sedan dess har den gått från styrka till styrka, med aktiva styrelser, 250 000 visningar i månaden och en vänlig och professionell användarbas.
Det var förnuftigt att vi skulle använda detta som det officiella hemmet för Phaser, och du hittar massor av vänliga medarbetare där för att studsa idéer och frågor. Forumet är också hem för andra stora bibliotek, inklusive Pixi.js och Babylon.js 3D-ramverket, och det finns ett bra spelutställningsområde för att visa upp vad du gör-droppar där varje dag är en konstant inspirationskälla för mig och Det är jättebra att se vilka devs som hanterar att få HTML5 att göra idag.
Phaser-nyhetsbrevet släpps en gång i månaden och innehåller detaljer om nya versioner, korta artiklar om nya Phaser-ämnen och plugins och handledning. Prenumerationen är självklart gratis och hanteras via Campaign Monitor, så du kan vara säker på att ingen spam och ett enkelt sätt att säga upp dig om du vill.
Du kan hjälpa till att forma hur Phaser växer. Om du hittar en bugg, vänligen rapportera den. Det tar inte lång tid, och hittills har vi fixat över 91% av alla rapporterade problem (och vi arbetar fortfarande med de andra 9%). Du kan även utfärda dragförfrågningar mot utvecklingsgrenen, eller släppa dina egna plugins eller filter.
Vi spenderar många outtröttliga timmar som arbetar på Phaser eftersom vi vill att den ska vara den bästa HTML5-spelutvecklingsramen som det kan vara. Vi förstår att det inte kommer att vara perfekt för alla, och vi är coola med det. Men om du använder den och gör något, oavsett hur liten du tycker är det, var snäll och låt oss veta. Du kommer inte att tro med en verklig motivationshöjning det är när devs visar oss de spel de har jobbat på! Nå ut till oss antingen på forumet, via Twitter (@photonstorm) eller via e-post.
Mest av allt hoppas vi verkligen att du har kul att göra ditt spel.
Accentsconagua