Gioco Flash tutorial

[Flep]

Questo articolo è un tutorial che spiega come poter creare un gioco con Flash CS3.

Il gioco che prenderò in esame potete vederlo a questo link. ( segnalato da Daniele )

Chiaramente mi limiterò a spiegare la logica che utilizza il gioco in questione e non andrò a creare nessun tipo di grafiche.

A voi basterà cambiare le grafiche delle MovieClip utilizzate per personalizzare il gioco a vostro piacimento.

Vorrei anche ricordare che utilizzare le stesse grafiche del gioco originale, potrebbe essere illegale.

Pronti ? Via...

Creo un FLA che salvo con nome ' main.fla ' , al cui interno:

- una MovieClip a cui do nome istanza bg_mc ( sarà la MovieClip che fa da sfondo )

- una MovieClip a cui do nome istanza ' gallina_mc ' ( sarà la gallina che lancia le uova )

- una MovieClip a cui do nome istanza ' cesto_mc ' ( sarà il cesto che raccoglie le uova )

- una MovieClip a cui do nome istanza ' linea_mc ' ( sarà la linea per cui se le uova la oltrepassano finisce il gioco )

- una MovieClip a cui do nome istanza ' cambia_livello_mc ' ( sarà la clip che avviserà l' utente di aver superato un livello e quindi cliccarla per proseguire )

- una MovieClip a cui do nome istanza ' game_over_mc ' ( sarà la clip che avvisa il giocatore quando il gioco è finito e quindi cliccarla per ricominciare da capo )

- una MovieClip che lascio in libreria con nome ' mc_uovo ' ( sarà la clip che istanzierò in runtime ...ex metodo attachMovie...e fungerà da uovo )

- un campo di testo dinamico che chiamo ' punteggio_txt ' ( sarà il campo di testo che visualizzarà il punteggio del giocatore )

- un campo di testo dinamico che chiamo ' livello_txt ' ( sarà il campo di testo che visualizzerà il livello del gioco in corso )

Creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.utils.Timer;
	import flash.events.*;
	
	public class Main extends MovieClip
	{
		private var timer:Timer;
		private var timer_uova:Timer;
		
		public static var livello:int=1;
		private var cambio:Number;
		private var numUova:int=10;
		public var punteggio:int=0;
		
		private var isPressed:Boolean=false;
		private var direzione:Boolean=true;
		private var destra:Boolean=false;
		private var sinistra:Boolean=false;
		
		public function Main()
		{
			init();
			attivaTimer();
			listeners();
			lanciaUova();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			gallina_mc.x=stage.stageWidth/2;
			gallina_mc.y=gallina_mc.height+10;
			
			cambio=1000+Math.floor(Math.random()*6000);
			
			cambia_livello_mc.visible=false;
			game_over_mc.visible=false;
			punteggio_txt.text='punteggio: '+punteggio;
		}
		
		private function attivaTimer():void
		{
			livello_txt.text='livello: '+livello;
			timer=new Timer(cambio,1);
			timer.addEventListener(TimerEvent.TIMER,lanciaNumero);
			timer.start();
		}
		
		private function lanciaNumero(t:TimerEvent):void
		{
			cambio=1000+Math.floor(Math.random()*4000);
			livello*=-1;
			attivaTimer();
		}
		
		private function listeners():void
		{
			this.addEventListener(MouseEvent.MOUSE_DOWN,settaFocus);
			gallina_mc.addEventListener(Event.ENTER_FRAME,muoviGallina);
			cesto_mc.addEventListener(Event.ENTER_FRAME,muoviCesto);
			stage.stageFocusRect=false;
			stage.focus=this;
			this.addEventListener(KeyboardEvent.KEY_DOWN,controllaTasto);
			this.addEventListener(KeyboardEvent.KEY_UP,azzeraTasto);
		}
		
		private function settaFocus(m:MouseEvent):void
		{
			stage.focus=this;
		}
		
		private function muoviGallina(e:Event):void
		{
			gallina_mc.x+=livello*4;
			if(gallina_mc.x>=stage.stageWidth-gallina_mc.width/2)
				livello*=-1;
			if(gallina_mc.x<=gallina_mc.width/2)
				livello*=-1;
		}
		
		private function muoviCesto(e:Event):void
		{
			if(isPressed&&direzione)
				e.target.x+=Math.abs(livello)*5;
			if(isPressed&&!direzione)
				e.target.x-=Math.abs(livello)*5;
		}
		
		private function controllaTasto(k:KeyboardEvent):void
		{
			isPressed=true;
			if(k.keyCode==39)
			{
				destra=true;
				direzione=true;
			}
			if(k.keyCode==37)
			{
				sinistra=true;
				direzione=false;
			}
			k.updateAfterEvent();
		}
		
		private function azzeraTasto(k:KeyboardEvent):void
		{
			if(k.keyCode==39)
				destra=false;
			if(k.keyCode==37)
				sinistra=false;
			if(!destra&&!sinistra)
				isPressed=false;
		}
		
		private function lanciaUova():void
		{
			timer_uova=new Timer(1000-Math.abs(livello)*100,numUova);
			timer_uova.addEventListener(TimerEvent.TIMER,sgancia);
			timer_uova.start();
		}
		
		private function sgancia(t:TimerEvent):void
		{
			var uovo:Uovo=new Uovo(this,timer_uova.currentCount);
		}
		
		public function passaLivello():void
		{
			timer.stop();
			this.removeEventListener(MouseEvent.MOUSE_DOWN,settaFocus);
			gallina_mc.removeEventListener(Event.ENTER_FRAME,muoviGallina);
			cesto_mc.removeEventListener(Event.ENTER_FRAME,muoviCesto);
			this.removeEventListener(KeyboardEvent.KEY_DOWN,controllaTasto);
			this.removeEventListener(KeyboardEvent.KEY_UP,azzeraTasto);
			
			cambia_livello_mc.visible=true;
			cambia_livello_mc.addEventListener(MouseEvent.MOUSE_DOWN,avanza);
		}
		
		private function avanza(m:MouseEvent):void
		{
			livello=Math.abs(livello);
			livello++;
			attivaTimer();
			listeners();
			lanciaUova();
			cambia_livello_mc.visible=false;
		}
		
		public function gameOver():void
		{
			timer.stop();
			timer_uova.stop();
			this.removeEventListener(MouseEvent.MOUSE_DOWN,settaFocus);
			gallina_mc.removeEventListener(Event.ENTER_FRAME,muoviGallina);
			cesto_mc.removeEventListener(Event.ENTER_FRAME,muoviCesto);
			this.removeEventListener(KeyboardEvent.KEY_DOWN,controllaTasto);
			this.removeEventListener(KeyboardEvent.KEY_UP,azzeraTasto);
			
			game_over_mc.visible=true;
			game_over_mc.addEventListener(MouseEvent.MOUSE_DOWN,riprova);
		}
		
		private function riprova(m:MouseEvent):void
		{
			livello=1;
			punteggio=0;
			punteggio_txt.text='punteggio: '+punteggio;
			attivaTimer();
			listeners();
			lanciaUova();
			game_over_mc.visible=false;
		}
	}
}

