Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. How to Learn
Gamedevelopment

Come imparare l'HTML5 Game Engine Phaser

by
Length:LongLanguages:

Italian (Italiano) translation by Chip (you can also view the original English article)

Phaser è un framework per giochi HTML5 open source creato dalla Photon Storm. E' progettato per sviluppare giochi che girano su desktop e su browser web per cellulari. E' stata rivolta un sacco di attenzione alla performance all'interno del browser web per cellulari, un settore in crescita ed importante dei giochi su web. Infatti se il dispositivo è in grado di usarlo viene scelto per il rendering con WebGL, altrimenti si continua a usare il classico Canvas. In questo articolo, tratteremo le risorse per l'apprendimento di Phaser, mostreremo cosa può fare e tratteremo un po' dei concetti che stanno alla base del suo design.

header

Ancora un altro framework di giochi HTML5?!

Di framework nuovi per giochi HTML5 ne escono in continuazione ogni settimana tale è la loro proliferazione. Allora perché dovremmo prendere in considerazione Phaser tra tutti i presenti? Mi piace pensare che il motivo abbia a che fare con l'eredità che porta con se il team coinvolto nella sua costruzione.

Noi di Photon Storm, da sette anni, non si siamo dedicati ad altro che allo sviluppo di giochi HTML5, quando ancora non c'era molta scelta di framework ed il numero di sviluppatori di giochi HTML5 si poteva contare con una sola cifra. Provenendo da Flash ed entrati così presto in quest'altra realtà, abbiamo da subito sentito il bisogno di crearci strumenti simili a quelli cui eravamo abituati in AS3.

Siamo stati grandi appassionati di Flixel e abbiamo goduto di un certo successo sia con i nostri giochi che con il nostro strumento Flixel Power Tools. Fu un vero successo vedere altri sviluppatori usarli per rilasciare i loro giochi e questo era qualcosa che abbiamo voluto duplicare in HTML5.

flixel-power-toosls

Quello però a cui non eravamo preparati, era quanto fosse veloce il passaggio al mondo HTML5. Anche oggi, ho una slide nelle mie presentazioni che mostro nelle conferenze dove si dice "Siate pronti a disimparare ciò che sapete ogni sei mesi" e credo che questo sia ancora vero. I browser dei principali produttori stanno cambiando e migliorando ad un ritmo fenomenale in questo momento. Bastano poche settimane per veder spuntare nuove funzionalità per il pubblico e se siete ancorati ad una struttura di gioco che si mantiene molto statica nel tempo o avete un ciclo di rilasci troppo lento, non ci vorrà molto prima le vostre cose diventino vecchie.

Un altro segno di questo cambiamento c'è stato nel tipo di lavoro che il cliente ci hanno incaricato di costruire. Come azienda facciamo solo due cose: creiamo giochi HTML5 e creiamo Phaser. Abbiamo costruito giochi HTML5 per alcuni dei più grandi marchi mondiali di intrattenimento il che ci ha dato una forte penetrazione nella conoscenza dei requisiti che spesso vengono richiesti. La principale richiesta che ci veniva fatta era di lavorare su giochi che funzionassero all'interno dei browser su mobile; troppi framework HTML5 si concentrano sul desktop, dove le prestazioni sono abbondanti ed i collegamenti veloci e stabili, ed ignorano il lato che riguarda i browser su mobile. Eppure è qui dove vediamo più forte la richiesta da parte dei clienti. Così è stato di vitale importanza che Phaser potesse essere utilizzato per costruire i giochi dei nostri clienti indipendentemente dalla piattaforma.

Fin dal rilascio di Phaser 1.0, gli aggiornamenti sono stati regolari e completi, con molte nuove caratteristiche e correzioni rilasciate rapidamente. Noi lavoriamo con un ciclo che dura circa un mese dalla versione di sviluppo al rilascio - è possibile visualizzare un completo changelog su GitHub. È interessante notare che, ora stiamo vedendo un domanda di giochi in esecuzione all'interno di un WebView, quindi faremo in modo che Phaser funzioni bene in questo ambiente per il 2014.

