Creare un Gioco in Flash – Parte 9: Aggiungere Musica ed Effetti Sonori

Introduzione
Iniziamo
Nemici Multipli
Game Over
Punteggi e Orologio
Tanti Piccoli Miglioramenti
Usiamo la Tastiera
Aggiungere un Preloader (Parte 1 - Parte 2)
Aggiungere Musica ed Effetti Sonori
Livelli Multipli
Salvare e Caricare Informazioni
Garbage Collection

In questa nona lezione dedicata allo sviluppo di giochi in flash inizieremo a deliziare gli altri sensi: è il turno infatti degli effetti sonori e delle musiche di sottofondo. Se non avete seguito la nostra serie di tutorial, prelevate il file zip alla fine della lezione precedente. Altrimenti, come d’uso ormai comune, prendete i vostri file di backup e via!

Cerchiamo la Musica

Ok, per prima cosa dobbiamo cercare tutti i file audio che ci servono: beh, internet è letteralmente pieno, stracolmo di siti che permettono di prelevare dei loop gratuitamente e di buona qualità. Per esempio, vi ricordate, prima, quando avevo parlato del sito 8bitrocket? Come ulteriore prova della sua qualità vi lascio il link della sezione musicale, dalla quale potrete scaricare svariati loop gratuiti disegnati proprio per flash. La versione completa di questi loop, invece, viene intorno ai 10$.

Se invece non vi piace, possiamo guardare anche altrove: uno dei siti più quotati è sicuramente Newgrounds, che da anni propone il meglio dei contenuti flash in circolazione. Oppure, ancora, troviamo Flash Kit e per quelli che proprio vogliono spendere dei soldi abbiamo SomaTone, famosa per “giochetti” quali Peggle, Medal Of Honor Frontline e World Of Warcraft.

Senza considerare, inoltre, che ci sono un sacco di strumenti che ci permettono di creare i nostri loop!

Flash, attualmente, supporta svariati tipi di audio: mp3, wav, aiff ed altri che sono riportati tutti nella lista ufficiale. C’è proprio l’imbarazzo della scelta! Dopo aver preso i file che vi servono, create una nuova cartella “Suoni” dentro la cartella principale (dove prima avevamo messo la cartella “Classi”) e metteteci i suoni dentro.

Portando la Musica nel Gioco

Per importare correttamente la musica nel nostro file .swf, dovremo necessariamente importarla nella nostra libreria, nel file .fla. Ovviamente tutto ciò è molto semplice: cliccate su “File > Importa > Importa nella Libreria”, selezionate la musica contenuta nella cartella dei suoni e cliccate su “Apri”. Dopo poco meno di un secondo i file appariranno nella libreria:

Ecco come appare un suono nella libreria.

Tramite il pulsante triangolare potrete riprodurre il suono per verificare di aver importato quello giusto. Se cliccate con il pulsante destro del mouse sul suono e selezionate la voce “Proprietà”, invece, vi si aprirà una finestra simile a quella del MovieClip:

^ Click per Ingrandire ^

Come vedete c’è un sacco di roba in questa finestra, vediamo un po’ di analizzarla:

Il primo “riquadro” contiene il nome del nostro simbolo (anche il file audio è identificato come tale). Di default il nome è quello del file originale importato;
Successivamente troviamo le informazioni riguardanti il file: dimensioni, posizione sull’hard disk e la data di creazione del file, oltre ovviamente alle informazioni sulla qualità e lunghezza;
Sulla sinistra potete invece vedere una rappresentazione grafica della sound wave;
Il pulsante “Aggiorna” chiede al Flash di ricaricare il suono dall’hard disk, nel caso siano state fatte modifiche esterne al file;
“Importa” permette di scambiare il file attuale con un altro importato, mantenendo le impostazioni attuali immutate;
“Prova” ed “Interrompi” possono essere usati per riprodurre ed interrompere il suono;
“Audio Dispositivo”, nella sezione di “Impostazioni Esportazione” è da utilizzare nel caso si debba usare un suono differente quando questo simbolo audio deve essere riprodotto su dispositivi come PDA o Smartphone che usano Flash Lite;
La sezione “Concatenamento” è praticamente uguale a quella per i pulsanti e Movie Clip.

Lasciate le impostazioni di esportazione nei valori di default; cambiate però il nome del suono in “BackgroundMusic” ed esportatelo per ActionScript. Il nome della classe sarà sempre BackgroundMusic e provvedete anche ad esportarlo per il primo frame, per il momento.

Play!

Bene, ora la musica è stata inclusa nel file .swf finale (se salvate tutto e testate, infatti, noterete che ora la dimensione del filmato è aumentata rispetto a prima), ma non abbiamo scritto da nessuna parte che deve essere riprodotta! Proprio come abbiamo fatto con altri simboli, anche stavolta lavoreremo via codice per aggiungere la musica alla nostra schermata di gioco.

Aprite il file AvoiderGame.as. Useremo due oggetti distinti per gestire la musica:

