Share
Phaser is een open source HTML5-gameframework gecreëerd door Photon Storm. Het is ontworpen om games te maken die worden uitgevoerd op desktop- en mobiele webbrowsers. Er werd veel aandacht besteed aan de prestaties van mobiele webbrowsers, een groeiend en belangrijk gebied van webgaming. Als het apparaat geschikt is, gebruikt het WebGL voor rendering, maar anders gaat het naadloos terug naar Canvas. In dit artikel zal ik ingaan op de middelen voor het leren van Phaser, maar ook laten zien wat het kan doen en een deel van het denken dat in zijn ontwerp is verwerkt.
Het is eerlijk om te zeggen dat het voelt alsof er elke week een nieuw HTML5-gameframework wordt vrijgegeven, zoals de proliferatie ervan. Dus waarom zou je Phaser als een van de grootste keuze beschouwen? Ik vind het leuk om te denken dat de reden iets te maken heeft met de erfenis van het team dat betrokken is bij het bouwen ervan.
Bij Photon Storm hebben we ons enkele jaren geleden toegewijd aan het ontwikkelen van niets anders dan HTML5-spellen, toen er nog maar heel weinig raamwerkkeuze was en je het aantal HTML5 game-ontwikkelaars in één cijfer kon tellen. De ruimte zo vroeg betreden, en afkomstig van Flash, we voelden meteen de behoefte om tools te bouwen die we gewend waren in AS3.
We waren grote fans van Flixel en hadden succes genoten, zowel met onze eigen games als met onze Flixel Power Tools. Er was een echte buzz om te zien hoe andere ontwikkelaars ze gebruiken om hun games te laten verschijnen, en dit wilden we dupliceren in HTML5.
Waar we echter niet op voorbereid waren, was hoe snel het HTML5-landschap veranderde. Zelfs vandaag heb ik een dia in mijn presentaties die ik laat zien op conferenties die zeggen:Wees voorbereid om af te leren wat je elke zes maanden weet", en ik geloof dat dit nog steeds waar is: browserverkopers zijn nu aan het iterating en verbeteren nu fenomenaal. Het duurt slechts een kwestie van weken voordat nieuwe functies naar het publiek zijn geblazen en als je bent opgezadeld met een gamekader dat wordt gehandhaafd tijdens iemands vrije tijd of is in een langzame release-cyclus, dan duurt het niet lang voordat dingen erg verouderd zijn.
Een ander teken van deze verandering was het soort klantwerk dat we in opdracht hadden te bouwen. Als bedrijf doen we maar twee dingen: HTML5-games bouwen en Phaser bouwen. We hebben HTML5-games gebouwd voor enkele van de grootste entertainmentmerken ter wereld en dat heeft ons een goed inzicht gegeven in de soorten vereisten die ze eisen. Het grootste gebied waaraan we moesten werken, waren games die in de mobiele browser draaiden; zo veel HTML5-frameworks zijn gericht op de desktop, waar de prestaties overvloedig zijn en de verbindingen snel en stabiel zijn, en de mobiele browser-kant van het leven negeren. Toch zien we nog steeds dat de vraag van de klant het sterkst is. Het was dus essentieel dat Phaser kon worden gebruikt om onze client games te bouwen, ongeacht het platform.
Sinds de release van Phaser 1.0 zijn updates regelmatig en uitgebreid geweest, met veel nieuwe functies en oplossingen snel geïnstalleerd. We werken aan een ommekeer van ongeveer één maand van dev naar master. Je kunt een volledige changelog bekijken op GitHub. Interessant is dat we nu een vraag zien naar games die in een WebView worden uitgevoerd, dus we zullen ervoor zorgen dat Phaser goed werkt in deze omgeving vanaf 2014.
Naast het up to date houden van Phaser was het voor ons ook van cruciaal belang dat we iets bouwden dat dat wel was werkelijk makkelijk te gebruiken. En je zult dit over het hele raamwerk weerspiegeld zien. Dit vloeit voort uit onze ervaring met de Flixel Power Tools, en verder dan dat, toen ik voor The Game Creators werkte om de vorm van hun speltalen te helpen definiëren. Ik denk dat het altijd een deel van me was dat ik de ontwikkeling van spellen zo eenvoudig mogelijk wilde maken voor ontwikkelaars, een trend die ik zal voortzetten naarmate Phaser evolueert.
Mijn excuses voorafgaand aan een van de volgende (of hoger!) Klinkt een beetje 'marketing'. Phaser is een gratis product, we verdienen er geen geld aan als je het gebruikt, en als ik er enthousiast over ben, is dat alleen maar omdat ik gepassioneerd ben over wat ik heb gemaakt. Dus wees alstublieft geduldig met mij!
Phaser is een JavaScript-bibliotheek die is ontworpen om op alle grote desktopbrowsers te worden uitgevoerd. Dit omvat Internet Explorer 9 en hoger, Firefox, Chrome en Safari. Voor IE9 ondersteunde het canvas niet, dus als je absoluut een framework nodig hebt dat geschikt is voor DOM-rendering, dan is Phaser niet geschikt. De vraag naar dit soort spellen wordt echter bijna minimaal; als er iets is, verschuift het de andere richting (naar WebGL).
Op mobiele apparaten draait Phaser op iOS5 en hoger in Mobile Safari. Op Android werkt het in 2.2 en hoger in zowel de voorraadbrowser als in Chrome. Chrome is nu de standaard Android-browser, terwijl recente versies zelfs WebGL ondersteunen, maar je kunt nog steeds niet de miljoenen oudere Android-apparaten negeren die nog in gebruik zijn.
Dankzij Mozilla hebben we een aantal FFOS-testapparaten ontvangen en zijn we begonnen om ervoor te zorgen dat Phaser goed werkt. Tot nu toe ziet het er goed uit en we zullen in het nieuwe jaar implementatiegidsen maken.
We hebben Phaser-games ook goed zien draaien op Tizen-apparaten en probleemloos onder de Kindle HTML5-wrapper, wat betekent dat je deze apparaten 'out of the box' kunt inzetten. Naarmate er meer web-powered telefoons op de markt komen, zullen we ervoor zorgen dat Phaser voor hen up-to-date blijft.
Er is zo'n enorme keuze aan uitstekende game-ontwikkelpakketten die het maken van native apps (Unity, Corona, Loom, enzovoort) als doelwit maken, dat het niet een gebied was dat we in het begin veel aandacht wilden besteden, vooral in vergelijking met mensen met een te laag energieverbruik mobiele browsermarkt.
Met de ontwikkeling van wrappers zoals CocoonJS en Ejecta zien we ontwikkelaars die Phaser gebruiken hun games inpakken en vrijgeven als native apps. Dus, in 2014 gaan we beginnen met het toevoegen van ondersteuning voor CocoonJS direct aan de kern, evenals ondersteuning voor desktop wrappers zoals node-webkit.
We lichten een paar van wat we beschouwen als de belangrijkste kenmerken van Phaser vanuit het oogpunt van een ontwikkelaar:
Dit klinkt misschien als een vreemde 'feature', maar het zou eigenlijk een behoorlijk dwingende moeten zijn. Phaser gebruikt intern geen namaakstijlen in OO-stijl. Er is geen enorme overervingsketen of componentensysteem en u hoeft uw objecten ook niet in een vaste klassestructuur te forceren. Het is een eenvoudige, rechtlijnige prototypeketen, zoals JavaScript bedoeld was.
Dit betekent niet dat je je spel niet op een gestructureerde manier kunt opbouwen; verre van dat. Het betekent alleen dat we dat niet doen afdwingen het. Het betekent ook dat Phaser intern heel gemakkelijk is om mee te hacken.
Maar ik vind TypeScript leuk!
Goed, want we hebben ook een TypeScript-definitiesbestand! Er is een handleiding specifiek over het gebruik van Phaser met TypeScript beschikbaar.
Phaser heeft een ingebouwde activumlader die het volgende kan verwerken:
We exporteren standaard textuuratlasbestanden van Flash rechtstreeks naar onze Phaser-games en het ondersteunt volledig bijgesneden atlassen. Activa kunnen gedeeltelijk worden geladen, in de cache worden opgeslagen en uit verschillende URL's worden gehaald (voor CDN-ondersteuning), en je kunt zelfs elke sprite omzetten in een voortgangsbalk met één regel code.
Intern gebruikt Phaser Pixi.js voor rendering. Pixi is een geweldige, snelle renderingbibliotheek die zich richt op Canvas en WebGL. Het is een bibliotheek waaraan we blijven bijdragen om dingen vooruit te helpen.
Voor uw games betekent dit dat als de browser WebGL ondersteunt, de speler vaker een prettige ervaring krijgt. WebGL is gebruikelijk op desktops, maar komt nog steeds op de mobiel voor; Maar toch, het is waar HTML5-games in de toekomst voor staan, dus het ondersteunen van het is van vitaal belang. De nieuwste versie van Phaser introduceerde WebGL-shader en filterondersteuning, en toekomstige zullen normale kaarten implementeren, zodat u kunt profiteren van nieuwe tools zoals Sprite Lamp.
Audio is al heel lang een van de zwakste punten van HTML-games. Slechts een paar jaar geleden werden we geconfronteerd met de keuze om één enkel kanaal met hoge latentie audio te hebben dat het apparaat zou verlammen tijdens het afspelen of helemaal geen audio zou hebben. Maar de tijden zijn veranderd en de Web Audio API kwam tot onze redding. Het zorgt voor de juiste knooppunt-gebaseerde audio-ondersteuning, met meerdere kanalen, routering van knooppunten en allerlei effecten. Dus Phaser ondersteunt volledig Web Audio.
Vooral op Android ondersteunen echter veel apparaten nog steeds niet-dus ondersteunen we ook oudere Audio en het gebruik van Audio Sprites: de methode om een aantal samples samen te verpakken in één bestand en gebruik te maken van afspeelmarkeringen om naar verschillende bijwerkingen. Phaser zal tussen de twee wisselen, afhankelijk van de apparaatmogelijkheden en omvat ook het automatisch ontgrendelen van het audiosubsysteem, iets dat veel nieuwe mobiele ontwikkelaars ontdekt!
Bij de ondersteuning van desktop en mobiel is er een steeds gevarieerder aantal potentiële invoeropties. Phaser ondersteunt toetsenbord, muis, aanraking, MSPointer (nu aanwijzer onder IE11) en combinaties daarvan. Op Windows Surface-apparaten kunt u bijvoorbeeld wisselen tussen een muis gebruiken en aanraken, of beide tegelijk gebruiken.
Voor aanraakinvoer kan Phaser zowel omgevingen met één aanraking als multi-touch omgevingen verwerken. U kunt maximaal 10 aanraakpunten definiëren en ze allemaal onafhankelijk volgen, met behulp van hun gebeurtenissen om interacties met Sprite te verwerken, zoals slepen, tikken en botsen.
Gebundeld in de kernbibliotheek zijn de systemen ArcadePhysics en ArcadeParticles. Dit zijn eenvoudige AABB-lichtgewichtbibliotheken waarmee u de zwaartekracht en beweging op elke Sprite kunt toepassen en vervolgens kunt testen op botsing en scheiding. Door een quadtree op wereldniveau te gebruiken om botsingstests tot een minimum te beperken, kunt u snel behoorlijke resultaten behalen met weinig verwerkingstijd.
We begrijpen echter dat dit niet voor alle soorten games geschikt is, dus het physics-systeem is eenvoudig te vervangen en geen van de fysische eigenschappen is gebonden aan echte sprites (maar eerder aan een body-component), dus kan worden geruild voor de houdt van Box2D of p2.js. Een tweening-systeem is ook ingebouwd, zodat u objecten of eigenschappen gemakkelijk kunt tweenen. En mocht het spel pauzeren, dan zullen al je tweens automatisch pauzeren en zo nodig hervatten.
Het is ons doel dat de kern van Phaser uiteindelijk tot rust zal komen en een mooi stabiel evenwicht zal bereiken, waar we waarschijnlijk niet veel meer aan zullen raken dan alleen fixes en browser-updates. We willen echter dat Phaser blijft groeien en functies voor alle soorten games biedt, maar zonder dat de kernbibliotheek in groei explodeert. Daartoe hebben we een plug-insysteem ingebouwd.
Phaser-plug-ins kunnen zichzelf registreren met het kernraamwerk, worden geüpdatet in overeenstemming met de kerngame-lus en allerlei nuttige aanvullende taken uitvoeren. Een goed voorbeeld hiervan is de recent uitgebrachte EasyStar padvindende plugin. We zullen zelf plug-ins publiceren en verwachten dat er in de toekomst meer uit de community komt.
Hier bespreken we waar je Phaser kunt downloaden, hoe je je kunt voorbereiden voor ontwikkeling en waar je kunt beginnen.
Het Phaser-project wordt gehost op GitHub op https://github.com/photonstorm/phaser. Er zijn twee hoofdtakken: master is waar de nieuwste stabiele release kan worden gevonden en dev is waar de work-in-progress-versie is gebouwd. Zodra een nieuwe versie is voltooid, pushen we van dev naar master en wordt dev bijgewerkt om zich voor te bereiden op de volgende release. Tenzij je weet dat je de dev branch nodig hebt, moet je altijd beginnen met master.
Idealiter zou u git en checkout moeten gebruiken of de repository moeten splitten, zodat u deze gemakkelijk kunt bijwerken. Maar als je nog niet vertrouwd bent met git of het nog niet op je gemak hebt, is er de mogelijkheid om ook een zip-bestand van de hele repository te downloaden.
gerelateerde berichten
Na het downloaden raden we u ten zeerste aan de officiële Handleiding Aan de slag te volgen. Dit zal je helpen bij het opzetten van een lokale webserver, het kiezen van een ontwikkelomgeving en zelfs het bouwen in de cloud als je dat wilt.
De gids is onderverdeeld in de volgende secties:
Er is ook een equivalente handleiding voor TypeScript.
Met je ontwikkelomgeving ingesteld, is het tijd om een spel te bouwen. We raden aan te beginnen met de zelfstudie Uw eerste Phaser-spel maken. Het zal je door het proces van het maken van een eenvoudige platformgame leiden, je laten kennismaken met de kernbegrippen van hoe Phaser werkt en je klaar maken om dat uit te breiden en meer te leren.
Wanneer u uitcheckt of Phaser downloadt, komt dit met onze Voorbeelden-suite. Dit is een op zichzelf staande website die bestaat uit meer dan 170 verschillende codevoorbeelden, opgesplitst in belangrijke gebieden: natuurkunde, botsing, sprites, tekst en meer. Elk voorbeeld is een volledig werkend, op zichzelf staand stuk code dat u kunt openen, eenvoudig kunt bewerken en van kunt leren. Gebruikt in combinatie met de API-documenten, dit zijn een snelle manier om snel informatie te krijgen over specifieke delen van Phaser.
De API-documenten zijn beschikbaar in de Phaser-gegevensopslagruimte in de docs map. We hebben nu een paar maanden hard aan de documenten gewerkt en hoewel ze nog steeds een beetje ruw zijn, zijn ze nu uitgebreid en bestrijken ze het volledige raamwerk.
De meest recente versie (1.1.3) zag nog een grote update voor hen, met veel gebieden ingevuld met meer details, en het is onze voortdurende missie om de documentatie te verbeteren bij elke nieuwe versie van Phaser.
Sinds versie 1.1.3 van Phaser wordt het volledige framework nu uitgevoerd door JSHint voor de release. We leveren ons configuratiebestand ook in de repository.
JSHint is een manier voor ons om ervoor te zorgen dat de raamwerkcode een vaste reeks codestructuurrichtlijnen volgt, van de manier waarop we omgaan met tabbladen en inspringen tot variabele namen en citaatstijlen. Degenen die een bijdrage willen leveren aan Phaser, moeten hun updates controleren aan de hand van onze JSHint-configuratie.
Als je dit artikel hebt gevolgd, begrijp je waarom Phaser geweldig is, wat we hebben willen bereiken en hoe je kunt leren hoe je er games mee kunt maken. Maar het belangrijkste aspect van een gamekader is niet zozeer de functionaliteit die het sport of de technische demo's, het is de gemeenschap erachter.
Een spel maken is hard werken, periode. En het is nog moeilijker om geïsoleerd te doen, met een geheel nieuw framework dat vrijwel zeker anders werkt dan alles wat je in het verleden hebt gebruikt. Gelukkig heeft Phaser een bloeiende gemeenschap errond.
We hebben kort geleden het HTML5 Game Devs-forum opgezet, niet specifiek voor Phaser, maar simpelweg omdat het maken van HTML5-games zo'n nieuw gebied was dat we er met anderen over wilden praten. Sindsdien is het van kracht tot kracht, met actieve borden, 250.000 weergaven per maand en een vriendelijke en professionele gebruikersbasis.
Het was logisch dat we dit zouden gebruiken als de officiële thuisbasis voor Phaser, en je zult veel vriendelijke collega-ontwikkelaars vinden om ideeën en vragen te beantwoorden. Het forum is ook de thuisbasis van andere geweldige bibliotheken, waaronder Pixi.js en het Babylon.js 3D-framework, en er is een groot gebied met games om te laten zien wat je maakt - elke dag laten vallen is een constante bron van inspiratie voor mij, en het is echt geweldig om te zien welke ontwikkelaars er in slagen om HTML5 deze dagen te laten doen.
De Phaser-nieuwsbrief verschijnt één keer per maand en bevat informatie over nieuwe releases, korte artikelen over nieuwe Phaser-onderwerpen en plug-ins en tutorials. Abonnement is natuurlijk gratis en wordt beheerd via Campagnemonitor, zodat je verzekerd bent van geen spam en een eenvoudige manier om je af te melden als je wilt.
U kunt helpen vorm te geven aan de manier waarop Phaser groeit. Als je een bug vindt, meld dit dan. Het duurt niet lang en tot nu toe hebben we meer dan 91% van alle gemelde problemen verholpen (en we werken nog steeds aan de andere 9%). U kunt ook trekverzoeken indienen tegen de ontwikkelingstak of uw eigen plug-ins of filters vrijgeven.
We besteden veel onvermoeibare uren aan Phaser omdat we willen dat dit het beste HTML5-framework voor gamedevelopment is dat het mogelijk kan zijn. We begrijpen dat dit niet perfect is voor iedereen, en daar zijn we cool mee. Maar als je het gebruikt en iets maakt, laat het ons weten, hoe klein je ook denkt. Je zult het niet geloven met een echte motivationele boost, het is wanneer ontwikkelaars ons de spellen laten zien waar ze aan hebben gewerkt! Reik naar ons op het forum, via Twitter (@photonstorm) of per e-mail.
Maar vooral hopen we dat je veel plezier zult hebben met het maken van je spel.
Accentsconagua