Lezione 8

Lezione 8

In questa lezione finiremo il nostro gioco.

Funzioni

Abbiamo visto durante il corso l'uso di alcune funzioni predefinite del programma. Ora vediamo come possiamo, attraverso actionscript, crearne di nuove e personalizzate.

Una funzione, è un blocco di codice definito da noi che potremmo richiamare quando necessario, vediamo come si fa a crearla:

una funzione si dichiara attraverso il costruttore

 function nomefunzione(argomenti) { codice }

nomefunzione è il nome che daremo alla funzione, che useremo per richiamarla;

argomenti sono uno o più dati che passiamo alla funzione. ad esempio, nella funzione predefinita gotoAndStop(numeroframe); possiamo decidere a quale frame far andare la lettura specificando l'argomento

codice è il codice che la funzione eseguirà quando la richiameremo

Ad esempio, per lo spostamento dell'aereo, potremmo costruire una funzione spostaAereo(velocita), definita nel primo fotogramma dell'area principale, per poi richiamarla quando necessario nello script dell'aereo stesso. Vediamo come:

Partendo da questo file: gioco_aereo_movimento_consfondo.fla

Selezioniamo il clip filmato dell'aereo, apriamo il pannello azioni.

Ecco come si presenta il codice:

 
onClipEvent (load) {
	//assegnamo un valore alla variabile velocita
	velocita=10;}
 
//faremo eseguire questa istruzione ad ogni fotogramma (in modo continuo)
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
		this._y = this._y - velocita;
	} else if (Key.isDown(Key.LEFT)) {
//se è premuto il tasto sinistra, sposteremo l'aereo a sinistra, e cosi via...
		this._x = this._x - velocita;
	} else if (Key.isDown(Key.DOWN)) {
		this._y = this._y + velocita;
	} else if (Key.isDown(Key.RIGHT)) {
		this._x = this._x + velocita;
	}
 
	//gestiamo le dimensioni in base all'altezza:
 
	partevariabile=this._y/5;
    this._yscale=40+partevariabile;
    this._xscale=40+partevariabile;
 
 
	if (this._y>vecchioy) 
        {this._rotation=5;}
else if (this._y < vecchioy)
        {this._rotation=-5;}
else if (this._y == vecchioy)
	{this._rotation=0;} 
vecchioy=this._y;
}

Quello che vogliamo fare, è creare una funzione che si occupi dello spostamento dell'aereo.

Per farlo, aggiungiamo nel primo fotogramma della linea temporale principale questo codice:

//dichiariamo la funzione muoviAereo, che avrà come argomento velocita
function muoviAereo (velocita) {
if (Key.isDown(Key.UP)) {
		_root.aereo._y = _root.aereo._y - velocita;
	} else if (Key.isDown(Key.LEFT)) {
//se è premuto il tasto sinistra, sposteremo l'aereo a sinistra, e cosi via...
		_root.aereo._x = _root.aereo._x - velocita;
	} else if (Key.isDown(Key.DOWN)) {
		_root.aereo._y = _root.aereo._y + velocita;
	} else if (Key.isDown(Key.RIGHT)) {
		_root.aereo._x = _root.aereo._x + velocita;
	}
	}

Si tratta dello stesso codice che abbiamo inserito in precedenza nello script del clip filmato: dobbiamo però ricordarci di sostituire this. con _root.aereo.

Ora possiamo modificare lo script del clip filmato aereo in questo modo:

 
 
//faremo eseguire questa istruzione ad ogni fotogramma (in modo continuo)
onClipEvent (enterFrame) {
 
 
	_root.muoviAereo(10);
	//gestiamo le dimensioni in base all'altezza:
 
	partevariabile=this._y/5;
    this._yscale=40+partevariabile;
    this._xscale=40+partevariabile;
 
 
	if (this._y>vecchioy) 
        {this._rotation=5;}
else if (this._y < vecchioy)
        {this._rotation=-5;}
else if (this._y == vecchioy)
	{this._rotation=0;} 
vecchioy=this._y;
}

Quello che cambia è che ora possiamo muovere l'aereo attraverso la funzione _root.muoviAereo(), specificando la velocità come argomento.

Ecco il risultato:

Scarica il file sorgente: gioco_aereo_movimento_funzione.fla

Lo sparo

Finora abbiamo creato i controlli per spostare il nostro aereo nelle quattro direzioni, ora vediamo come far sparare l'aereo.

Quello che faremo è creare un oggetto di tipo clip filmato nella libreria, richiamarlo tramite script e duplicarlo tante volte quanto necessario.

Vediamo come:

Creeremo un clip filmato nella libreria:

menu inserisci → nuovo simbolo

diamo come nome “proiettile”, e selezioniamo “Esporta per actionscript”, diamo come nome di identificatore “proiettile”.

Per richiamare un oggetto dalla libreria, senza averlo sullo stage, dobbiamo “esportarlo per actionscript” e impostare un identificatore

Disegniamo il nostro proiettile, dovrà essere molto piccolo, per cui useremo lo zoom per vederlo meglio…