Creo la classe Uovo, un file AS che salvo con nome ' Uovo.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Uovo extends MovieClip
	{
		private var Root:MovieClip;
		
		private var id:int;
		
		public function Uovo(m:MovieClip,n:int)
		{
			Root=m;
			id=n;
			Root.addChild(this);
			init();
		}
		
		private function init():void
		{
			x=Root.gallina_mc.x;
			y=Root.gallina_mc.y;
			this.addEventListener(Event.ENTER_FRAME,cadi);
		}
		
		private function cadi(e:Event):void
		{
			y+=Math.abs(Main.livello)*3;
			if(this.hitTestObject(Root.cesto_mc))
			{
				this.removeEventListener(Event.ENTER_FRAME,cadi);
				Root.removeChild(this);
				Root.punteggio++;
				Root.punteggio_txt.text='punteggio: '+Root.punteggio;
				if(id==10)
					Root.passaLivello();
			}
			
			if(y>=Root.linea_mc.y)
			{
				this.removeEventListener(Event.ENTER_FRAME,cadi);
				Root.gameOver();
			}
		}
	}
}

Risultato:

Analizziamo il codice passo per passo.

- le proprietà che ho creato nella Document Class:
due variabili Timer che utilizzo per cambiare la direzione di gallina_mc e per lanciare le uova ad ogni intervallo
private var timer:Timer;
private var timer_uova:Timer;
una variabile numerica ( numero intero per cui classe int ) che utilizzo per il livello di difficoltà del gioco
public var livello:int=1;
una variabile numerica che memorizza un intervallo di tempo random con cui cambio la direzione di gallina_mc
private var cambio:Number;
una variabile numerica che indica il numero totale di uova che la gallina lancia per ogni livello
private var numUova:int=10;
una variabile numerica con cui memorizzo il punteggio del giocatore
public var punteggio:int=0;
quattro variabili booleane che utilizzo per le logiche condizionali del movimento del giocatore su cesto_mc utilizzando la tastiera
private var isPressed:Boolean=false;
private var direzione:Boolean=true;
private var destra:Boolean=false;
private var sinistra:Boolean=false;

