Creare un Gioco in Flash – Parte 8: Aggiungere un Preloader (Parte 1 di 2)

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

Nelle prossime parti di questa serie di tutorials aggiungeremo un sacco di contenuti nuovi. Parlo di effetti sonori, musiche di sottofondo, livelli multipli e probabilmente svariate immagini di background, oltre ad immagini per altri usi. Tutti questi file renderanno il gioco molto più “pesante”: questo vuol dire che ci vorrà più tempo per caricare tutto quanto.

Per questo motivo, la lezione otto del nostro mini-corso verterà proprio su un componente fondamentale per evitare problemi con l’utente. Il Preloader. Uno strumento che si occuperà di controllare che tutti i contenuti del gioco siano stati scaricati. Solo in quel momento, quindi, il gioco verrà avviato. Un altro compito del preloader, inoltre, è di dare un’idea all’utente del punto in cui si trova durante il caricamento.

Sicuramente l’avrete notato, se avete mai giocato a qualche gioco Flash o visualizzato qualche sito realizzato con questa tecnologia. Dato che siete qui, penso proprio di si.

Vi avverto: questo sarà un tutorial molto, molto lungo rispetto agli altri, perché non starò semplicemente a darvi un metodo, ma lo spiegherò in ogni sua singola sfaccettatura. Alla fine di questo, però, sarete capaci di usare le stesse tecniche in qualsiasi vostro lavoro futuro.

Se non avete seguito le lezioni precedenti, scaricate i files della lezione dalla fine della lezione precedente.

Altrimenti prendete i vostri files di backup.

In ogni caso, aprite il file .fla e cominciamo

Perché mai rovinarci la vita con un Preloader?

Prima ancora di andare a scrivere del codice, voglio soffermarmi un po’ su una domanda che molti si pongono. Come andrebbero le cose nel caso non ci fosse nessun preloader? Beh, lavorando in locale come facciamo noi non notiamo niente di strano: essendo il nostro pc sul quale facciamo i test, il nostro gioco si carica istantaneamente e non ci accorgiamo di nulla.

Fortunatamente, il flash player permette anche di effettuare delle simulazioni di download per comprendere a pieno il funzionamento delle cose. Con il nostro file fla aperto, avviamo il test e, nella finestra che ci appare, clicchiamo su “Visualizza > Impostazioni Scaricamento > 14.4 (1.2 KB/s)”. In questo modo simuleremo una velocità di download differente da quella normale che ci mostrerà (anche se in maniera esagerata) come può apparire il nostro gioco su un pc di un utente che naviga su internet.

Dopodiché clicchiamo su “Simula Scaricamento”

Per circa otto secondi la nostra finestra sarà caratterizzata da un colore grigio e triste. Questo vuol dire che i contenuti del gioco sono in fase di download e quindi dobbiamo aspettare: una cosa quasi normale per coloro che navigavano nel web nel… 1992.

Al volo notiamo due cose: la procedura non è proprio user-friendly e si, sono passati diciotto anni. Tra l’altro, includendo vari file come per esempio le musiche di background, è possibile addirittura che venga caricato il gioco prima degli altri contenuti: giocheremmo quindi ad un gioco muto.

Ricapitolando, ecco i compiti a cui assolverà il nostro preloader:

Impedire qualsiasi interazione prima che i contenuti siano caricati;
Permettere all’utente di sapere a che punto si trova del caricamento.

e abbiamo anche una terza funzionalità, opzionale:

intrattenere l’utente, mantenendo la sua attenzione nell’attesa.

Iniziamo dal primo punto!

Aspettalo

In un certo senso, abbiamo già raggiunto il primo obiettivo. Cliccate con il pulsante destro del mouse su un qualunque simbolo della libreria e aprite la finestra delle proprietà:

Vedete il box “Esporta in Fotogramma 1”? Di deafult in genere è selezionato. Questo vuol dire che Flash non eseguirà nessun codice AS3 prima che tutti i simboli esportati nel primo fotogramma saranno caricati localmente. Dato che il MenuScreen è stato aggiunto via codice, quindi, non ci apparirà nulla a schermo finché i contenuti non saranno caricati.