Una volta disegnato, torniamo a modificare la scena1, il livello principale.

il clip filmato “proiettile” non deve essere trascinato sullo stage, basta che sia presente nella libreria

Ora cominciamo a scrivere la funzione che metterà nel filmato il clip proiettile, lo duplicherà e lo farà muovere verso destra.

Inseriremo la funzione nelle azioni del fotogramma, e la lanceremo dalle azioni del clip filmato dell'aereo in un secondo momento.

Vediamo il codice della funzione:

//useremo la variabile di incremento i, impostiamola a 0:
i=0;
//qui è dove costuiamo la funzione, la chiameremo sparaProiettili()
function sparaProiettili() {
//aumentiamo i di 1 (i++ è equivalente a i=i+1):
	i++;
//il nome dei proiettili che creeremo seguiranno lo schema proiettile1,proiettile2,proiettile3...
	var nomeproiettile = "proiettile"+i;
//qui usiamo la funzione attachMovie, che prende un clip filmato dalla libreria e lo mette nello stage. i tre argomenti sono: il nome del clip filmato originario, il nome di istanza del filmato sullo stage, e l'indice di profondità. Qui lo settiamo a 100+il valore di i.
	_root.attachMovie("proiettile", nomeproiettile, i+100);
//diamo le coordinate iniziali all'oggetto creato, in modo che sia ben sistemato rispetto all'aereo
	_root[nomeproiettile]._y = _root.aereo._y-15;
	_root[nomeproiettile]._x = _root.aereo._x-7;
 
//qui muoviamo il singolo proiettile. Questa è una sintassi particolare che applica una funzione ad un clip filmato:
	_root[nomeproiettile].onEnterFrame = function() {
		var velocita_proiettile = 7;
//moto rettilineo uniforme:
		this._x += velocita_proiettile;
// se il proiettile esce dallo schermo, lo rimuoviamo
		if (this._x>555) {
			this.removeMovieClip();}
			}
}

Ora che abbiamo definito la nostra funzione, dobbiamo decidere dove e come richiamarla. Per questo esempio, richiameremo la funzione quanto viene premuta la barra spaziatrice. Per farlo, selezioniamo il clip filmato dell'aereo e aggiungiamo questo codice:

//se il tasto spazio è premuto 	
if (Key.isDown(Key.SPACE)) {
//eseguiamo la funzione sparaProiettili(), che è definita in un fotogramma dello stage, quindi al livello principale, quindi scriveremo:
		_root.sparaProiettili();
	}

a questo punto il codice dell'aereo si presenterà cosi:

 
onClipEvent (load) {
	//assegnamo un valore alla variabile velocita
	velocita=10;}
 
//faremo eseguire questa istruzione ad ogni fotogramma (in modo continuo)
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
		this._y = this._y - velocita;
	} if (Key.isDown(Key.LEFT)) {
//se è premuto il tasto sinistra, sposteremo l'aereo a sinistra, e cosi via...
		this._x = this._x - velocita;
	} if (Key.isDown(Key.DOWN)) {
		this._y = this._y + velocita;
	}  if (Key.isDown(Key.RIGHT)) {
		this._x = this._x + velocita;
	} 
 
	//gestiamo le dimensioni in base all'altezza:
 
    partevariabile=this._y/5;
    this._yscale=40+partevariabile;
    this._xscale=40+partevariabile;
 
 
	if (this._y>vecchioy) 
        {this._rotation=5;}
else if (this._y < vecchioy)
        {this._rotation=-5;}
else if (this._y == vecchioy)
	{this._rotation=0;} 
vecchioy=this._y;
 
	if (Key.isDown(Key.SPACE)) {
		_root.sparaProiettili();
	}
}

Salviamo, proviamo il filmato ed il risultato sarà questo:

Comincia a sembrare un gioco vero! :)

Scarica il file sorgentegioco_aereo_sparo.fla

I nemici

Ora possiamo sparare… ma ci servono dei bersagli!

Per questo gioco useremo degli anonimi dischi volanti, abitati da alieni kamikaze. (ehm…)

Comunque, il principio che useremo per la generazione degli alieni è simile alla tecnica che abbiamo usato per lo sparo. Questa volta però duplicheremo un clip filmato già presente sullo stage, usando la funzione duplicateMovieClip.

La funzione attachMovie prende un filmato dalla libreria e lo mette nello stage, mentre duplicateMovieClip duplica un filmato già presente sullo stage

Vediamo come procedere.

Dobbiamo prima di tutto costruirci un disco volante, che possiamo disegnare rapidamente con gli strumenti di disegno.

Trasformiamolo in un clip filmato, trasciniamolo sullo stage e diamo come nome di istanza “nemico1”:

I nemici funzioneranno in questo modo:

Dal primo clip filmato verranno duplicati gli altri
I dischi duplicati avranno una velocità casuale e saranno disposti a caso in verticale sullo schermo
i dischi duplicati avranno lo stesso effetto di “profondità” dell'aereo
i dischi si sposteranno da destra a sinistra, una volta arrivati all'angolo sinistro dello schermo verranno riportati a destra