- i metodi della Document Class ( Main.as )
init();
assegno il frame rate della timeline
stage.frameRate=31;
posiziono gallina_mc
gallina_mc.x=stage.stageWidth/2;
gallina_mc.y=gallina_mc.height+10;
assegno un valore alla variabile ' cambio '
cambio=1000+Math.floor(Math.random()*6000);
faccio sparire cambia_livello_mc e game_over_mc
cambia_livello_mc.visible=false;
game_over_mc.visible=false;
assegno un testo al campo di testo del punteggio
punteggio_txt.text='punteggio: '+punteggio;

attivaTimer();
assegno un testo a livello_txt che aggiorna il giocatore a che livello si trova
livello_txt.text='livello: '+livello;
dichiaro l' istanza timer che chiamerà dopo tot secondi ( in base al valore della variabile numerica ' cambio ' ) per una volta sola il metodo lanciaNumero() e vedremo perchè...
timer=new Timer(cambio,1);
timer.addEventListener(TimerEvent.TIMER,lanciaNume ro);
timer.start();

lanciaNumero();
aggiorno ' cambio ' con un altro numero random che è un secondo più un numero approssimato per difetto tra zero e 4000 ( quindi 1000 millesimi + numero random tra 0 e 4000 millesimi )
cambio=1000+Math.floor(Math.random()*4000);
inverto il segno della variabile numerica ' livello ' ( qualsiasi numero moltiplicato per -1 mantiene il proprio valore ma cambia di segno ) vedremo perchè...
livello*=-1;
richiamo il metodo attivaTimer()
attivaTimer();

