Advertisement
  1. Game Development
  2. Phaser
Gamedevelopment

Nuove Caratteristiche della Camera in Phaser

by
Difficulty:BeginnerLength:ShortLanguages:

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

Introdotte sin dalla versione 2.4.7 di Phaser, le nuove funzioni della fotocamera sembrano davvero interessanti e vale la pena di scoprirle. In questo tutorial vedrete come è facile applicare gli effetti della fotocamera nei giochi HTML5 costruiti con Phaser.

Nota: se avete bisogno di una introduzione al framework Phaser, è possibile farlo guardando Getting Started With Phaser: Building "Monster Wants Candy", dove ho buttato giù un codice sorgente e lo spiego in dettaglio.

Ci sono tre interessanti nuove funzionalità che è possibile utilizzare: il flash della fotocamera, la dissolvenza e lo shake (tremolio). Fanno esattamente quello che ci si può aspettare. Vediamo perché sono molto utili e dovrebbero essere considerati nel vostro prossimo progetto con Phaser.

Fino ad ora avevo usato il plugin Juicy per aggiungere tali funzionalità, ma il codice sorgente è stato abbandonato molto tempo fa ed ho dovuto gestirmelo da solo. Ora, con le caratteristiche incorporate come parte del codice sorgente di Phaser non mi devo preoccupare di eventuali problemi di compatibilità o aggiornamento del framework. E' anche molto più facile da implementare.

Il Template Phaser Enclave

Userò Il Template Phaser Enclave come caso di studio: è un insieme di funzionalità di base, dagli stati fino all'audio, dalla gestione dei punteggi fino alle interpolazioni e animazioni. Il modello è open source ed è disponibile su GitHub come parte dell'iniziativa open.enclavegames.com in modo da poter facilmente vedere come tutto sia implementato, compresi i nuovi effetti della fotocamera.

Enclave Phaser Template

Ok, passiamo alla vera implementazione.

Camera Flash

Il flash della fotocamera può essere utilizzato per colpire o per effetti di impatto, ad esempio, quando il giocatore viene colpito dal proiettile del nemico, lo schermo può diventare rosso per un breve momento. Ecco spiegato l'effetto flash della fotocamera con i suoi parametri:

Riempiamo lo schermo con il colore pieno e si svanisce fino ad un alfa 0 per tutta la durata predeterminata. È possibile utilizzare il parametro Force per sovrascrivere eventuali altri effetti di flash ed avere questo come l'unico in esecuzione in quel momento. Il colore predefinito è bianco, e il flash dura per mezzo secondo (500 millisecondi):

Il flash della telecamera può essere utilizzato per vari effetti. Nel Template Phaser Enclave, si fa un bel passaggio senza soluzione di continuità quando si arriva in un nuovo stato, per visualizzare il menu principale dopo tutte le risorse hanno terminato il caricamento. Invece di mostrare tutto istantaneamente, possiamo usare il flash con colore nero come base:

Viene eseguito alla fine della funzione create nel file MainMenu.js che rappresenta lo stato menu. È possibile vedere l'effetto in azione su una gif:

Enclave Phaser Template - Flash

Come si può vedere, si ottiene una bel effetto lisco. Ora passiamo allo svanire della fotocamera.

Camera Fade

Per rendere la sensazione di movimento tra gli stati completi, possiamo usare la dissolvenza per ottenere un lampo invertito e rendere lo stato fade out senza problemi. Se fatto correttamente, questo può portare un fade-out, fade-in che sembra davvero bello. Ecco la teoria:

I parametri sono esattamente gli stessi del flash della fotocamera, tranne il colore predefinito che non è il bianco, ma il nero:

Si inizia a riempire lo schermo da alpha 0 con il colore dato e si termina con un riempimento uniforme. Il codice sorgente dall'azione clickStart sul pulsante Start nel file MainMenu.js è simile a questo:

Si affievolisce lo schermo per un periodo di 200 millisecondi e quindi parte un nuovo stato per la stessa quantità di tempo per sincronizzare entrambe le azioni. Questo è come appare in azione:

Enclave Phaser Template - Fade

La combinazione di flash e dissolvenza da una bella transizione tra stati. Ora, passiamo per l'effetto tremolio.

Camera Shake

Un altro metodo della fotocamera Phaser utile è lo shake chepuò essere utilizzato quelle situazioni in cui un giocatore colpisce gli ostacoli mentre volando attraversa un campo di asteroidi o quando usa una potente bomba dall'inventario. Può essere eseguito quando c'è una collisione con oggetti di gioco che galleggiano sullo schermo.

Il primo parametro controlla quanto la fotocamera oscilla, il secondo per quanto tempo la scossa durerà. Il terzo, impostato a true serve per sostituire la scossa già in esecuzione. Il quarto controllala scossa orizzontalmente, verticalmente o entrambe e l'ultimo parametro decide se la fotocamera scuoterà al di fuori dei confini della scena visibile. Ecco l'esempio con i valori di default:

Scuote la fotocamera con 0.05 di intensità, per mezzo secondo (500 millisecondi), il parametro force è impostato su true, la telecamera si agita in entrambe le direzioni e anche al di fuori dei confini dello schermo di gioco. Se non è necessario personalizzare la scossa lasciate i parametri di default semplicemente omettendoli nella chiamata e funzionerà lo stesso come sopra:

Così la scossa appare realmente nel codice sorgente del Enclave Phaser Template quando è aggiunto nel file Game.js:

Gli ultimi tre parametri sono esattamente uguali a quelli standard, quindi potrebbero essere omessi, ma sono stati lasciati a scopo didattico. Guardatelo in azione:

Enclave Phaser Template - Shake

In questo caso l'intensità è inferiore rispetto al valore predefinito e la durata è minore per farlo sembrare un po 'più debole, in modo che non disturbi troppo il giocatore.

ResetFX

C'è anche un altro metodo molto pratico insieme ai tre spiegati sopra. È possibile resettare tutti gli effetti attivi, dal punto di vista della programmazione non c'è nemmeno bisogno di sapere se e quali sono in esecuzione al momento, c'è un metodo speciale resetFX che è possibile utilizzare.

Cancella immediatamente eventuali effetti in corso sulla telecamera e li rimuove dallo schermo.

Eventi

Se vogliamo sapere se uno specifico effetto è attivo o se è già conclusa, è possibile utilizzare gli eventi previsti dal framework: onFlashComplete, onFadeComplete, e onShakeComplete.

Ricordate l'esempio di dissolvenza sul pulsante click nel menu principale? È stato fatto attendendo una quantità fissa di tempo, quindi lo stato è stato commutato ad uno nuovo. Siamo in grado di farlo meglio utilizzando l'evento onFadeComplete:

Questo metodo è stato implementato nella fase successiva, nel file Story.js quando si passa dallo stato Story allo stato Game. Bisogna ammettere che sembra molto meglio e lo Stato viene lanciato esattamente quando l'effetto è completato, non importa quanto tempo duri.

Sommario

Come si può vedere, sono caratteristiche molto potenti quando si tratta di aggiungere "succo" o un pò di smalto ai vostri giochi. Sono allo stesso tempo anche molto facili da usare, ed è bello vederli nativamente implementati in Phaser.

Sentitevi liberi di prendere il codice sorgente del Enclave Phaser Template, applicare gli effetti e condividere così i link ai vostri giochi aggiornati nei nostri commenti!

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.