Il mantenimento di Phaser fino ad oggi, è stato di fondamentale importanza per noi che abbiamo costruito qualcosa che era davvero facile da usare. E vedrete questo riflettersi in tutto il framework. Questo deriva dalla nostra esperienza con Flixel Power Tools, e prima di questo quando lavoravo per The Game Creators , cioò ha contribuito a definire la forma dei loro linguaggi di gioco. Credo che abbia sempre fatto parte di me il voler rendere la creazione dei giochi il più semplice possibile per gli sviluppatori, una tendenza che continua con l'evolversi di Phaser.

Mi scuso in anticipo se quello che segue (o che sta scritto sopra!) suona un po come 'di marketing'. Phaser è un prodotto gratuito, non ci facciamo soldi con voi che lo utilizzate e se mi entusiasmano, è solo perché sono appassionato di quello che ho creato. Quindi, per favore abbiate pazienza con me!


Per quali piattaforme posso sviluppare con Phaser?

Desktop Browsers

Phaser è una libreria JavaScript progettata per funzionare su tutti i principali browser desktop. Questi includono Internet Explorer 9 e superiori, Firefox, Chrome e Safari. Prima di IE9 il canvas non era supportato, quindi se avete assolutamente bisogno di un framework in grado di gestire il rendering via DOM, Phaser non sarà adatto. Tuttavia, la domanda per questo tipo di giochi sta diminuendo; se non altro, stiamo andando nella direzione opposta (verso WebGL).

Mobile Browsers

Sul cellulare, Phaser gira su iOS5 e soprattutto all'interno di Safari Mobile. Su Android, viene eseguito con il 2.2 e superiori sia col browser di fabbrica che in Chrome .. Chrome è ora il browser standard di Android e con le versioni più recenti supporta anche WebGL, ma non possiamo ignorare i milioni di dispositivi Android datati che rimangono in circolazione.

connect_me_factory

Firefox OS, Tizen, and Kindle

Grazie a Mozilla, abbiamo ricevuto un gruppo di dispositivi per testare FFOS, e ne abbiamo iniziato a garantire il buon funzionamento con Phaser. Finora, le cose sembrano andare bene, produrremo guide per la distribuzione nel nuovo anno.

