Share
Phaser è un framework di gioco HTML5 open source creato da Photon Storm. È progettato per creare giochi che verranno eseguiti su browser desktop e mobili. Si è prestato particolare attenzione alle prestazioni all'interno dei browser Web mobili, un'area in crescita e importante del web gaming. Se il dispositivo è in grado, utilizza WebGL per il rendering, ma in caso contrario torna a Canvas. In questo articolo, tratterò le risorse per l'apprendimento di Phaser, oltre a mostrare cosa è in grado di fare e parte del pensiero che è andato nel suo design.
È giusto dire che sembra che ogni settimana venga rilasciata una nuova struttura di gioco HTML5, tale è la proliferazione di essi. Quindi, perché dovresti considerare Phaser anche tra l'enorme scelta in circolazione? Mi piace pensare che la ragione sia qualcosa a che fare con l'eredità del team coinvolto nella sua costruzione.
Noi di Photon Storm ci siamo dedicati a sviluppare nient'altro che giochi HTML5 diversi anni fa, quando non c'era davvero molta scelta di framework, e si poteva contare il numero di sviluppatori di giochi HTML5 a una sola cifra. Entrando nello spazio così presto e provenendo da Flash, sentivamo immediatamente la necessità di creare strumenti a cui eravamo abituati in AS3.
Siamo stati grandi fan di Flixel e ci siamo goduti il successo sia con i nostri giochi che con i nostri Flixel Power Tools. C'è stato un vero ronzio nel vedere gli altri sviluppatori usarli per far pubblicare i loro giochi, e questo era qualcosa che volevamo duplicare in HTML5.
Ciò che non eravamo preparati, tuttavia, era la rapidità con cui il panorama HTML5 stava cambiando. Anche oggi, ho una diapositiva nelle mie presentazioni che mostro alle conferenze dicendo "Siate pronti a disimparare ciò che sapete ogni sei mesi", e credo che questo sia ancora vero. I venditori di browser stanno iterando e migliorando ad un ritmo fenomenale in questo momento. Ci vogliono solo poche settimane perché le nuove funzionalità possano entrare in contatto con il pubblico, e se vi è una struttura di gioco che viene mantenuto durante il tempo libero di qualcuno o è in un ciclo a rilascio lento, quindi non ci vuole molto tempo prima che le cose siano superate.
Un altro segno di questo cambiamento è stato il tipo di lavoro del cliente che ci è stato commissionato per costruire. Come azienda facciamo solo due cose: costruisci giochi HTML5 e costruisci Phaser. Abbiamo sviluppato giochi HTML5 per alcuni dei più grandi marchi di intrattenimento del mondo e questo ci ha permesso di comprendere con precisione le richieste che richiedono. L'area più grande su cui ci veniva chiesto di lavorare era quella dei giochi in esecuzione all'interno del browser mobile; così tanti framework HTML5 sono focalizzati sul desktop, dove le prestazioni sono abbondanti e le connessioni veloci e stabili, e ignorano il lato della vita del browser mobile. Eppure è qui che vediamo ancora la domanda dei clienti più forte. Quindi era fondamentale che Phaser potesse essere usato per costruire i nostri giochi client, indipendentemente dalla piattaforma.
Dal rilascio di Phaser 1.0, gli aggiornamenti sono stati regolari e completi, con molte nuove funzionalità e correzioni in atto rapidamente. Lavoriamo su un turnaround di circa un mese da dev to master: puoi visualizzare un changelog completo su GitHub. È interessante notare che ora stiamo assistendo a una richiesta di giochi in esecuzione all'interno di una WebView, quindi faremo in modo che Phaser funzioni bene in questo ambiente nel 2014.
Oltre a mantenere aggiornato Phaser, per noi era anche di fondamentale importanza costruire qualcosa che fosse veramente facile da usare. E lo vedrete riflesso su tutto il quadro. Questo deriva dalla nostra esperienza con i Power Tools di Flixel, e oltre che quando lavoravo per The Game Creators contribuendo a definire la forma dei loro linguaggi di gioco. Immagino sia sempre stato parte di me che volevo rendere lo sviluppo del gioco il più semplice possibile per gli sviluppatori, una tendenza che continuerò con Phaser che si evolve.
Mi scuso in anticipo rispetto a uno dei seguenti (o superiori!) Suoni un po 'di marketing. Phaser è un prodotto gratuito, non facciamo soldi con il tuo utilizzo e, se ne entusiasmo, è solo perché sono appassionato di ciò che ho creato. Quindi, per favore abbiate pazienza con me!
Phaser è una libreria JavaScript progettata per funzionare su tutti i principali browser desktop. Ciò include Internet Explorer 9 e versioni successive, Firefox, Chrome e Safari. Prima di IE9 non supportava il canvas, quindi se hai assolutamente bisogno di un framework in grado di gestire il rendering DOM, Phaser non sarà adatto. Tuttavia, la domanda per questi tipi di giochi sta diventando prossima al minimo; semmai, sta cambiando l'altra direzione (verso WebGL).
Sul cellulare, Phaser viene eseguito su iOS5 e versioni successive all'interno di Mobile Safari. Su Android, viene eseguito in 2.2 e versioni successive sia nel browser di serie che in Chrome. Chrome è ora il browser Android standard, con versioni recenti che supportano anche WebGL, ma non puoi ancora ignorare i milioni di dispositivi Android legacy che rimangono in uso.
Grazie a Mozilla, abbiamo ricevuto numerosi dispositivi di test FFOS e abbiamo iniziato a verificare che Phaser funzioni bene su di essi. Finora, le cose sembrano buone, e produrremo guide di implementazione nel nuovo anno.
Abbiamo anche visto i giochi Phaser funzionare bene su dispositivi Tizen e perfettamente sotto il wrapper HTML5 Kindle, il che significa che puoi essere implementato su questi dispositivi "fuori dalla scatola". Con l'arrivo sul mercato di altri telefoni web, saremo sicuri di mantenere Phaser aggiornato per loro.
C'è una così vasta scelta di eccellenti pacchetti di sviluppo del gioco che hanno come obiettivo la creazione di app native (Unity, Corona, Loom e così via), che non era un'area alla quale volevamo dedicare molto impegno all'inizio, soprattutto se confrontata con i servizi sottovalutati mercato dei browser mobile.
Tuttavia, con lo sviluppo di wrapper come CocoonJS ed Ejecta, stiamo vedendo sviluppatori che usano Phaser per avvolgere i loro giochi e rilasciarli come app native. Quindi, nel 2014 inizieremo ad aggiungere il supporto per CocoonJS direttamente nel core, oltre al supporto per i wrapper desktop come node-webkit.
Evidenzeremo alcune delle funzioni che riteniamo essere le più importanti di Phaser dal punto di vista dello sviluppatore:
Potrebbe sembrare una strana "caratteristica", ma in realtà dovrebbe essere piuttosto avvincente. Phaser non usa pratiche di stile OO finte internamente. Non esiste una massiccia catena ereditaria o un sistema di componenti e non è necessario forzare gli oggetti in alcuna struttura di classe fissa. È una semplice catena di prototipi straight-forward, il modo in cui JavaScript doveva essere usato.
Questo non significa che non puoi costruire il tuo gioco in modo strutturato; lontano da esso. Tutto ciò significa che non lo facciamo imporre esso. Significa anche che Phaser è internamente molto facile da hackerare.
Ma mi piace TypeScript!
Bene, perché abbiamo anche un file di definizioni TypeScript! È disponibile una guida specifica sull'uso di Phaser con TypeScript.
Phaser ha un Loader di asset integrato che può gestire:
Esportiamo regolarmente i file di atlante di texture da Flash direttamente ai nostri giochi Phaser e supporta gli atlanti completamente ritagliati. Le risorse possono essere caricate in parte, memorizzate nella cache e estratte da URL diversi (per il supporto CDN) e puoi persino trasformare qualsiasi sprite in una barra di avanzamento con una singola riga di codice.
Internamente, Phaser utilizza Pixi.js per il rendering. Pixi è una grande libreria di rendering veloce che si concentra su Canvas e WebGL. È una biblioteca che continuiamo a contribuire per contribuire a far progredire le cose.
Per i tuoi giochi, questo significa che se il browser supporta WebGL, il giocatore otterrà un'esperienza più agevole. WebGL è comune su desktop ma sta ancora emergendo su dispositivi mobili; anche così, è qui che i giochi HTML5 sono diretti, quindi sostenerlo è vitale. L'ultima versione di Phaser ha introdotto lo shader WebGL e il supporto per i filtri, mentre quelli futuri implementeranno mappe normali in modo da poter beneficiare di nuovi strumenti come Sprite Lamp.
L'audio è stato per molto tempo uno dei punti più deboli dei giochi HTML. Solo un paio di anni fa ci trovavamo di fronte alla scelta di disporre di un singolo canale di audio a latenza elevata che avrebbe paralizzato il dispositivo durante la riproduzione o non avrebbe affatto audio. Ma i tempi sono cambiati e l'API Web Audio è arrivata alla nostra salvezza. Consente il corretto supporto audio basato su nodo, con più canali, routing dei nodi e tutti i tipi di effetti. Quindi Phaser supporta pienamente Web Audio.
Tuttavia, su Android in particolare, molti dispositivi ancora non supportano thi-così supportiamo anche Audio legacy e l'uso di Audio Sprites: il metodo per raggruppare un gruppo di campioni in un singolo file e utilizzare i marker di riproduzione per passare a diversi effetti. Phaser si scambierà tra i due in base alle funzionalità del dispositivo e include anche lo sblocco automatico del sottosistema audio per te, qualcosa che attira un sacco di sviluppatori mobili per la prima volta!
Quando si supportano desktop e dispositivi mobili, esiste un numero sempre più vario di potenziali opzioni di input. Phaser supporta tastiera, mouse, touch, MSPointer (ora Puntatore sotto IE11) e combinazioni di questi. Ad esempio, sui dispositivi Windows Surface è possibile passare dall'utilizzo di un mouse e toccare, o addirittura utilizzare entrambi insieme.
Per l'input tattile, Phaser è in grado di gestire sia gli ambienti a tocco singolo sia quelli multi-touch. È possibile definire fino a 10 punti di tocco e seguirli tutti in modo indipendente, utilizzando i loro eventi per gestire interazioni Sprite come trascinamento, tocco e collisione.
In bundle nella libreria principale sono i sistemi ArcadePhysics e ArcadeParticles. Si tratta di semplici librerie leggere AABB che consentono di applicare la gravità e il movimento a qualsiasi Sprite, quindi verificare la collisione e la separazione. Utilizzando un quadripree basato sul mondo per ridurre al minimo i test di collisione, è possibile ottenere rapidamente risultati decenti con poco tempo di elaborazione richiesto.
Tuttavia, comprendiamo che questo non si adatta a tutti i tipi di giochi, quindi il sistema fisico è facile da sostituire e nessuna delle proprietà fisiche è legata agli sprite effettivi (ma piuttosto a un componente del corpo), quindi può essere scambiata per Mi piace di Box2D o p2.js. È anche integrato un sistema di interpolazione che consente di interpolare facilmente oggetti o proprietà. E se il gioco si interrompe, tutte le tue interpolazioni si fermeranno automaticamente e riprenderanno secondo necessità.
Il nostro obiettivo è che il nucleo di Phaser alla fine si stabilizzerà e raggiungerà un buon equilibrio stabile, in cui non è probabile che lo tocchino molto oltre le correzioni e gli aggiornamenti del browser. Tuttavia, vogliamo che Phaser continui a crescere, fornendo funzionalità per tutti i tipi di giochi, ma senza far esplodere la crescita della libreria di base. A tal fine, abbiamo creato un sistema di plugin.
I plug-in Phaser possono registrarsi con il core framework, essere aggiornati in linea con il core loop del gioco ed eseguire ogni tipo di attività aggiuntive utili. Un ottimo esempio di questo è il plugin per la ricerca del percorso EasyStar rilasciato di recente. Pubblicheremo i plugin da soli e ci aspettiamo di vederne altri provenienti dalla community in futuro.
Qui tratteremo dove scaricare Phaser, come impostare lo sviluppo e da dove iniziare.
Il progetto Phaser è ospitato su GitHub all'indirizzo https://github.com/photonstorm/phaser. Ci sono due rami principali: master è dove è possibile trovare l'ultima versione stabile, e dev è dove viene costruita la versione work-in-progress. Non appena viene completata una nuova versione, passiamo da dev a master e quindi dev viene aggiornato per preparare la prossima versione. A meno che tu non sappia che hai bisogno del ramo dev, dovresti sempre iniziare con il master.
Idealmente, dovresti usare git e checkout o biforcare il repository, così puoi facilmente aggiornarlo. Ma se sei nuovo o non ti piace usarlo ancora, c'è la possibilità di scaricare anche un file zip dell'intero repository.
Post correlati
Una volta scaricato, ti consigliamo vivamente di seguire la Guida introduttiva ufficiale. Questo ti guiderà attraverso la configurazione di un server web locale, la scelta di un ambiente di sviluppo e persino la creazione nel cloud, se lo desideri.
La guida si divide nelle seguenti sezioni:
C'è anche una guida equivalente per TypeScript.
Con il tuo ambiente di sviluppo impostato, è il momento di costruire un gioco. Ti consigliamo di iniziare con la creazione del tuo primo tutorial di gioco Phaser. Ti guiderà attraverso il processo di creazione di un semplice gioco di piattaforma, ti introdurrà ai concetti chiave di come funziona Phaser e ti preparerai ad espanderlo e ad imparare di più.
Quando esegui il checkout o scarichi Phaser, arriverà con la nostra suite di esempi. Si tratta di un sito Web autonomo che comprende oltre 170 diversi esempi di codice, suddivisi in aree chiave: fisica, collisione, sprite, testo e altro. Ogni esempio è un pezzo di codice completamente funzionante che puoi aprire, modificare facilmente e imparare da. Utilizzati in congiunzione con i documenti API, rappresentano una corsia preferenziale per l'apprendimento rapido di parti specifiche di Phaser.
I documenti API sono disponibili all'interno del repository Phaser in docs cartella. Abbiamo lavorato duramente sui documenti per alcuni mesi e, anche se ancora un po 'approssimativi, sono ora completi, coprendo l'intero framework.
La versione più recente (1.1.3) ha visto un altro grande aggiornamento per loro, con molte aree compilate con maggiori dettagli, ed è nostra missione in corso migliorare i documenti con ogni nuova versione di Phaser.
Dalla versione 1.1.3 di Phaser, il framework completo viene ora eseguito tramite JSHint prima del rilascio. Forniamo anche il nostro file di configurazione nel repository.
JSHint è un modo per garantire che il codice del framework segua un insieme fisso di linee guida per la struttura del codice, dal modo in cui gestiamo tabulazioni e rientri a nomi di variabili e stili di quote. Coloro che desiderano contribuire a Phaser dovrebbero verificare i loro aggiornamenti rispetto alla nostra configurazione JSHint.
Se hai seguito questo articolo capirai perché Phaser è grande, cosa abbiamo mirato a realizzare dal renderlo e come puoi imparare a fare giochi con esso. Ma l'aspetto più importante di qualsiasi framework di gioco non sono tanto le funzionalità che lo sport o le demo tecniche, è la comunità dietro di esso.
Fare un gioco è un duro lavoro, punto. Ed è ancora più difficile da fare in isolamento, con un framework nuovo di zecca che quasi certamente funziona in modo diverso da qualsiasi cosa tu abbia usato in passato. Per fortuna, Phaser ha una fiorente comunità basata su di esso.
Abbiamo creato il forum HTML5 Game Devs poco tempo fa, non specificamente per Phaser, ma semplicemente perché creare giochi HTML5 era un'area così nuova che volevamo essere in grado di parlarne con altri. Da allora, è andato sempre più forte, con schede attive, 250.000 visualizzazioni al mese e una base di utenti amichevole e professionale.
Era logico che lo usassimo come la casa ufficiale di Phaser, e lì troverai molti amici devoti per rimbalzare idee e domande. Il forum è anche sede di altre grandi librerie, tra cui Pixi.js e il framework 3D di Babylon.js, e c'è una grande area Games Showcase per mettere in mostra tutto ciò che fai di continuo ogni giorno è per me fonte di ispirazione costante, e è davvero bello vedere cosa stanno facendo gli sviluppatori per far funzionare HTML5 in questi giorni.
La newsletter Phaser viene pubblicata una volta al mese e contiene dettagli sulle nuove versioni, brevi articoli sui nuovi argomenti di Phaser e plug-in e tutorial. L'abbonamento è, ovviamente, gratuito ed è gestito tramite Campaign Monitor, quindi puoi essere certo di non avere spam e un modo semplice per annullare l'iscrizione se desideri.
Puoi aiutare a modellare il modo in cui Phaser cresce. Se trovi un bug, per favore segnalalo. Non ci vorrà molto, e ad oggi abbiamo risolto oltre il 91% di tutti i problemi segnalati (e stiamo ancora lavorando sull'altro 9%). Puoi anche inviare richieste di pull al ramo di sviluppo o rilasciare i tuoi plugin o filtri.
Trascorriamo molte ore instancabili lavorando su Phaser perché vogliamo che sia il miglior framework di sviluppo di giochi HTML5 che possa essere. Comprendiamo che non sarà perfetto per tutti, e siamo d'accordo. Ma se lo usi e produci qualcosa, non importa quanto tu pensi che sia piccolo, ti preghiamo di farcelo sapere. Non crederai con una vera spinta motivazionale quando gli sviluppatori ci mostrano i giochi su cui stanno lavorando! Raggiungici o sul forum, tramite Twitter (@photonstorm) o via email.
Soprattutto, speriamo davvero che tu possa divertirti a fare il tuo gioco.
Accentsconagua