Il suono stesso (il simbolo BackgroundMusic, per intenderci);
Un “sound channel” che si occuperà di controllare questo suono.

Questi oggetti dovranno essere disponibili a livello di classe, per cui ci occuperemo di definirli con gli altri, globalmente.

public var backgroundMusic:BackgroundMusic;
public var bgmSoundChannel:SoundChannel;  //bgm for BackGround Music

BackgroundMusic è già nella libreria e verrà caricato normalmente. SoundChannel però dovrà essere importato! Per cui aggiungiamo al codice

import flash.media.SoundChannel;

e non avremo problemi. Il prossimo passo sarà quindi far partire la musica non appena verrà creata la schermata di gioco. Stiamo parlando del metodo costruttore

public function AvoiderGame()
{
  backgroundMusic = new BackgroundMusic();
  bgmSoundChannel = backgroundMusic.play();

La prima istruzione si occupa di inizializzare il suono dalla libreria, proprio come quando creiamo un nuovo oggetto di tipo Avatar con l’istruzione “avatar = new Avatar();”. La successiva istruzione invece si occupa di assegnare quel suono al SoundChannel, mandandolo in riproduzione (successivamente vi mostrerò come usare più canali per gestire più tipologie di suoni).

Se salvate e provate il gioco, il nostro suono partirà: l’unica fregatura è che verrà riprodotto una volta e basta, evitando altri loop. A breve risolveremo questo problema, ma ora una cosa più importante: dobbiamo fare in modo che il suono venga caricato dal nostro benedetto/maledetto preloader.

Per prima cosa, tra le proprietà del nostro suono leviamo il segno di spunta che indica che verrà esportato nel primo fotogramma. Tuttavia, proprio come gli altri MovieClip, in questo modo il suono non verrà importato e non saremo capaci di usarlo durante il gioco.

Per questo motivo dobbiamo provvedere subito ad aggiungerlo al nostro AssetHolder, tanto menzionato durante la lezione precedente. Quindi, doppio click sull’AssetHolder nella nostra libreria ed entreremo in fase di modifica del simbolo.

Cliccando con il pulsante destro del mouse su “Livello 1” selezioniamo “Inserisci Livello”.

Chiamiamolo in modo da ricordarci a cosa servirà, qualcosa come “BackgroundMusic” (si, lo so, sono dannatamente originale) (in realtà potete chiamarlo anche PongiBonzi o Poffarbaccoli, tanto al fine del codice non servirà a niente ) Una volta selezionato questo layer, trasciniamo sullo stage il nostro BackgroundMusic. Il fotogramma sulla linea temporale cambierà:

Da così…

… a così.

Cliccando con il pulsante destro del mouse su quel layer e selezionate “Inserisci Frame” per capire il perchè…

Stiamo visualizzando una rappresentazione grafica del suono :SS

Nota: prima di continuare annulla le ultime modifiche (intendo l’inserimento di questo nuovo frame). Devi essere sicuro che tutti i livelli occupino un solo frame, altrimenti avrai degli errori in fase di test. Non ancora riesco a capire per bene il perché, se qualcuno lo sa sarà mia premura aggiornare il post con il dovuto riferimento

Salvate il tutto, testate il gioco e simulate di nuovo il download: stavolta noterete che ci metterà un bel po’ di più rispetto a prima. Questo vuol dire che le cose vanno esattamente come devono andare!!! Infatti il nostro suono viene caricato nel file .swf finale regolarmente, ma fin quando non viene caricato completamente non viene riprodotto.

Ma c’è ancora un piccolo problema. La musica infatti verrà riprodotta appena il menu di gioco apparirà. E non è esattamente quello che vogliamo. Questo succede perché, avendolo trascinato nell’AssetHolder (e quindi trascinato sullo stage) un file audio viene riprodotto automaticamente… un po’ come un file grafico che viene mostrato subito!

In fase di modifca del nostro AssetHolder clicchiamo con il pulsante destro del mouse sul frame che contiene il suono. La seguente opzione sarà visibile:

Tutto quello che dobbiamo fare è cambiare il valore riportato nella listbox affianco a “Sincr.” (o “Sync” in inglese). Da “Evento” cambiamolo in “Interrompi”. Se testate ora il gioco, noterete che tutto funziona perfettamente.

Ora dobbiamo fare in modo che il suono venga riprodotto ciclicamente.

Ripetizioni

Ok, prima di partire riflettiamo un po’: come possiamo fare in modo di riprodurre ciclicamente e all’infinito il nostro file audio? Potremmo cambiare in questo modo il nostro codice:

public function AvoiderGame()
{
  backgroundMusic = new BackgroundMusic();
  bgmSoundChannel = backgroundMusic.play( 0, 10 );

L’istruzione backgroundMusic.play è cambiata. Abbiamo aggiunto due numeri come parametri, e non sono stati messi lì così a caso. Il primo indica che ogni volta che riprodurremo il nostro suono verrà riprodotto dall’inizio. Il secondo invece indica il numero di ripetizioni da effettuare.

Seguendo questo ragionamento potremmo impostare, ad esempio, 99.999 ripetizioni e starcene tranquilli! D’altronde, di questo passo una persona dovrebbe giocare al nostro gioco per nove giorni consecutivi per rimanere senza musica e per quanto possa essere divertente non credo esista qualcuno così deviato mentalmente.

Ma siamo pignoli, e vogliamo a tutti gli effetti che il nostro brano si ripeta all’infinito. Senza compromessi. E cosa faremo per raggiungere il nostro obiettivo?

Semplice, aggiungiamo un nuovo EventListener. L’evento che dobbiamo individuare, stavolta, è di tipo Event.SOUND_COMPLETE, e verrà gestito tramite il seguente codice:

public function AvoiderGame()
{
  backgroundMusic = new BackgroundMusic();
  bgmSoundChannel = backgroundMusic.play();
  bgmSoundChannel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished );

Notate che non abbiamo bisogno di importare nulla stavolta, dato che SOUND_COMPLETE fa parte di Event, che abbiamo già importato prima.

Ora creiamo l’EventHandler adatto:

public function onBackgroundMusicFinished( event:Event ):void
{
  bgmSoundChannel = backgroundMusic.play();
  bgmSoundChannel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished );
}

Notate che ho aggiunto l’eventListener un altra volta, nel metodo. Questo perché ogni volta che richiamiamo il metodo play() le informazioni sull’eventListener vengono perse. Considerate inoltre che questo metodo aggiunge una grande flessibilità. Senza problemi infatti potremmo gestire più tracce audio contemporaneamente.

I problemi, però, non finiscono qua. Se perdiamo la partita e andiamo in Game Over, infatti, la musica non si ferma e continua. Riavviando la partita tramite il pulsante apposito, infatti, viene creato un altro canale e il suono viene ripetuto due volte, in un modo davvero fastidioso.

La soluzione però è semplice. Basta dare la giusta istruzione quando, appunto, il nostro avatar viene a contatto con un nemico:

if ( avatarHasBeenHit )
{
  bgmSoundChannel.stop();
  dispatchEvent( new AvatarEvent( AvatarEvent.DEAD ) );
}

Una semplice istruzione dal nome altrettanto semplice: stop. Serve davvero che vi spieghi a cosa serve?

Aggiungiamo degli Effetti Sonori

Anche aggiungere gli effetti sonori, come per i clip musicali, è abbastanza semplice. Quello che farò in quest’ultima parte del tutorial sarà riprodurre un effetto ogni volta che verrà generato un nuovo nemico. Userò un suono chiamato Synth Bleep 4, trovato su FlashKit.

Proprio come prima, riassumiamo quello che dobbiamo fare per ogni file:

Salvare il file nella cartella dei suoni;
Importarlo nella libreria;
Dargli un nome utile al contesto (per esempio EnemyAppearSound);
Esportarlo per ActionScript (non al primo frame però);
Aggiungerlo su un nuovo livello dell’AssetHolder, impostando “Sincr.” su “Interrompi”.

Una cosa veloce. Ed ora un po’ di codice:

public var backgroundMusic:BackgroundMusic;
public var bgmSoundChannel:SoundChannel;  //bgm for BackGround Music
public var enemyAppearSound:EnemyAppearSound;
public var sfxSoundChannel:SoundChannel;  //sfx for Sound FX

Anche per il codice la procedura è quella di prima. Inizializzate il suono nel costruttore:

public function AvoiderGame()
{
  backgroundMusic = new BackgroundMusic();
  bgmSoundChannel = backgroundMusic.play();
  bgmSoundChannel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished );
  enemyAppearSound = new EnemyAppearSound();

Aggiungiamo quindi il codice per riprodurre il suono quando, appunto, un nuovo nemico viene creato:

if ( Math.random() &lt; 0.1 )
{
  var randomX:Number = Math.random() * 400;
  var newEnemy:Enemy = new Enemy( randomX, -15 );
  army.push( newEnemy );
  addChild( newEnemy );
  gameScore.addToValue( 10 );
  sfxSoundChannel = enemyAppearSound.play();
}

Salvate e testate. Sarà esattamente quello che ci aspettavamo! In realtà, potremmo gestire tutti i suoni con un solo SoundChannel, ma la scelta di differenziarli è dovuta a motivi vari: per esempio con due SoundChannel diversi possiamo sistemare i volumi come meglio crediamo!

E anche per questa lezione ce l’abbiamo fatta. Usate saggiamente i suoni perché aggiungono veramente tanto al vostro lavoro. Un “ding” quando il caricamento è completato oppure un suono triste per annunciare il Game Over. Le idee possono essere un milione.

I file della lezione, come al solito, possono essere scaricati da Qui.

Nella prossima lezione aggiungeremo un elemento in più al nostro gioco: più livelli per tutti!