Ciao a tutti! In questa parte della nostra guida aggiungeremo qualcosa di nuovo rispetto al passato: per la prima volta, infatti, impareremo come usare una sprite animata nel nostro gioco. Importazione e codice, non lasceremo niente indietro.

Raggiungeremo il nostro obiettivo focalizzandoci su due classi. La prima, sMainMenu, che conterrà i dettagli dello stato del Menù Principale del nostro gioco. Eviterò di calare nei dettagli più minuziosi, in quanto a questo punto delle cose dovreste sapere come scrivere una classe del genere.

Mi concentrerò, invece, più sulla seconda classe che useremo, gMenuCursor, e sulla sua integrazione nell’altra classe prima specificata.

Bene, iniziamo! Per prima cosa vi riporto qui di seguito il codice “base” della schermata: tutto quel codice che voi già conoscete perfettamente.

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

	public class sMainMenu extends FlxState
	{
		[Embed(source='../graphics/main_menu.jpg')]		private var main_bg:Class;
		private var main_bg_sp:FlxSprite;

		override public function create():void
		{
			main_bg_sp = new FlxSprite(0, 0, main_bg);
			add(main_bg_sp);

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

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

		private function Change():void
		{
			FlxG.state = new sGameState();
		}
	}

}

Due parole però ce le spendo ugualmente: tutto quello che facciamo qui è caricare un’immagine di background, mostrarla a schermo e controllare l’eventuale pressione del tasto Invio. Nel caso venga premuto si passa quindi allo stato sGameState, ovvero la schermata di gioco vera e propria. Ecco come apparirebbe al momento la nostra schermata:

main_menu

Se ci dovessero essere problemi, ci sono i commenti :)

Ora che abbiamo la base della nostra schermata passiamo alla fase successiva. Se giocate al gioco noterete una sorta di cursore animato nella schermata principale, proprio affianco alla scritta “Nuovo Gioco”. Qualcosa del genere:

Immagine3

Come ottenere l’effetto animato per il nostro cursore? Beh, sappiate che Flixel è decisamente utile per questo genere di situazioni e viene incontro all’utente agevolando di molto il suo lavoro. Nel mio caso, per l’animazione ho usato uno SpriteSheet, ovvero un file PNG con tutta l’animazione disegnata fotogramma per fotogramma, uno accanto all’altro.

Avete presente le pellicole dei film? Esattamente così.

Ecco il png dell’animazione che ho usato io:

arrow

Clicca per Ingrandire

Il passo successivo è creare una classe appositamente per questa animazione: chiameremo questa classe gMenuCursor, e sarà un estensione della classe FlxSprite. Qui di seguito il codice, con successiva spiegazione.

package
{
	import org.flixel.FlxSprite;

	public class gMenuCursor extends FlxSprite
	{
		[Embed(source = '../graphics/arrow.png')] private var graph:Class;

		public function gMenuCursor()
		{
			loadGraphic(graph, true, false, 50, 30);
			addAnimation("normal", [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19], 30, true);
		}

		override public function update():void
		{
			play("normal");
			super.update();
		}
	}

}

Molti passaggi del codice sono semplici da capire: li abbiamo usati un sacco di volte e riguardano essenzialmente l’importazione del file incorporato in un oggetto di tipo Class, l’uso di un FlxSprite e così via. Sarebbe il caso però di spendere due parole su loadGraphic.

Come avete potuto notare, ci sono due cose “cambiate” o “strane”:

  • fate attenzione al secondo parametro, ora impostato su true: questo vuol dire che stiamo dicendo a Flixel che la nostra sprite sarà animata;
  • le dimensioni passate (50 e 30) – come vi ho già spiegato precedentemente, stiamo usando un file png piuttosto largo, da considerare come una “pellicola”. Le dimensioni che dobbiamo passare come parametri, tuttavia, sono la grandezza di ogni singolo “fotogramma” della nostra “pellicola”. Flixel quindi calcolerà automaticamente tutti i fotogrammi dell’animazione e ci permetterà di definire le animazioni necessarie tramite il codice.

Il passo successivo è proprio questo: tramite l’istruzione

addAnimation(“normal”, [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19], 30, true);

abbiamo appena definito un’animazione. Cosa vuol dire tutto questo? Vuol dire che stiamo dicendo a Flixel di usare determinati fotogrammi (uno dopo l’altro) ad una velocità costante per dare l’idea del movimento. Esattamente come al cinema.

La funzione addAnimation serve proprio a questo. I suoi parametri sono i seguenti:

  • un nome per l’animazione da creare: successivamente, nel codice, sarà possibile richiamare l’animazione semplicemente digitando “play(“nome_animazione”);”.
  • un array di fotogrammi da utilizzare: racchiusi da parentesi quadre metteremo i numeri dei fotogrammi da usare nella nostra animazione, in sequenza.
  • il framerate da usare: il numero di frame per secondo della nostra animazione. Giocando con questo parametro aumentiamo o diminuiamo la velocità.
  • il quarto parametro serve a definire se l’animazione deve essere ripetuta o no. Nel nostro caso, stavolta, ho messo true, in quanto sarà effettivamente da mandare ciclicamente.

Dopo aver richiamato questo metodo, in memoria saranno memorizzati i dati dell’animazione “normal” con il numero di frame da utilizzare, il framerate e così via.

Il metodo update ha ancora meno istruzioni: appena creato l’oggetto provvede a riprodurre l’animazione prima specificata e quindi richiamare il metodo super.update(), necessario affinché lo sprite si aggiorni con il valore attuale dell’animazione.

Completata questa classe possiamo tornare alla nostra classe sMainMenu, per aggiungere la nostra animazione.

A livello di codice, tutto questo si traduce in quattro semplici istruzioni da inserire nel metodo “create”, subito dopo la creazione del background:

cur1 = new gMenuCursor();
cur1.x = 280;
cur1.y = 363;
add(cur1);
  • inizializzazione del nuovo oggetto (non scordate di aggiungere la dichiarazioni tra le variabili della classe;
  • definizione delle coordinate x ed y
  • aggiunta tramite il metodo add()

Ed ecco come appare il codice della nostra classe una volta terminata:

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

	public class sMainMenu extends FlxState
	{
		[Embed(source='../graphics/main_menu.jpg')]		private var main_bg:Class;
		private var main_bg_sp:FlxSprite;

		override public function create():void
		{
			main_bg_sp = new FlxSprite(0, 0, main_bg);
			add(main_bg_sp);

			cur1 = new gMenuCursor();
			cur1.x = 280;
			cur1.y = 363;
			add(cur1);

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

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

		private function Change():void
		{
			FlxG.state = new sGameState();
		}
	}

}

Non mi resta che augurarvi un buon proseguimento e magari una riletta a tutto per avere chiari i concetti, fino al prossimo articolo della guida ;)

  • Share/Bookmark