Bene, dopo aver speso due parole per descrivere brevemente il nostro gioco, dobbiamo preparare l’ambiente di sviluppo con il quale lavoreremo. In poche parole, vi spiegherò brevemente come scaricare, installare ed impostare i programmi e le librerie adatte.

Alcuni di voi sapranno già che Flixel non funziona con Adobe Flash. Nel caso non ne siate a conoscenza, ora ne siete al corrente. Per lavorare con questo prezioso framework bisogna usare un programma come FlashDevelop, un IDE gratuito, facile da installare e da scaricare.

Per prima cosa, ecco i passi da fare:

• Scaricare ed Installare FlashDevelop
• Scaricare il Flex SDK
• Scaricare il Framework Flixel 2.0
• Aggiungere i riferimenti al Flex SDK e a Flixel dall’ambiente di sviluppo.

In un articolo di qualche mese fa ho già descritto in maniera piuttosto dettagliata come scaricare ed installare il caro FlashDevelop. Per questo motivo vi rimando all’articolo interessato (http://francescomalatesta.net/2010/04/11/installare-flashdevelop-preparazione/) e possiamo proseguire con il passo successivo.

Scaricare il Flex SDK (con Flixel va bene la versione 3.4) è decisamente facile. Per prima cosa andiamo sulla pagina ad esso dedicata sul sito Adobe (http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3), selezioniamo la versione che ci interessa (al momento in cui scrivo ho scaricato ed uso la 3.4.1.10084, tra le Stable Builds), scorriamo la pagina che ci viene proposta e, dopo aver acconsentito cliccando su “I Agree” ci verrà mostrato il link per il download.

Dopo circa un centinaio di megabyte avremo concluso questa fase. Prendete l’archivio zip scaricato ed estraete i suoi contenuti in una cartella facile da rintracciare. Per farvi un esempio, io ho creato una cartella “libs” nella cartella principale del mio hard disk e qui metto in cartelle separate tutte le varie librerie.

Per quanto riguarda l’SDK ci siamo quasi. Avviamo FlashDevelop ed apriamo il menù delle opzioni e preferenze dell’ambiente, cliccando su “Tools->Program Settings”. Selezionate la scheda “AS3Context” e cercate la voce “FlexSDK Location”. Sarà qui che dovrete specificare la cartella dove avete posizionato l’SDK.

Cliccate su close e chiudete anche l’IDE. Adesso è il turno di Flixel. Per scaricare Flixel andate a questo indirizzo (http://flixel.org/) e cliccate su “Standard” subito sotto la scritta “Download”. Dopo aver scaricato l’archivio la procedura è la stessa per il FlexSDK: create un’altra cartella nella cartella “libs” (io l’ho chiamata “flixel”, viva l’originalità) ed estraeteci il contenuto del file.

Adesso che tutto è pronto possiamo procedere con la creazione di un nuovo progetto con FlashDevelop. Innanzitutto, avviamo il programma e clicchiamo su “Project → New Project”. Diamo il nome al progetto (che sarà di tipologia Actionscript 3 senza preloader), confermiamo e ci ritroveremo davanti al nostro file principale, con una bozza dei metodi essenziali già pronti.

Mi pare chiaro che dovete cancellare tutto.

Per prima cosa rinominate il file principale del progetto (non è obbligatorio ma ve lo consiglio): da “Main.as” chiamatelo “TicTacToeGame.as”, come ho fatto io. Da qui parte tutto quanto, dato che abbiamo il metodo Main, ovvero il punto d’ingresso del programma.

Quello che faremo ora sarà aggiungere il secondo riferimento, quello di Flixel. È tutto molto semplice e veloce: nella finestra di esplorazione del progetto (che trovate a destra di default) cliccate con il pulsante destro del mouse sulla cartella principale del progetto e cliccate quindi su “Properties”.

Vi si aprirà una piccola finestra delle impostazioni. Selezionate la scheda “Classpaths” e nella lista che vi troverete di fronte aggiungete anche il percorso del framework Flixel, sul vostro hard disk. Se le cose funzioneranno allora nella finestra di esplorazione del progetto le cose cambieranno leggermente:

Adesso che abbiamo tutti i riferimenti non dobbiamo fare altro che scrivere le prime linee di codice. Ecco come appare, una volta modificato, il file TicTacToeGame.as:

package
{
	import org.flixel.*;

	[SWF(width = "300", height = "300", backgroundColor = "#ffffff")]
	[Frame(factoryClass="Preloader")]

	public class TicTacToeGame extends FlxGame
	{
		public function TicTacToeGame()
		{
			super(300, 300, null, 1);
		}
	}
}

Non vi spaventate, tranquilli. Spiego tutto riga per riga. La direttiva di import che troviamo all’inizio serve a dire a FlashDevelop che useremo flixel. L’asterisco alla fine indica che prenderemo in esame tutta la libreria: per ora lasciate le cose così, con la pratica imparerete cosa importare e cosa no a seconda delle necessità più varie.

La riga successiva descrive il file swf che andremo a creare. Avrà una grandezza di 300×300 pixel e avrà un colore di sfondo bianco. La riga successiva serve a dare delle informazioni sul preloader, ovvero il componente che si occuperà di gestire il caricamento del gioco prima di mostrarlo. Non vi preoccupate per ora, ne parleremo tra un po’.

Subito dopo abbiamo la definizione della classe:

public class TicTacToeGame extends FlxGame

la classe è TicTacToeGame (ha lo stesso nome del file che la ospita) ed estende la classe FlxGame, offerta da Flixel. Il contenuto del metodo è molto semplice e consiste in una sola istruzione:

super(300, 300, null, 1);

del metodo “super” ho già parlato in altri tutorial. Analizziamo invece gli argomenti passati: i primi due numeri, 300 e 300, sono la dimensione della finestra da utilizzare. Il terzo argomento è lo “stato” in cui il gioco si deve ritrovare all’avvio.

Per farvi capire meglio, prendete lo stato iniziale come, genericamente, la schermata da cui si parte. Un esempio potrebbe essere un menù principale, o un intro qualunque prima di passare al gioco vero e proprio. Per ora lo abbiamo impostato su null dato che non abbiamo ancora creato gli stati del gioco.

Quello che faremo ora, per questa prima lezione, sarà creare la finestra di gioco vuota dopo aver impostato l’ambiente di sviluppo.

L’ultimo argomento passato è il fattore di zoom: se impostato ad 1 vi farà vedere tutto normalmente, impostato a 2 raddoppierà la grandezza di tutto, portando il gioco ad avere un effetto ancora più “pixeloso”.

Dopo aver salvato il file creiamo un altro file Actionscript nella stessa cartella del file principale. Lo chiameremo “Preloader.as”. Il Preloader ha il compito di gestire il caricamento del gioco in attesa che sia totalmente scaricato sul pc, in locale. Può essere rappresentato in vari modi: generalmente è la schermata indicante la percentuale di caricamento di un qualsiasi gioco flash.

Come avete potuto vedere nella mia guida tradotta (qui l’articolo) realizzare un Preloader efficace e potente può essere molto, molto lungo e faticoso. Fortunatamente, Flixel ci mette a disposizione uno strumento già pronto, che sarà proprio quello che utilizzeremo.

Copiate questo codice nel file Preloader.as:

package
{
	import org.flixel.FlxPreloader;

	public class Preloader extends FlxPreloader
	{
		public function Preloader():void
		{
			className = "TicTacToeGame";
			super();
		}
	}
}

La direttiva di import stavolta chiede di prendere tutti i dati riguardanti la classe FlxPreloader, quella che appunto ci offre Flixel. La classe quindi viene creata di conseguenza, come un’estensione di FlxPreloader ed il metodo costruttore non fa altro che prendere in input il nome della classe principale del gioco, quella da cui parte tutto, tramite la variabile “className”. In questo caso, “TicTacToeGame”.

Il metodo super chiude tutto. Salvate anche questo file. Ora potete cliccare su Build per compilare tutto e provare il prodotto finito. Ecco la nostra finestra bella pronta.

Anche questa parte è andata!! Alla prossima!