Grande! Abbiamo raggiunto il nostro obiettivo senza fare niente! Il problema però è un altro, di carattere puramente estetico (e assolutamente importante allo stesso tempo): non possiamo ne dire all’utente cosa succede (quindi non saprà mai se ci sono stati eventuali problemi di caricamento) ne tantomeno potremo usare un animazione o del testo per il caricamento.

Questo non va assolutamente bene. Le cose infatti devono andare in altro modo: dobbiamo prendere il controllo del codice il prima possibile e, successivamente, aspettare che tutti i contenuti siano stati caricati per far partire finalmente il gioco.

Idealmente, avremo un simbolo che verrà scaricato prima di tutti gli altri e che si occuperà di informare e di intrattenere il giocatore prima dell’avvio del gioco. Sfortunatamente, questo ci porterà a percorrere un percorso lungo, noioso e a tratti irritante.

Detto questo (se non siete scappati tutti), possiamo partire.

Sotto a Chi Tocca

Come ho già detto in precedenza, Flash non eseguirà nessun codice prima che tutti i simboli esportati nel primo frame verranno caricati. Per questo motivo dobbiamo fare la prima cosa noiosa (nel caso abbiate molti file per il vostro gioco): selezionare uno ad uno i simboli nella vostra libreria, visualizzare le proprietà e quindi disabilitare l’esportazione al fotogramma 1.

Nota: in Flash CS4, fortunatamente, è possibile ovviare a questo problema. Cliccate con il pulsante sinistro del mouse sul primo elemento della libreria. Successivamente, tenendo premuto il tasto SHIFT, cliccate sull’ultimo. Verranno selezionati tutti gli elementi. Cliccate con il pulsante destro del mouse sulla selezione e aprite la finestra delle proprietà. Disabilitate quindi “Esporta in Fotogramma 1” e, dopo aver chiuso la finestra, le modifiche verranno applicate a tutti i simboli istantaneamente.

Potrebbero uscire dei messaggi simili al seguente:

Clicca sull’Immagine per Zoomare

l’uscita del seguente errore è legata al fatto che abbiamo usato la classe Counter come base per alcuni simboli. Sempre nella finestra delle proprietà degli eventuali simboli che diano questo problema, usate come classe base la seguente: flash.display.MovieClip e filerà tutto liscio.

Altri simboli invece non permetteranno di cliccare e selezionare la voce, dato che non li abbiamo esportati in ActionScript. Non vi preoccupate, andate avanti normalmente senza modificare nulla, la cosa non influenza il nostro lavoro.

Dopo aver seguito questa procedura, quindi, testiamo il nostro gioco. Otterremo un errore di questo genere:

Error 1120: Access of undefined property [nome di una proprieta']

Vi spiego subito cosa vuol dire: Flash è un po’ troppo “intelligente” per i nostri gusti. Infatti, avendo qualcosa nella libreria ma non sullo stage, Flash assume automaticamente che non ci serve e di conseguenza non lo include nel file swf che noi usiamo per il test.

Volendo fare un esempio prendiamo il MenuScreen: flash ha tutto il codice riguardante lo startButton ma nulla per quanto riguarda il MenuScreen, dato che non è stato incluso nel file swf come invece noi volevamo. Flash quindi si confonde e non capisce di cosa stiamo parlando.

Non essendo esportate per il fotogramma 1, infatti, i vari simboli non sono importati nel file del filmato finale, che usiamo per il test. Per risolvere questo problema dovremo disobbedire ad una delle regole che ci eravamo imposti nella prima lezione (e ve lo avevo anche anticipato ): parlo della Tecnica dei Tre Frame.

La Tecnica dei Tre Frame

Riassumendo, abbiamo bisogno di tutti gli oggetti della libreria sullo stage. Il problema però è che non possiamo mantenerli nel primo frame, in quanto nel primo frame Flash non eseguirà neanche un riga di codice. Sembra quasi un circolo vizioso!

La soluzione però è tanto ovvia quanto impensabile: metteremo tutto nel secondo frame! Proprio come abbiamo fatto con i pulsanti nella lezione quattro, o con l’oggetto clock nella lezione cinque, dobbiamo aggiungere un nuovo fotogramma chiave nella nostra linea temporale. Questa volta, però, andremo ad interagire con la linea temporale principale del nostro documento.

Per fare in modo di vedere la linea temporale principale, dopo aver aperto il vostro file .fla controllate che non ci sia nulla già selezionato. Cliccate quindi sul secondo frame della linea temporale ed inserite un nuovo fotogramma chiave.

Questo frame avrà un compito ben definito: conterrà tutti i simboli contenuti nella libreria (più avanti, anche i suoni). Dato che flash aspetta che tutti i contenuti siano caricati dal primo frame, mettere tutto nel secondo frame permette di:

verificare che tutto sia stato caricato;
prendere al volo il controllo totale e completo del codice.

A questo punto delle cose potremmo semplicemente trascinare tutti gli oggetti dalla libreria, però le cose si metterebbero male quando dovremmo trascinare i file audio. Sarebbe tutto molto confuso. Per questo motivo, ispirandomi ad un articolo scritto da Jeff Fulton di 8bitrocket.com, useremo una piccola tecnica.

Questa tecnica consiste nel creare un nuovo simbolo, che chiameremo “AssetHolder”. Non vi preoccupate ad esportarlo per ActionScript, non ce ne sarà bisogno. Ora, in fase di modifica di AssetHolder, trascinate tutti quanti i simboli nella libreria (tranne AssetHolder ovviamente) nel nuovo simbolo.

Questo è il nostro AssetHolder un semplice testo.

Lo so, è un po’ incasinata la cosa, ma non vi arrendete ora. Tornate ora sullo stage principale. Dopo essere sicuri di essere nel frame 2, prendete dalla vostra libreria l’AssetHolder, trascinandolo sullo stage.

Clicca per Ingrandire

Per fare le cose bene, assicuratevi che sia posizionato al di fuori della schermata visibile dall’utente, in modo tale da evitare “visualizzazioni non volute”. Se salvate il gioco in questo momento e lo avviate, otterrete il seguente errore ripetuto migliaia di volte:

ArgumentError: Error #1063: Argument count mismatch on Enemy(). Expected 2, got 0.
  at flash.display::Sprite/constructChildren()
  at flash.display::Sprite()
  at flash.display::MovieClip()

Cosa succede? Flash sta riproducendo il frame 1, quindi il frame 2, per poi riprendere dal frame 1 e continuando il loop all’infinito. Ogni volta che arriva al secondo frame prova a creare un oggetto di tipo Enemy. Creandolo ovviamente deve avere dei parametri in input (quelli che passiamo creando il nemico via codice) ma Flash, per quanto sia intelligente, non riesce proprio a capire da solo cosa deve passare.

Per questo motivo quindi abbiamo un errore. Fortunatamente risolverlo è facile: non dobbiamo fare altro che fermare il nostro filmato durante l’esecuzione, prima che raggiunga il frame 2. Quindi, stopparlo al primo frame.

Cliccando con il pulsante destro del mouse sul primo frame della linea temporale, selezioniamo “Azioni”. Ci si aprirà una finestra dove potremo inserire del codice: questo codice sarà eseguito tutte le volte che lo specifico frame selezionato verrà riprodotto.

Un sacco, veramente un sacco, di giochi sono stati creati posizionando il codice in questi pannelli delle Azioni. Ovviamente parlo dei giochi creati con Actionscript2. Il codice per eseguire l’operazione necessaria è ridicolosamente semplice.

Si. Uno Stop.

Chiudete il pannello delle azioni, salvate il gioco ed avviamolo. Riceveremo ancora un messaggio di errore, ma fortunatamente stavolta gli errori non sono più un milione, ma uno solo! Buon segno.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
  at MenuScreen()
  at DocumentClass()

Aprite la vostra classe documento (ci credete che non abbiamo scritto niente in questa classe dall’inizio della lezione?

) e la causa è ovvia. Date uno sguardo al costruttore:

public function DocumentClass()
{
  menuScreen = new MenuScreen();
  menuScreen.addEventListener( NavigationEvent.START, onRequestStart );
  menuScreen.x = 0;
  menuScreen.y = 0;
  addChild( menuScreen );
}

La prima linea di codice consente di creare un nuovo MenuScreen. L’errore riguarda proprio il MenuScreen. Non è, ovviamente, una coincidenza. Questo in poche parole significa che Flash sta cercando di eseguire il codice prima ancora che tutti i contenuti siano stati caricati.

E non abbiamo quindi raggiunto il nostro obiettivo, prendendo possesso del codice prima ancora che tutto venga caricato?

Risolviamo anche quest’ultimo errore legato al codice, semplicemente muovendo il codice legato al MenuScreen in una nuova funzione, fuori dal costruttore. L’ho chiamata showMenuScreen(), di tipo void ovviamente.

public function DocumentClass()
{

}

public function showMenuScreen():void
{
  menuScreen = new MenuScreen();
  menuScreen.addEventListener( NavigationEvent.START, onRequestStart );
  menuScreen.x = 0;
  menuScreen.y = 0;
  addChild( menuScreen );
}

Se salvate il gioco ed eseguite i test, adesso, non riceverete più nessun messaggio di errore! Dato che abbiamo dato l’ordine di stop, però, il gioco non vedrà mai il vostro schermo. Dovremmo proprio risolvere anche questo problema

Bene, Ci Siamo?

A livello molto, molto basilare, un preloader deve essere capace di controllare quando l’intero file è stato caricato. Quindi, successivamente, deve avviare il gioco. E’ tempo di creare un nuovo Event Listener!

public function DocumentClass()
{
  loaderInfo.addEventListener( Event.COMPLETE, onCompletelyDownloaded );
}

Non vi spaventate, come al solito spiego tutto:

loaderInfo: è un oggetto già disponibile in flash che contiene tutte le informazioni relative al progresso riguardante il caricamento del file;
Event.Complete: provate ad indovinare??? Ebbene si, è l’evento che si verifica quando tutto il file swf viene scaricato localmente con successo.

Nonostante questo sia un evento decisamente importante, Flash non ci risparmia la sua importazione nella classe documento. Modificate come segue:

import flash.display.MovieClip;
import flash.events.Event;

E come per ogni evento che si rispetti dobbiamo creare l’EventHandler (il metodo da lanciare nel caso si verifichi l’evento):

public function onCompletelyDownloaded( event:Event ):void
{
  showMenuScreen();
}

In poche parole abbiamo richiamato il metodo necessario a creare il MenuScreen e a mostrarlo a video. Le cose iniziano ad avere un senso, vero? Ormai dovreste capire bene gli eventi e il loro funzionamento!

Nonostante la logica dica così, c’è ancora un piccolo ostacolo da superare. Provate a ricordare, in quale frame abbiamo messo il nostro AssetHolder con tutti i contenuti necessari? Nel frame 2. Tuttavia, se proviamo a far andare il gioco nel frame 2 le cose non vanno, per quel problema legato al costruttore della classe Enemy.

Per questo motivo, tornando al nostro file .fla principale, creeremo un nuovo KeyFrame. Sulla linea temporale, in corrispondenza del frame 3, cliccate con il pulsante destro del mouse e selezionate “Inserisci Fotogramma Chiave Vuoto”.

In questo modo, una volta giunti al frame 3, tutto sarà pronto e avviato. Sarà proprio nel terzo frame infatti che il gameplay potrà avere luogo senza problemi.

Nella classe documento, in corrispondenza della funzione onCompletelyDownloaded(), aggiungiamo una linea di codice:

public function onCompletelyDownloaded( event:Event ):void
{
  gotoAndStop(3);
  showMenuScreen();
}

L’istruzione gotoAndStop(3); indica al programma che deve andare direttamente al terzo frame. Salvate tutto, se volete incrociate le dita… e ci siamo riusciti, ora le cose funzionano!

Congratulazioni! Avete finalmente portato a compimento uno dei compiti più noiosi, irritanti ed allo stesso tempo importanti nella creazione di un gioco in Flash. Le cose potrebbero sembrare uguali all’inizio dell’articolo (provate a simulare di nuovo il download): ma stavolta abbiamo il controllo completo del codice.

Nota Personale: considerata la lunghezza dell’articolo originale, ho deciso di tagliare in due parti la lezione numero otto, per permettervi di riflettere a pieno sul metodo dei tre frame e di arrivare ad esercitarne la piena padronanza. Fate un sacco di pratica e… alla prossima lezione!

I file da scaricare li metterò direttamente alla fine del prossimo articolo.