Come realizzare un videogioco. Le Collisioni

Seconda Lezione - a cura di Fabrizio Radica
Questa pagina e soggetta a modifiche e/o aggiornamenti in qualsiasi momento.

Adesso, proviamo a far collidere il nostro oggetto con i bordi del dell'area video da noi definita ed una rudimentale collisione con un… ALIENO! brrrr!
Anche in questo caso non ottimizzerò il codice, ne utilizzerò funzioni proprie di ActionScript tipo HitTest ma bensì, andremo a creare NOI una semplice routine di collisione per capire effettivamente cosa facciamo. Tenete conto che ci servirà anche per creare le collisioni in altri linguaggi… tipo html5 ;)

riapriamo un nuovo documento in formato actionscript 3.0 e ci posizioniamo sul primo fotogramma nella nostra timeline. Con il tasto destro clicchiamo su ACTIONS e scriviamo:

stop();

Questo comando dice al player flash di fermare la Timeline e di eseguire lo script nel frame selezionato.

Vi ricordo che una delle cose più importanti in assoluto nello sviluppo di un videogioco è assolutamente la pulizia e l'ordine del codice.

Settiamo le varibili necessarie al nostro programma.

//variabili globali
var xvel=100; //setto variabile velocità per l'asse x
var yvel=100; //setto variabile velocità per l'asse y
var movx=300; 
var movy=200;
var delta=0;
var lastFrameTime
//creo un campo testo per il mio debug
var debug:TextField = new TextField();
	debug.text = "Debug :)";
	debug.y=380
	addChild(debug);
//Variabili Alieno
var xvelAlieno=50;
var yvelAlieno=50;

Una volta inizializzate tutte le variabili, possiamo cominciare a stendere il programma.
E' chiaro che nel corso del nostro sviluppo potremmo avere l'esigenza di inizializzarne altre. Raggruppatele in testa al codice dando loro dei nomi comprensibili e magari commentando come abbiamo visto sopra.

In questa lezione abbiamo introdotto una nuova funzione IMPORTANTISSIMA denominata TimeBased per la realizzazione di un videogioco o per qualsiasi altra animazione o sito che si rispetti.
Un videogioco utilizza la tecnica TimeBased e non FrameBased.
il TimeBased, non è dipendente dalla velocità del computer ma si basa sull'unità di tempo.
Fondamentale per sincronizzare un multiplayer.
Questa parte verrà approfondita nei prossimi tutorial.

function drawTimeBased(){
	var now = new Date().getTime();
	delta = (now - lastFrameTime) / 1000;
	lastFrameTime = now;
	}

Potete fare copia incolla di tutto il codice COMMENTATO sul primo fotogramma del vostro applicativo Flash, compilate e muovete l'oggetto con i tasti cursore.

stop();
//variabili globali
var xvel=100; //setto variabile velocità per l'asse x
var yvel=100; //setto variabile velocità per l'asse y
var movx=300; 
var movy=200;
var delta=0;
var lastFrameTime
//creo un campo testo per il mio debug
var debug:TextField = new TextField();
	debug.text = "Debug :)";
	debug.y=380
	addChild(debug);
//Variabili Alieno
var xvelAlieno=50;
var yvelAlieno=50;
//Inizio gestione Tastiera
//
// Questa parte, potete copiare ed incollare tranquillamente se non 
// avete voglia di comprenderla.
// L'importante è creare le varibili con i tasti che vi servono.
//Assegno dei valori ASCII corrispondenti ai tasti che andrò a gestire.
var _right:int = 39;
var _left:int = 37;
var _up:int = 38;
var _down:int = 40;
//Mi bufferizzo tutti i valori della tastiera per recuperarli in seguito.
var keyArray:Array = new Array();
for (var i:int=0; i<222; i++){
	keyArray.push([i,false]);
}
//Creo gli eventi ed associo una funzione se il tasto è premuto o rilasciato.
stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKeysDown);
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeysUp);
function checkKeysDown(event:KeyboardEvent):void{
	keyArray[event.keyCode][1] = true;
}
function checkKeysUp(event:KeyboardEvent):void{
	keyArray[event.keyCode][1] = false;
}
function isKeyDown(X){
	return keyArray[X][1];
}
//Fine Gestione Tastiera
// ROUTINE DI COLLISIONE
// Al momento eviterò di ultilizzare le funzioni native HitTest di Flash per farvi
// capire come far collidere due oggetti.
// la collisione avviene se i raggi dei rispettivi oggetti collidono
function collisione(sor,dest,r1,r2){
	    var dx = sor.x - dest.x;
	    var dy = sor.y - dest.y;
	    var minDist = r1 + r2;
	    var ddx=dx*dx
	    var ddy=dy*dy
	    return ddx + ddy < (minDist * minDist);
	}