Abbiamo visto anche che i giochi Phaser funzionano bene sui dispositivi Tizen e senza problemi sotto il wrapper (n.d.a. libreria per l'astrazione software) Kindle HTML5, questo significa che è possibile distribuire per questi dispositivi "out of the box". Man mano che altri cellulari con connessione web inizieranno ad entrare nel mercato, saremo sicuri di mantenere Phaser aggiornato anche per loro.

App native e EXE Desktop

C'è una tale scelta di ottimi pacchetti per lo sviluppo di gioco che hanno come target la creazione di applicazioni native (Unity, Corona, Loom, e così via), che non abbiamo voluto impegnare troppo sforzo che coprire questa area, soprattutto se paragonata al mercato sottostimato di browser mobile.

Tuttavia, con lo sviluppo di wrapper come CocoonJS e Ejecta, stiamo vedendo gli sviluppatori utilizzare Phaser per i loro giochi rilasciandoli come applicazioni native. Così, entrando nel 2014 inizieremo ad aggiungere il supporto per CocoonJS direttamente nel cuore del progetto, così come il supporto per i wrapper desktop come node-webkit.

okai

Caratteristiche principali

Evidenzieremo ciò che consideriamo essere le caratteristiche più importanti di Phaser dal punto di vista dello sviluppatore:

E' JavaScript puro

Questa può sembrare una strana 'caratteristica', ma dovrebbe in realtà essere abbastanza convincente. Phaser non usa alcuna pratica di finto OO-stile internamente. Non c'è nessun sistema di ereditarietà a catena o di componenti di sistema, e non c'è bisogno di forzare i vostri oggetti in qualsiasi struttura di classe fissa. Si tratta di una semplice catena di prototipi straight-forward (n.d.a. a senso unico), che il modo in cui JavaScript è stato pensato per essere utilizzato.

Questo non significa che non si può costruire il vostro gioco in modo strutturato;tutt'altro. Tutto ciò significa che noi non lo imponiamo. Significa anche che Phaser è internamente molto facile da modificare.

Ma mi piace TypeScript!

Bene, perché abbiamo pure un file di definizioni TypeScript! C'è disponibile una guida specifica all'uso di Phaser con TypeScript.

phaser-typescript

Un facile caricamento degli Asset

Phaser gestisce un sistema integrato di caricamento degli asset:

  • Immagini
  • Sprite Sheets (con frame a dimensione fissa)
  • Texture Atlases (tra cui Texture Packer, JSON Hash, JSON Array, Flash CS6/CC e i formati di XML Starling)
  • Files audio
  • Files Dati (XML, JSON, text pieno)
  • File JavaScript (in modo da poter caricare i vostri giochi o risorse basate JS)
  • Tilemaps (CSV ed il formato di mappe Tiled)
  • Fonts di Bitmap

Noi abitualmente esportiamo file di texture atlas da Flash direttamente nei nostri giochi Phaser e supportiamo anche atlas completamente tagliati. Gli assets possono essere parzialmente caricato, messi in cache, e presi da URL diversi (per il supporto CDN) e si può anche trasformare qualsiasi sprite in una barra di avanzamento con una sola riga di codice.

Rendering: WebGL e Canvas

Internamente, Phaser utilizza Pixi.js per il rendering. Pixi è una fantastica e veloce libreria di rendering che si concentra su Canvas e WebGL. Si tratta di una libreria a cui continuamente contribuiamo per portarla avanti.

Per i vostri giochi, questo significa che se il browser supporta WebGL per il giocatore sarà un'esperienza più fluida. WebGL è comune sul desktop, ma ancora emergente sui cellular la dove i giochi HTML5 sono diretti ed in futuro sarà di vitale importanza supportalo. L'ultima versione di Phaser ha introdotto gli shader ed i filtri WebGL, e le prossime aggiungeranno le mappe normali in modo da poter beneficiare di nuovi strumenti come Sprite Lamp.

phaser-shaders

Audio: Web Audio eLegacy Audio

L'audio è stato uno dei punti più deboli di giochi HTML per lungo tempo. Solo un paio di anni fa, ci siamo trovati di fronte alla scelta di avere un singolo canale audio ad alta latenza che paralizzava il dispositivo durante la riproduzione o non avere l'audio. Ma i tempi sono cambiati e la API Web Audio è stata la nostra salvezza. Consente il corretto supporto audio per nodi, con più canali, il routing di nodo e tutti i tipi di effetti. Così Phaser supporta pienamente Web Audio.

Tuttavia, su Android soprattutto, un sacco di dispositivi ancora non lo supportano, così ancora supportiamo il vecchio audio e l'uso di Audio Sprites: il metodo di pacchettizzare un gruppo di campioni audio insieme in un unico file e l'utilizzo di indicatori di riproduzione per passare ai diverso effetti. Phaser cambierà tra i due a seconda delle funzionalità del dispositivo e sbloccherà automaticamente il sotto-sistema audio per voi, qualcosa che occupa un sacco di sviluppatori di telefonia mobile per la prima volta!

peterrabbit

Input: Multi-tatto, Tastiera, Pointer, Mouse

Nel mantenere desktop e mobile sono presenti sempre un numero variegato di potenziali opzioni di input. Phaser supporta la tastiera, il mouse, il tatto, MSPointer (ora Pointer sotto IE11), e loro combinazioni. Ad esempio, sui dispositivi di Surface di Windows potete passare dal mouse al tocco o addirittura utilizzarli entrambe.

Per l'input tocco, Phaser copre sia le situazioni sia single-touch che multi-touch. È possibile definire fino a 10 punti di contatto e monitorarli in modo indipendente, usare i loro eventi per gestire le interazioni Sprite come il trascinamento, tapping, e la collisione.

wolfblood

Fisica, Tweens (interpolazioni), e sistemi particellari

In bundle nella libreria di base ci sono le ArcadePhysics ed i sistemi ArcadeParticles (n.d.a. fisica e sistema particellare per arcade). Queste sono semplici e leggere librerie AABB (n.d.a. un sistema di collisioni) che consentono di applicare la gravità e il movimento a qualsiasi Sprite, quindi verificare collisioni e le separazioni. Utilizzando un ambiente basato su albero quadtree per ridurre al minimo i test di collisione, è possibile ottenere rapidamente risultati decenti richiedendo poco tempo di elaborazione.

Tuttavia, ci rendiamo conto che questo può non soddisfare tutti i tipi di giochi, per questo il sistema di fisica è facile da sostituire e nessuna delle proprietà fisiche sono associate agli sprite effettivi (ma piuttosto ad un componente corpo), così da essere sostituita facilmente con librerie del calibro di Box2D o p2.js. C'è anche un un sistema di interpolazione interno, che consente di interpolare oggetti o proprietà facilmente. E se il gioco viene messo un pausa, tutte le vostre interpolazioni verranno messe automaticamente in pausa e riprenderanno solo se necessario.

phaser-particles

Plugins

Il nostro obiettivo è che il nucleo di Phaser finisca per stabilizzarsi, non siamo propensi a toccarlo molto oltre le correzioni e gli aggiornamenti dei browser. Tuttavia, vogliamo portare Phaser a crescere, fornendo funzionalità per tutti i tipi di giochi, ma senza far esplodere la libreria di base. A tal fine, abbiamo costruito in un sistema di plugin.

I plugin in Phaser potranno registrarsi con il framework di base, venire aggiornati in linea con il ciclo di gioco di base, ed eseguire tutti i tipi di attività. Un grande esempio di questo è il plugin EasyStar path finding recentemente rilasciato. Rilasceremo anche noi dei plugin e ci aspettiamo di vederne provenire anche dalla comunità in futuro.


Iniziamo

Qui vedremo da dove scaricare Phaser, come impostarlo per lo sviluppo e da dove cominciare.

Scaricare Phaser

Il progetto Phaser è ospitato su GitHub a https://github.com/photonstorm/phaser. Ci sono due rami principali: master è dove si trova l'ultima release stabile e dev è dove si trova la versione in lavorazione (work-in-progress). Non appena una nuova versione è stata completata, spostiamo dalla dev a master e quindi la dev viene aggiornata per prepararsi al prossimo rilascio. A meno di non ritenere necessario l'uso del ramo dev, si dovrebbe sempre iniziare con il master.

Idealmente, dovreste usare git ed eseguire il checkout o fare un fork (sdoppiamento) del repository, in modo da poterlo facilmente aggiornare. Ma se siete nuovi su git o non siete a vostro agio nell'usarlo, c'è la possibilità di scaricare un file zip di tutta la repository.

Questioni correlate

gravity-smash

La Guida introduttiva

Una volta scaricato, si consiglia vivamente di seguire la Guida introduttiva ufficiale. Questa vi guiderà attraverso la creazione di un web server locale, la scelta di un ambiente di sviluppo e anche la generazione nel cloud se lo desiderate.

La guida si divide nelle seguenti sezioni:

C'è anche una guida equivalente per TypeScript.

Creazione del vostro primo gioco

Con il vostro ambiente di sviluppo impostato, è il momento di costruire un gioco. Si consiglia di iniziare con il tutorial Making your first Phaser game. Che vi guiderà attraverso il processo di creazione di un semplice gioco a piattaforma, e vi farà conoscere i concetti fondamentali sul funzionamento di Phaser, fino a rendervi capaci di imparare di più espandendo la vostra conoscenza

phaser-starter-tutorial

Gli esempi di Phaser

Quando scaricate Phaser, sarà presente nella nostra suite di esempi. Questo è un sito web indipendente che si compone di oltre 170 diversi esempi di codice, diviso in aree chiave: Fisica, Collisione, Sprite, testo e altro ancora. Ogni esempio è un pezzo autonomo completamente funzionante di codice che facilmente possibile aprire, modificare e imparare. Utilizzato in combinazione con la documentazione delle API, rappresenta una via veloce per imparare rapidamente parti specifiche di Phaser.

phaser-examples

Documentazione API

La Documentazione API è disponibile all'interno del repository di Phaser nella cartella docs. Abbiamo lavorato duramente alla documentazione per un paio di mesi e anche se è un pò da smussare agli angoli, ora è globale e copre l'intera struttura.

La release più recente (1.1.3) ha visto un altro grande aggiornamento, un sacco di aree sono state riempite con maggiori particolari, è la nostra attuale missione migliorare i documenti di ogni nuova release di Phaser.

JSHint

Dalla versione 1.1.3 di Phaser, l'intero framework è gestito attraverso JSHint prima di ogni rilascio. Mettiamo a disposizione anche il nostro file di configurazione nel repository.

JSHint è un modo per garantire che il sorgente del framework segua una linea guida fissa della struttura del codice, dal modo in cui gestiamo le schede al il rientro delle tabulazioni al nome delle variabili e allo stile nelle citazioni. Coloro che desiderano contribuire a Phaser dovrebbero controllare i loro aggiornamenti con la nostra configurazione JSHint.


Passi successivi

Se avete seguito questo articolo avrete capito perché Phaser è grande, che cosa abbiamo cercato di ottenere e come si può imparare a farci giochi. Ma l'aspetto più importante di qualsiasi framework per giochi non sono tanto le caratteristiche che mostra o le sue demo tecniche, è la comunità che ci sta dietro.

Fare un gioco è un lavoro duro, punto. Ed è ancora più difficile da fare da soli, con un framework nuovo di zecca che funziona quasi certamente in modo diverso da qualsiasi altro abbiate usato in passato. Fortunatamente, Phaser ha una fiorente comunità nata intorno lui.

tildeath

Forum di giochi HTML5

Abbiamo istituito il forum di HTML5 Game Devs da poco tempo, non specificamente per Phaser, ma semplicemente perché il fare giochi HTML5 era una nuova area in cui volevamo poter parlare con altri. Da allora, siamo cresciuti, con un'attività alle volte di 250.000 visualizzazioni al mese ed una base di utenti amichevole e professionale.

Aveva senso usare il forum come sede ufficiale per Phaser, troverete un sacco di amici e compagni sviluppatori che propongono idee e a fanno domande. Il forum è anche sede di altre grandi librerie, tra cui Pixi.js e il framework 3D Babylon.js e c'è una grande area vetrina giochi per mostrare tutto quello che state facendo, partire da lì ogni giorno è una costante fonte di ispirazione per me ed è veramente bello vedere che cosa gli sviluppatori stanno riuscendo ad ottenere con HTML5 in questi giorni.

html5gamedevs

Notiziari (newsletter)

Il notiziatio di Phaser viene rilasciato una volta al mese e contiene i dettagli sulle nuove uscite, articoli brevi su nuovi argomenti di Phaser, plugin e tutorial. L'iscrizione è, naturalmente, gratuita, ed è gestito attraverso Campaign Monitor, in modo da poter essere certi di non ricevere spam ed avere un modo semplice per cancellarsi dall'iscrizione se desiderate.

Contribuire

È possibile contribuire al percorso di crescita di Phaser. Se trovate un bug, vi prego di segnalarlo. Non ci vorrà molto tempo, e fino ad oggi abbiamo risolto oltre il 91% di tutti i problemi segnalati (e stiamo ancora lavorando per gli altri 9%). È inoltre possibile inviare richieste sul ramo di sviluppo, o rilasciare i propri plugin o filtri.

Mostrate i vostri giochi!

Passiamo molte instancabili ore a lavorare su Phaser perché vogliamo che sia il miglior framework di sviluppo per giochi HTML5. Siamo consapevoli che non sarà perfetto per tutti. Ma se lo si utilizza per fare qualcosa, non importa quanto piccolo si pensa che sia, per favore fatecelo sapere. Non ci crederete ma è una vera spinta motivazionale per noi quando gli sviluppatori ci mostrano i giochi a cui stanno lavorando! Contattateci sul forum, via Twitter (@photonstorm) oppure via email.

Ma sopratutto ci auguriamo vi divertiate a creare il vostro gioco.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.