Per far questo, dovremo creare una funzione che duplichi il nostro disco volante. La aggiungeremo alle azioni che abbiamo associato al fotogramma 1 della linea temporale principale.

Vediamo il codice:

//funzione per la duplicazione dei nemici
//qui settiamo quanti nemici vogliamo creare
numeroNemici = 10;
 
function creaNemici()
{
//eseguiamo un ciclo for:
  for (j=2; j<=numeroNemici; j++)
  {
	//questo sarà lo schema dei nomi dei clip filmato duplicati
           nome = "nemico" + j;
//la funzione duplicateMovieClip applicata al clip "nemico":
	  _root.nemico1.duplicateMovieClip(nome, j,500+j);
  }
}
//eseguiamo la funzione
creaNemici();

Ora abbiamo una funzione che duplica il nostro clip filmato. Dobbiamo però dire al disco volante cosa fare, come muoversi, eccetera. Per cui applichiamo all'istanza del disco volante questo codice:

// al caricamento (onClipEvent(load)), definiamo la funzione reset, che riporta il disco volante alla posizione iniziale
 
onClipEvent(load) {
  function reset()
  {
// la coordinata x è fissa (il margine destro)
    this._x = 550;
// la coordinata y è variabile  da 0 a 300 (Math.random() produce un valore casuale fra 0 e 1).
    this._y = Math.random() * 300;
 
// la velocità è calcolata in modo casuale (il +1 è per assicurarsi che non sia mai 0)
    velocitaNemico = (Math.random() * 6) + 1;
  }
  reset();
} 
onClipEvent (enterFrame)
{
//queste istruzioni fanno variare le dimensioni in base all'altezza
         percentuale=Math.round(60 * this._y /350);
         this._yscale=40+percentuale;
         this._xscale=40+percentuale;
//moto rettilineo uniforme da destra verso sinistra:
         this._x -= velocitaNemico;
 
//se il disco volante raggiunge il lato sinistro dello schermo, eseguiamo la funzione reset  che abbiamo definito in precedenza
 
  if (this._x < -10)
  {
    reset();
  }
}

vedi esempio nemici

Scarica il file sorgente: gioco_aereo_sparo_nemici.fla

Collisioni

Ora dobbiamo individuare la collisione fra un proiettile ed un nemico.

Quando ci sarà collisione, il clip del proiettile verrà rimosso dallo stage, così come il clip dell'alieno colpito.

Vediamo come dobbiamo modificare il codice. Agiremo sulla funzione sparaProiettili(), che abbiamo definito nel primo frame della linea temporale principale. Dovremo aggiungere questo blocco all'interno della funzione:

 
//eseguiamo il controllo di collisione tante volte quanti sono i nemici presenti:
	for (h=1; h <= numeroNemici; h++)
  		{
//se il proiettile è in contatto con il nemico in questione (nemico2, ad esempio)
  			if (this.hitTest(_root["nemico"+h]))
    			{
//elimina il clip filmato del proiettile:
    			this.removeMovieClip();
//elimina anche il clip filmato del nemico:
   				_root["nemico" + h].removeMovieClip();
//dato che il primo che abbiamo creato non è eliminabile, rendiamolo invisibile
				_root["nemico" + h]._visible=0;
   				}
 
		}

Quindi, ora la funzione sparaProiettili si presenta così:

 
//funzione per lo sparo
i=0;
function sparaProiettili() {
	i++;
	var nomeproiettile = "proiettile"+i;
	_root.attachMovie("proiettile", nomeproiettile, i+10000);
	_root[nomeproiettile]._y = _root.aereo._y-15;
	_root[nomeproiettile]._x = _root.aereo._x-7;
	_root[nomeproiettile].onEnterFrame = function() {
		var velocita_proiettile = 7;
		this._x += velocita_proiettile;
		if (this._x>555) {
			this.removeMovieClip();
			}
 
	for (h=1; h <= numeroNemici; h++)
  		{
  			if (this.hitTest(_root["nemico"+h]))
    			{
    			this.removeMovieClip();
   				_root["nemico" + h].removeMovieClip();
				_root["nemico" + h]._visible=0;
   				}
 
		}
}
}

Ecco come si presenta il gioco:

vedi esempio collisioni

Scarica il file sorgente:gioco_aereo_sparo_nemici_collisione.fla

Punteggio

Ora che abbiamo una struttura di base funzionante, possiamo ad esempio introdurre un punteggio:

per farlo, modifichiamo ancora una volta la funzione sparaProiettili(), aggiungendo nel ciclo for un incremento:

 
for (h=1; h <= numeroNemici; h++)
  		{
  			if (this.hitTest(_root["nemico"+h]))
    			{
    			this.removeMovieClip();
   				_root["nemico" + h].removeMovieClip();
				_root["nemico" + h]._visible=0;
 
//aggiungiamo l'incremento
_root.punteggio++;
   				}
 
		}