Share
Introdotte nella versione 2.4.7 di Phaser, le nuove funzionalità della fotocamera sono davvero interessanti e vale la pena provarle. In questo tutorial vedrai quanto è facile applicare gli effetti della fotocamera nei tuoi giochi HTML5 creati con Phaser.
Nota: se hai bisogno di un'introduzione al framework Phaser, puoi verificare come iniziare con Phaser: creare "Monster Wants Candy", dove suddividere il codice sorgente e spiegarlo in dettaglio.
Ci sono tre nuove interessanti funzionalità che puoi utilizzare: flash della fotocamera, dissolvenza e scuotimento. Fanno esattamente quello che puoi aspettarti da loro. Vediamo perché sono molto utili e dovrebbero essere considerati nel prossimo progetto di sviluppo di giochi con Phaser.
Fino ad ora utilizzavo il plugin Juicy per ottenere tali funzionalità, ma il codice sorgente era stato abbandonato molto tempo fa e dovevo gestirlo da solo. Ora, con le funzionalità incorporate e parte del codice sorgente Phaser, non devo preoccuparmi di problemi di compatibilità o aggiornamenti del framework. Sono anche molto più facili da implementare.
Userò Enclave Phaser Template come caso di studio: si tratta di un insieme di funzionalità di base, dagli stati attraverso l'audio e la gestione dei punteggi, a interpolazioni e animazioni. Il modello è open source e disponibile su GitHub come parte dell'iniziativa open.enclavegames.com, quindi puoi vedere facilmente come è stato implementato tutto, inclusi i nuovi effetti della fotocamera.
Ok, passiamo alla parte di implementazione effettiva.
Lampeggiante la fotocamera può essere utilizzata per gli effetti di impatto o impatto, ad esempio, quando il giocatore viene colpito dal proiettile nemico, lo schermo può diventare rosso per un breve momento. Ecco l'effetto della fotocamera flash con i parametri spiegati:
flash (colore, durata, forza);
Riempie lo schermo con il colore a tinta unita e svanisce verso l'alfa 0 per la durata specificata. Puoi usare il parametro force per sovrascrivere qualsiasi altro effetto flash e avere questo come l'unico in esecuzione nel momento corrente. Il colore predefinito è bianco e il flash dura per mezzo secondo (500 millisecondi):
flash (0xffffff, 500, false);
Lampeggiante la fotocamera può essere utilizzata per vari effetti. Nel modello Phaser di Enclave, rende piacevole una transizione senza interruzioni quando si apre un nuovo stato, per mostrare il menu principale dopo che tutte le risorse hanno completato il caricamento. Invece di mostrare tutto all'istante, possiamo usare il flash con il colore nero come base:
this.camera.flash (0x000000, 500, false);
Viene eseguito alla fine della funzione di creazione in MainMenu.js file che rappresenta lo stato del menu. Puoi vedere l'effetto in azione su una gif:
Come puoi vedere, questo consente di ottenere un effetto piacevole e uniforme. Ora passiamo alla dissolvenza della fotocamera.
Per rendere completa la sensazione di movimento tra stati, possiamo usare dissolvenza per ottenere un flash invertito e rendere lo stato sfumato uniformemente. Se fatto correttamente, questo può portare a un effetto dissolvenza in chiusura, che sembra davvero bello. Ecco la teoria:
dissolvenza (colore, durata, forza);
I parametri sono esattamente gli stessi del flash di una fotocamera, tranne il colore predefinito non è bianco, ma nero:
dissolvenza (0x000000, 500, falso);
Inizia a riempire lo schermo da alpha 0 con il colore specificato e termina con un riempimento solido. Il vero codice sorgente dal fare clic suStart azione sul pulsante Start in MainMenu.js il file assomiglia a questo:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, function () this.game.state.start ('Story');, this); Dissolvera lo schermo per un periodo di 200 millisecondi e quindi avvia un nuovo stato dopo lo stesso intervallo di tempo per sincronizzare entrambe le azioni. Questo è quello che sembra in azione:
Combinare il flash e la dissolvenza fa una bella transizione tra gli stati. Ora passiamo all'effetto shake.
Un altro utile metodo della fotocamera Phaser è shake: può essere utilizzato per situazioni in cui un giocatore colpisce gli ostacoli quando vola attraverso il campo di asteroidi o utilizza una potente bomba dall'inventario. Può essere eseguito quando si scontrano con gli oggetti del gioco che galleggiano sullo schermo.
shake (intensità, durata, forza, direzione, shakeBounds);
Il primo parametro controlla quanto la fotocamera sta tremando, e la seconda per quanto tempo durerà la vibrazione. Il terzo riguarda la sostituzione del movimento già in esecuzione se questo parametro è impostato su vero. Il quarto controlla lo shake orizzontalmente, verticalmente o entrambi, e l'ultimo parametro decide se la fotocamera si muoverà al di fuori dei limiti del mondo mostrando ciò che è lì. Ecco l'esempio con i valori predefiniti:
shake (0.05, 500, true, Phaser.Camera.SHAKE_BOTH, true);
Scuoterà la fotocamera con 0.05 intensità, per mezzo secondo (500 millisecondi), il vigore parametro è impostato su vero, la fotocamera tremerà in entrambe le direzioni e anche al di fuori dei confini del mondo. Se non hai bisogno di personalizzare lo shake e lasciare i parametri di default, puoi semplicemente ometterli nella chiamata e funzionerà come sopra:
agitare ();
E questo è il modo in cui l'oscillazione effettiva appare nel codice sorgente dell'Enclave Phaser Template quando i punti vengono aggiunti nel Game.js file:
this.camera.shake (0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);
Gli ultimi tre parametri sono esattamente uguali a quelli di default, quindi potrebbero essere stati omessi, ma sono stati lasciati a scopo didattico. Guardalo in azione:
In questo caso l'intensità è inferiore al valore predefinito e la durata è più breve per farla sentire un po 'più debole, quindi non distrarrà troppo il giocatore.
C'è anche un piccolo metodo pratico insieme a questi tre spiegati sopra. Puoi resettare qualsiasi effetto attivo, e dal punto di vista della programmazione non devi nemmeno sapere se ci sono delle corse in un dato momento - c'è uno speciale resetFX metodo che puoi usare.
this.camera.resetFX ();
Elimina immediatamente tutti gli effetti della telecamera in corso e li rimuove dallo schermo.
Se vuoi sapere se qualche effetto specifico è attivo o già terminato, puoi utilizzare gli eventi forniti dal framework: onFlashComplete, onFadeComplete, e onShakeComplete.
Ricorda l'esempio di dissolvenza sul pulsante clic nel menu principale? E 'stato fatto aspettando una quantità fissa di tempo, e poi lo stato è passato a uno nuovo. Possiamo farlo meglio usando il onFadeComplete evento:
clickContinue: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (function () this.game.state.start ('Game');, this); Questo modo è stato implementato nel passaggio successivo, nel Story.js file quando passi dallo stato di gioco a quello di gioco. Devi ammettere che sembra migliore e lo stato viene lanciato esattamente quando l'effetto è completato, indipendentemente dalla durata della sua durata.
Come puoi vedere, queste sono caratteristiche abbastanza potenti quando si tratta di aggiungere questo extra "succo" o lucido ai tuoi giochi. Sono allo stesso tempo anche molto facili da usare: è bello vederli implementati in modo nativo in Phaser.
Sentiti libero di prendere il codice sorgente di Enclave Phaser Template, implementare gli effetti e condividere link con i giochi appena aggiornati con noi nei commenti!
