Collisioni con Actionscript 3.0 - esempio 1

[Flep]

Eccoci arrivati ad un campo molto interessante, soprattutto per chi vorrebbe imparare a creare qualche giochino in Flash.

Le collisioni tra oggetti sono fondamentali e spesso capita di averci a che fare.

Con FlepStudio, avremo modo di vederne di 4 tipi:

• collisioni tra MovieClip e linee rette virtuali o disegnate, utilizzando logiche condizionali


• collisioni tra MovieClip e punti virtuali o disegnati, utlizzando il teorema di Pitagora


• collisioni tra due o più MovieClip utilizzando il metodo hitTestObject


• collisioni tra due o più MovieClip utilizzando il teorema di Pitagora

Consiglio a chi non li avesse ancora letti, di dare uno sguardo e studiarsi quello che è stato applicato nel tutorial Teorema di Pitagora con Actionscript 3.0 e nel successivo articolo Teorema diPitagora - collisione tra due MovieClip.

Partiamo col primo esempio : collisioni tra MovieClip e linee rette virtuali o disegnate utilizzando logiche condizionali.
Vedremo, nella prima parte, come far cambiare direzione ad un oggetto che si muove nello stage una volta che collide con i limiti stessi dello stage.
Nella seconda parte, come far cambiare direzione ad un oggetto che si muove nello stage una volta che collide a delle linee disegnate che impostiamo come limiti di movimenti all'oggetto stesso.

Prima parte

Creo un FLA che salvo con nome ' main_1.fla '.
Al suo interno, creo una MovieClip a forma di pallina, la istanzio sullo stage e gli assegno nomeistanza ' ball_mc '.
Ora creo la Document Class da associare al FLA, un file AS che salvo con nome ' Collisione.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Collisione extends MovieClip
	{
		private var speedX:int=2;
		private var speedY:int=2;
		private const sopra:int=0;
		private var destra:Number;
		private var sotto:Number;
		private const sinistra:int=0;
		
		public function Collisione()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			destra=stage.stageWidth;
			sotto=stage.stageHeight;
			
			ball_mc.addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function go(e:Event):void
		{
			e.target.x+=speedX;
			e.target.y+=speedY;
			
			if(e.target.x<=sinistra+e.target.width/2)
			{
				e.target.x=sinistra+e.target.width/2;
				speedX*=-1;
			}
			if(e.target.x>=destra-e.target.width/2)
			{
				e.target.x=destra-e.target.width/2;
				speedX*=-1;
			}
			if(e.target.y<=sopra+e.target.height/2)
			{
				e.target.y=sopra+e.target.height/2;
				speedY*=-1;
			}
			if(e.target.y>=sotto-e.target.height/2)
			{
				e.target.y=sotto-e.target.height/2;
				speedY*=-1;
			}
		}
	}
}

Risultato:

Analizziamo il codice

Proprietà
due variabili numeriche a cui assegno un valore della velocità di spostamento della pallina, rispettivamente sull' asse x e sull' asse y
private var speedX:int=2;
private var speedY:int=2;
una costante in cui inserisco il valore massimo entro cui la pallina può muoversi verso l'alto
private const sopra:int=0;
una variabile in cui inserisco il valore massimo entro cui la pallina può muoversi verso destra ( variabile e non costante perchè siccome gli assegno il valore della larghezza dello stage, non posso farlo al momento in cui dichiaro la variabile, per cui le costanti possono essere valorizzate solo al momento della loro dichiarazione)
private var destra:Number;
una variabile in cui inserisco il valore massimo entro cui la pallina può muoversi verso il basso
private var sotto:Number;
una costante in cui inserisco il valore massimo entro cui la pallina può muoversi verso sinistra
private const sinistra:int=0;

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
assegno un valore alle varibili destra e sotto ( larghezza e altezza dello stage )
destra=stage.stageWidth;
sotto=stage.stageHeight;
chiamo un ENTER_FRAME con un listener aggiunto a ball_mc
ball_mc.addEventListener(Event.ENTER_FRAME,go);

go();
incremento la x e la y di ball_mc del valore di speedX e speedY
e.target.x+=speedX;
e.target.y+=speedY;
adesso applico una serie di logiche condizionali che costantemente controllano se x e y di ball_mc sono entro certi limiti
quì controllo che la sua x, se è minore del valore della variabile sinistra più la metà della largheza della stessa ball_mc ( questo perchè ball_mc ha il punto di registrazione al centro)
if(e.target.x<=sinistra+e.target.width/2)
{
imposto subito la x di ball_mc esattamente uguale al limite sinistro più la sua larghezza diviso due e poi inverto il segno del valore della velocità sull' asse x ( speedX ). Dicendo *=-1; sappiamo che qualsiasi numero moltiplicato per meno se stesso, darà sempre un numero uguale al valore di se stesso macon segno opposto.
e.target.x=sinistra+e.target.width/2;
speedX*=-1;
}
faccio l' identica cosa con le altre tre condizioni
if(e.target.x>=destra-e.target.width/2)
{
e.target.x=destra-e.target.width/2;
speedX*=-1;
}
if(e.target.y<=sopra+e.target.height/2)
{
e.target.y=sopra+e.target.height/2;
speedY*=-1;
}
if(e.target.y>=sotto-e.target.height/2)
{
e.target.y=sotto-e.target.height/2;
speedY*=-1;
}

Seconda parte

Creo un FLA che salvo con nome ' main_2.fla '.
Al suo interno, creo una MovieClip a forma di pallina, la istanzio sullo stage e gli assegno nomeistanza ' ball_mc '.
Disegno un rettangolo, con soli bordi le cui dimesioni sono più piccole dello stage e lo posiziono esattamente al centro dello stage
Ora creo la Document Class da associare al FLA, un file AS che salvo con nome ' Collisione2.as '.
La classe Collisione2.as si differenzia da Collisione.as solo per i valori delle proprietà:

private var speedX:int=2;
private var speedY:int=2;
private const sopra:int=25;
private var destra:Number;
private var sotto:Number;
private const sinistra:int=25;

private function init():void
{
	stage.frameRate=31;
	
	destra=525;
	sotto=375;
	
	ball_mc.addEventListener(Event.ENTER_FRAME,go);
}

In questo caso, assegno alla costante sopra un valore pari a 25, che sarebbe la y del segmento in alto del rettangolo disegnato.
Alla costante sinistra assegno un valore pari a 25, che sarebbe la x del segmento di sinistra del rettangolo disegnato.
Alla variabile destra assegno un valore pari a 525, che sarebbe la x del segmento di destra del rettangolo disegnato.
Alla variabile sotto assegno un valore pari a 375, che sarebbe la y del segmento in basso del rettangolo disegnato.

Risultato:

A presto con la seconda puntata ! ( lol sembra Dallas )