listeners();
Aggiungo i listeners in ascolto che necessito per richiamare metodi.
Dico a Flash che per ogni click che avviene sullo Stage di chiamare la funzione/metodo settaFocus()
this.addEventListener(MouseEvent.MOUSE_DOWN,settaF ocus);
dico a gallina_mc di creare un intervallo ( ENTER_FRAME ) che chiama il metodo muoviGallina()
gallina_mc.addEventListener(Event.ENTER_FRAME,muov iGallina);
dico a cesto_mc di creare un intervallo ( ENTER_FRAME ) che chiama il metodo muoviCesto()
cesto_mc.addEventListener(Event.ENTER_FRAME,muoviC esto);
dico allo stge di non visualizzare il quadratino di fuoco sulle clip a cui applicherò il fuoco
stage.stageFocusRect=false;
assegno il fuoco ( focus ) a questa classe ( che non è altro che la timeline, un' istanza della classe MovieClip)
stage.focus=this;
dico a Flash di mettersi in ascolto di quando l' utente premerà un tasto sulla tastiera
this.addEventListener(KeyboardEvent.KEY_DOWN,contr ollaTasto);
dico a Flash di mettersi in ascolto di quando l' utente rilascerà un tasto della tastiera
this.addEventListener(KeyboardEvent.KEY_UP,azzeraT asto);

settaFocus();
assegno il fuoco a tutto lo stage
stage.focus=this;

muoviGallina();
faccio avanzare la gallina ( ricordiamoci che siamo sotto intervallo ENTER_FRAME ) di un valore pari al valore della variabile livello moltiplicata per 4
gallina_mc.x+=livello*4;
applico delle logiche condizionali per cui se gallina_mc arriva a fine stage, oppure si trova più indietro dell'inzio dello stage cambio il segno del valore con cui sta avanzando ( ecco il perchè del *=-1 )
if(gallina_mc.x>=stage.stageWidth-gallina_mc.width/2)
livello*=-1;
if(gallina_mc.x<=gallina_mc.width/2)
livello*=-1;

muoviCesto();
controllo il movimento di cesto_mc sui tasti DESTRA e SINISTRA della tastiera applicando delle logiche condizionali ( e.target significa chi ha dispacciato l' evento, in questo caso cesto_mc )
if(isPressed&&direzione)
e.target.x+=Math.abs(livello)*5;
if(isPressed&&!direzione)
e.target.x-=Math.abs(livello)*5;

NB: Spiegare precisamente le logiche condizionali è davvero difficilissimo, sono calcoli che si fanno in fase di sviluppo dell' applicazione e quindi suggerisco di studiarle per come sono oppure di applicarne altre a vostro piacimento

controllaTasto();
Anche quì applico delle logiche condizionali per controllare quando i tasti DESTRA e SINISTRA vengono premuti. A quel punto cambio il valore di alcune variabili booleane
isPressed=true;
if(k.keyCode==39)
{
destra=true;
direzione=true;
}
if(k.keyCode==37)
{
sinistra=true;
direzione=false;
}

azzeraTasto();
Stessa cosa anche quì, applico logiche condizionali sull' evento del rilascio di un tasto della tastiera
if(k.keyCode==39)
destra=false;
if(k.keyCode==37)
sinistra=false;
if(!destra&&!sinistra)
isPressed=false;

lanciaUova();
dichiaro l' istanza timer che chiamerà ogni tot secondi ( in base al valore di 1000 meno il numero assoluto, quindi sempre con segno positivo, della variabile ' livello ' moltiplicato per un centesimo di secondo ) il metodo sgancia() di tante volte quanto il valore della variabile ' numUova '
timer_uova=new Timer(1000-Math.abs(livello)*100,numUova);
timer_uova.addEventListener(TimerEvent.TIMER,sganc ia);
timer_uova.start();

sgancia();
istanzio la classe Uovo.as che non fa altro che attaccare una MovieClip da libreria, per cui torno su main.fla, click col destro in libreria su mc_uovo, attivo l' opzione esporta per Actionscript e nel campo Class inserisco Uovo. Alla classe Uovo.as passo i valori di this ( cioè la Document Class, la timeline, la root...chiamatela come volete ) ed un valore numerico che è il numero di volte che timer_uova ha chiamato appunto questo metodo sgancia()
var uovo:Uovo=new Uovo(this,timer_uova.currentCount);


passaLivello();
questo metodo viene chiamato dalla classe Uovo.as ( infatti ha attributo public ) e poi vedremo quando viene chiamato...
non fa altro che fermare timer
timer.stop();
rimuovere tutti i listeners in ascolto ( così libero memoria )
this.removeEventListener(MouseEvent.MOUSE_DOWN,set taFocus);
gallina_mc.removeEventListener(Event.ENTER_FRAME,m uoviGallina);
cesto_mc.removeEventListener(Event.ENTER_FRAME,muo viCesto);
this.removeEventListener(KeyboardEvent.KEY_DOWN,co ntrollaTasto);
this.removeEventListener(KeyboardEvent.KEY_UP,azze raTasto);
faccio diventare visibile la MovieClip cambia_livello_mc
cambia_livello_mc.visible=true;
assegno un listener in ascolto su cambia_livello_mc in modo da sapere quando viene cliccata e a quel punto Flash chiamerà il metodo avanza()
cambia_livello_mc.addEventListener(MouseEvent.MOUS E_DOWN,avanza);

avanza();
quando cambia_livello_mc viene cliccato viene chiamato questo metodo che...
converte il segno del valore della variabile livello a positivo
livello=Math.abs(livello);
incrementa di uno il valore della variabile livello
livello++;
richiama il metodo attivaTimer();
attivaTimer();
agiiunge dei nuovi listeners in ascolto
listeners();
richiama il metodo lanciaUova()
lanciaUova();
rimetto a invisibile cambia_livello_mc
cambia_livello_mc.visible=false;

NB: vengono richiamati gli stessi metodi che all' inizio la funzione costruttrice Main chiama... public function Main()


gameOver();
questo metodo viene chiamato a certe condizioni dalla classe Uovo e vedremo come...
fermo i due timers
timer.stop();
timer_uova.stop();
rimuovo tutti i listeners in ascolto
this.removeEventListener(MouseEvent.MOUSE_DOWN,set taFocus);
gallina_mc.removeEventListener(Event.ENTER_FRAME,m uoviGallina);
cesto_mc.removeEventListener(Event.ENTER_FRAME,muo viCesto);
this.removeEventListener(KeyboardEvent.KEY_DOWN,co ntrollaTasto);
this.removeEventListener(KeyboardEvent.KEY_UP,azze raTasto);
faccio vedere la MovieClip game_over_mc
game_over_mc.visible=true;
assegno un listener in ascolto su game_over_mc in modo da sapere quando viene cliccata e a quel punto Flash chiamerà il metodo riprova()
game_over_mc.addEventListener(MouseEvent.MOUSE_DOW N,riprova);

riprova();
quando game_over_mc viene cliccato viene chiamato questo metodo che...
riporto livello a uno
livello=1;
riporto il punteggio a zero
punteggio=0;
assegno del testo a punteggio_txt
punteggio_txt.text='punteggio: '+punteggio;
richiamo i metodi della funzione costrutrice....public function Main()
attivaTimer();
listeners();
lanciaUova();
rimetto a invisibile game_over_mc
game_over_mc.visible=false;

Passiamo ora ad analizzare la classe Uovo.
Proprietà:
- Root:MovieClip ( la root dell'applicazione, la Document Class )
- id:Number ( un numero di identificazione che viene passato da Main.as )
infatti la funzione costruttrice della classe Uovo si aspetta 2 parametri:
public function Uovo(m:MovieClip,n:int)
imposto il valore di ' Root ' uguale al valore di ' m ' che mi passa Main.as
Root=m;
imposto il valore di ' id ' uguale al valore di ' n ' che mi passa Main.as
id=n;
aggiungo al DisplayObject questa classe ( non dimentichiamoci che il ' this ' quì si riferisce alla MovieClip mc_uovo che abbiamo in libreria e che verrà attaccata )
Root.addChild(this);
chiamo il metodo init
init();

Metodi:
init();
posiziono la MovieClip
x=Root.gallina_mc.x;
y=Root.gallina_mc.y;
creo un listener in ascolto dell' intervallo ENTER_FRAME che chiamerà il metodo cadi() tante volta al secondo quanto è il valore del framerate
this.addEventListener(Event.ENTER_FRAME,cadi);



cadi();
dico all' uovo di aumentare la y di un valore pari al valore assoluto della variabile livello di Main.as ( che è Root ) moltiplicato per tre
y+=Math.abs(Root.livello)*3;
controllo se l' uovo collide con cesto_mc
if(this.hitTestObject(Root.cesto_mc))
{
se collide, fermo l' intervallo rimuovendo il listener
this.removeEventListener(Event.ENTER_FRAME,cadi);
rimuovo l' uovo dalle stage
Root.removeChild(this);
incremento la variabile punteggio di Main.as
Root.punteggio++;
assegno un testo a punteggio_txt
Root.punteggio_txt.text='punteggio: '+Root.punteggio;
controllo se l' uovo che ha appena toccato cesto_mc è l'ultimo chiedendo se il suo id è uguale al valore della variabile numUova di Main.as
if(id==Root.numUova)
se si, chiamo il metodo passaLivello() di Main.as che abbiamo già visto cosa eseguirà
Root.passaLivello();
}
controllo se la y dell' uovo è maggiore della y di linea_mc
if(y>=Root.linea_mc.y)
{
se si, fermol' intervallo rimuovendo il listener
this.removeEventListener(Event.ENTER_FRAME,cadi);
chiamo il metodo gameOver() della classe Main che abbiamo già visto cosa eseguirà
Root.gameOver();
}

Allego i files sorgente: