Eccoci qui, in questa nuova lezione dedicata allo sviluppo di un gioco di memoria con Flixel 2.0. Le precedenti lezioni sono state di preparazione, mentre l’ultima è stata semplicemente di ripasso di alcuni concetti. Stavolta invece iniziamo a vedere un po’ qualcosa di nuovo.

Come già vi avevo detto precedentemente, infatti, una delle features del gioco sarà la presenza di schermate iniziali che si susseguiranno in fade, in dissolvenza, prima di arrivare al menù principale vero e proprio. Per passare di schermata in schermata useremo il pulsante invio.

Avete presente quelle schermate di presentazione, generalmente usate dalle case produttrici per mostrare il loro logo? (oggi molto spesso sono realizzate mandando in esecuzione dei filmati, anziché semplici immagini)

Ecco, penso abbiate capito di cosa parlo. Per l’occasione, in Photoshop, ho preparato quattro schermate:

  • la prima, con il mio nome ed il nome del sito (un po’ di autocelebrazione ci sta, dai)

intro_slide_1

  • la seconda invece mostra il nome di Anastasia, la ragazza che mi ha permesso di usare le sue foto per il gioco

intro_slide_2

  • la terza invece l’ho creata per dare il giusto credito anche al caro Flixel (il logo l’ho preso dal sito ufficiale, è possibile scaricare dei badges da usare come si vuole)

intro_slide_3

  • ed infine un credit anche per la canzone di sottofondo, considerando che è coperta da copyright. Spero di non avere futuri problemi, l’ho messa in bassissima qualità e l’ho usata più che altro per scopi didattici. Ricordate: non usate contenuto coperto da copyright.

intro_slide_4

Bene, ora abbiamo le nostre schermate pronte. Ovviamente sono state create apposta della stessa risoluzione che avevamo deciso all’inizio, 500 x 400 pixel. Tutto quello che dobbiamo fare, adesso, è creare uno stato che faccia le seguenti cose:

  1. Mostri la prima schermata;
  2. Alla pressione di invio, faccia scomparire con un effetto di dissolvenza in uscita (fade out) la schermata attuale;
  3. Faccia comparire quindi la schermata successiva con un effetto di dissolvenza in entrata (fade in);
  4. Ripeta i passi 2 e 3 fino all’esaurimento di tutte le schermate;
  5. Dopo l’ultima schermata faccia il passaggio allo stato successivo, quello del menù principale del gioco.

Nel nostro progetto in FlashDevelop, quindi, creiamo il codice per il nostro nuovo stato. Ecco lo scheletro di partenza (tipico per qualsiasi stato):

package
{
	import org.flixel.FlxState;

	public class sFadeIntroState extends FlxState
	{
		override public function create():void
		{
			// codice create
		}

		override public function update():void
		{
			// codice update
		}
	}
}

Come vedete non cambia molto dal solito: abbiamo il metodo create (override) e il metodo update (sempre override). La direttiva di import utilizzata è quella classica da usare per qualsiasi FlxState. Il prossimo passo è aggiungere i file immagine delle schermate al progetto.

Vi ricordate come si fa, vero?

(Create una nuova cartella nel vostro progetto, chiamatela “graphics”. Cliccate con il pulsante destro del mouse sulla nuova cartella appena creata e selezionate “Add” e quindi “Existing File”. In questo modo potrete selezionare i file immagine che avete creato e questi verranno aggiunti al progetto)

Et voilà, pronti all’uso.

Ora possiamo andare avanti. La prossima cosa da fare è caricare nel gioco i file appena importati. Questo si fa ovviamente includendo il file ed associandolo ad un oggetto di tipo “Class”. Non vi spaventate, è solo una linea di codice (e dovreste anche ricordarlo).

Ecco come appare ora la nostra classe sFadeIntroState:

package
{
	import org.flixel.FlxState;

	public class sFadeIntroState extends FlxState
	{
		[Embed(source = '../graphics/intro_slide_1.jpg')] 		private var slide1:Class;
		[Embed(source = '../graphics/intro_slide_2.jpg')]		private var slide2:Class;
		[Embed(source = '../graphics/intro_slide_3.jpg')]		private var slide3:Class;
		[Embed(source = '../graphics/intro_slide_4.jpg')]		private var slide4:Class;

		private var imgs:Array;
		private var coun:int;

		override public function create():void
		{
			// codice create
		}

		override public function update():void
		{
			// codice update
		}
	}
}

Caricati i file notiamo altre due istruzioni: la dichiarazione di un nuovo array e di un intero, rispettivamente imgs e coun.

A cosa servono? Dunque, l’array imgs si occuperà di mantenere tutti i dati relativi alle immagini. La variabile coun invece fungerà da indice per scandire, elemento per elemento, tutto l’array. Ecco infatti come funzionerà il meccanismo dal punto di vista puramente logico:

  • coun parte dal valore 0 (primo elemento dell’array = prima immagine da mostrare);
  • effetto di fade in con l’immagina imgs[count];
  • alla pressione di invio effetto di fade out;
  • una volta che la schermata è nera al 100% il valore di coun viene incrementato di 1;
  • si ritorna al punto 2 se coun è minore della grandezza dell’array, altrimenti si passa ad un nuovo stato.

Spero di essere stato chiaro. Adesso, perché non analizziamo il codice del metodo “create”? Aggiungiamolo al codice già presente, all’interno della classe, subito dopo le ultime dichiarazioni:

override public function create():void
		{
			coun = 0;
			imgs = new Array();

			imgs[0] = new FlxSprite(0, 0, slide1);
			imgs[1] = new FlxSprite(0, 0, slide2);
			imgs[2] = new FlxSprite(0, 0, slide3);
			imgs[3] = new FlxSprite(0, 0, slide4);

			add(imgs[0]);
			FlxG.flash.start(0xff000000, 1);
		}

Qui le cose sono molto facili da capire.

Come già detto prima, il valore di coun viene posto uguale a zero, in quanto si parte dal primo elemento dell’array. Successivamente quindi provvediamo a popolare l’array delle immagini, inizializzando, per ogni immagine importata, un oggetto di tipo FlxSprite.

I parametri passati sono tre:

  • la coordinata X;
  • la coordinata Y;
  • l’oggetto dell’immagine da usare (di tipo Class).

Tramite l’istruzione add(imgs[0]) aggiungiamo la prima immagine alla scena, permettendo di visualizzarla. L’ultima istruzione è FlxG.Flash.Start(), che useremo in modo diverso dal solito per simulare l’effetto di fade in.

Qualcuno di voi avrà notato, infatti, che esiste FlxG.fade. Quest’oggetto, tuttavia, non permette l’effetto di fade in, ma solamente quello di fade out. Per il primo, quindi, useremo in questo modo lo strumento Flash:

FlxG.flash.start(0xff000000, 1);

Invece di usare il bianco, colore classico del flash, abbiamo usato il nero con un opacità totale (vi ricordo che i primi due caratteri dopo lo 0x sono usati per l’alpha, quindi c’è red, green e blue. Il nero sarà logicamente 0xff000000. Il successivo parametro è il tempo di durata dell’effetto: un secondo.

Passiamo ora la metodo “update”. Questo è ancora più corto:

override public function update():void
		{
			if (FlxG.keys.justPressed("ENTER"))
			{
				FlxG.fade.start(0xff000000, 1, Change);
			}
		}

Il codice qui presentato non fa altro che controllare la pressione del tasto Invio. Nel caso la condizione si verifichi, si richiama l’effetto di fade out tramite lo strumento fade:

FlxG.fade.start(0xff000000, 1, Change);

I primi due parametri già li conoscete: il terzo è semplicemente il nome del metodo che volete richiamare al termine dell’effetto. Utile vero? Il metodo Change servirà a cambiare immagine, quindi questo è il posto migliore per usarlo.

Ecco il codice del metodo Change:

private function Change():void
		{
			if (coun < imgs.length - 1)
			{
				coun++;
				add(imgs[coun]);
			}
			else
			{
				FlxG.state = new sMainMenu();
			}

			FlxG.fade.stop();
			FlxG.flash.start(0xff000000, 1);
		}

Anche qui il tutto è molto semplice da capire: per prima cosa si controlla l’indice coun. Se questo non è ancora arrivato al termine dell’array allora viene incrementato, e tramite il metodo add aggiungiamo la nuova schermata da mostrare.

Se invece abbiamo raggiunto il termine dell’array allora non facciamo altro che passare allo stato successivo (che dobbiamo ancora creare eh). Infine vengono eseguite le istruzioni di stop dell’effetto di fade out e viene reimpostato il fade in per ripartire. Nulla di più, nulla di meno, e la nostra schermata iniziale è pronta.

Data la struttura che gli abbiamo dato, inoltre, nel caso dovessimo avere necessità di aggiungere nuove schermate basterà semplicemente importare il file, embeddarlo normalmente ed inserire un altro elemento nell’array, senza stravolgere altro.

Ecco il codice completo di tutta la schermata:

package
{
	import org.flixel.FlxSprite;
	import org.flixel.FlxState;
	import org.flixel.FlxG;

	public class sFadeIntroState extends FlxState
	{
		[Embed(source = '../graphics/intro_slide_1.jpg')] 		private var slide1:Class;
		[Embed(source = '../graphics/intro_slide_2.jpg')]		private var slide2:Class;
		[Embed(source = '../graphics/intro_slide_3.jpg')]		private var slide3:Class;
		[Embed(source = '../graphics/intro_slide_4.jpg')]		private var slide4:Class;

		private var imgs:Array;
		private var coun:int;

		override public function create():void
		{
			coun = 0;
			imgs = new Array();

			imgs[0] = new FlxSprite(0, 0, slide1);
			imgs[1] = new FlxSprite(0, 0, slide2);
			imgs[2] = new FlxSprite(0, 0, slide3);
			imgs[3] = new FlxSprite(0, 0, slide4);

			add(imgs[0]);
			FlxG.flash.start(0xff000000, 1);
		}

		override public function update():void
		{
			if (FlxG.keys.justPressed("ENTER"))
			{
				FlxG.fade.start(0xff000000, 1, Change);
			}
		}

		private function Change():void
		{
			if (coun < imgs.length - 1)
			{
				coun++;
				add(imgs[coun]);
			}
			else
			{
				FlxG.state = new sMainMenu();
			}

			FlxG.fade.stop();
			FlxG.flash.start(0xff000000, 1);
		}
	}
}

Ed anche questa è fatta. Buon proseguimento, a presto con nuovi aggiornamenti ;)

  • Share/Bookmark