// Funzione importante per i videogiochi. 
// Un videogioco utilizza la tecnica TimeBased e non FrameBased.
// il TimeBased, non è dipendente dalla velocità del computer ma si basa sull'unità di tempo.
// Fondamentale per sincronizzare un multiplayer.
// Questa parte verrà approfondita nei prossimi tutorial.
function drawTimeBased(){
	var now = new Date().getTime();
	delta = (now - lastFrameTime) / 1000;
	lastFrameTime = now;
	}
//Creo un oggetto sullo schermo
var mc:MovieClip = new MovieClip();   // Creo un MovieClip chiamato mc
	mc.graphics.beginFill(0xFF0000);      // Assegno un colore
	mc.graphics.drawRect(0, 0, 100, 80);  // Delineo il la sagoma: x1,y1,x2,y2
	mc.graphics.endFill();				  // Riempio il nostro MovieClip
	mc.x = 0;		// lo posiziono a 80 pixel sull'asse X
	mc.y = 0;		// lo posizioni a 60 pixel sull'asse y
	addChild(mc);	//  l'oggetto appena creato lo mostro sullo stage
//Creo l'oggetto ALIENO
var mcAlieno:MovieClip = new MovieClip();   // Creo un MovieClip chiamato mc
	mcAlieno.graphics.beginFill(0x00FF00);      // Assegno un colore
	mcAlieno.graphics.drawRect(0, 0, 100, 80);  // Delineo il la sagoma: x1,y1,x2,y2
	mcAlieno.graphics.endFill();				  // Riempio il nostro MovieClip
	addChild(mcAlieno);		// l'oggetto appena creato lo mostro sullo stage
// Creo il loop dove andare a girare tutto il mio programma/gioco.
// Questa riga è importante perche' esegue il codice scritto dentro il main ad ogni ciclo.
addEventListener(Event.ENTER_FRAME,main);
//Main Loop
function main(e):void{
	
	//richiamo la funzione TimeBased
	drawTimeBased()
	
	if (isKeyDown(_up)){ //E' stato premuto il tasto freccia alto?
	//muovi il nostro Movie clip del valore specificato nella variabile yvel*delta.
		movy -=  yvel*delta;
	}
		
	if (isKeyDown(_down)){ //E' stato premuto il tasto freccia basso?
	//muovi il nostro Movie clip del valore specificato nella variabile yvel*delta.
		movy +=  yvel*delta;
	}
		
	if (isKeyDown(_left)){ //E' stato premuto il tasto freccia sinistra?
	//muovi il nostro Movie clip del valore specificato nella variabile xvel*delta.
		movx -=  xvel*delta;  
	}
		
	if (isKeyDown(_right)){ //E' stato premuto il tasto freccia destra?
	//muovi il nostro Movie clip del valore specificato nella variabile xvel*delta.
		movx +=  xvel*delta;
	}
				
	//collisione con i bordi della scena
	if(mc.x<0 ) { movx=0 }
	if(mc.x>500 ) { movx=500 }
	if(mc.y<0 ) { movy=0 }
	if(mc.y>380 ) { movy=380 }
		
		
	mc.x = movx;  //assegna il valore in movx alla coordinata X del nostro movieclip
	mc.y = movy;  //assegna il valore in movx alla coordinata Y del nostro movieclip	
		
	//AI Alieno....
	//Chiamarla AI è un eufemismo.. 
	//diciamo che mi limito a muovere l'oggetto nei due assi...
	mcAlieno.x+=xvelAlieno*delta
	mcAlieno.y+=yvelAlieno*delta
		
	//controllo se collide con i bordi da me definiti della scena
	if(mcAlieno.x<0 || mcAlieno.x>500) {	
		//.. e se si, allora inverto la velocità...
		xvelAlieno=-xvelAlieno
	}
		
	//lo stesso vale per la Y
	if(mcAlieno.y<0 || mcAlieno.y>380) { 
		yvelAlieno=-yvelAlieno
	}
		
		
	//Se avviene la colliione tra i due oggetti attraverso la nostra funzione
	//allora avviene qualcosa... (quello che vogliamo)
	if(collisione(mc,mcAlieno,50,50)){
		debug.text="Collisione"
		}else{
		debug.text=""
	}		
				
}

In questa lezione abbiamo visto come far collidere due oggetti semplicemente calcolando la distanza (il quadrato) tra due punti… non ho usato pitagora per rendere più comprensibile e veloce :)

Nella prossima lezione vedremo i primi rudimenti di gioco :)
Arrivederci alla prossima Lezione.