Rotazione di coordinate e collisioni in superfici angolate con Flash CS3

[Flep]

Salve a tutti !

Questo tutorial è l' ingresso nel campo dell' effettistica avanzata applicata a Flash CS3 tramite Actionscript 3.0 .
Abbiamo visto come ruotare le coordinate di una MovieClip utilizzando una formula trigonometrica.

Ora andremo a vedere come ruotare un intero sistema di coordinate.
Vi sarà capitato di sicuro di dover intercettare una collisione tra due MovieClip come ad esempio una pallina ed una superficie orizzontale o verticale.
Abbiamo visto come poterlo fare nel tutorial che spiega come fare rimbalzare una pallina.
Cosa succederebbe se la suprficie non fose più orizzontale ma fosse angolata ? Sì, avete capito bene... in discesa tanto per capirci.
Come poter simulare la situazione fisica di come se nella realtà prendessimo una pallina e la facessimo rimbalzare contro una superficile angolata tipo una discesa oppure un muro con 45° di rotazione ?

Ecco che la cosa diventa assai ardua e nè le formule utilizzate fino ad ora, nè tanto meno il metodo hitTestObject potrebbero risolvere il nostro problema.
E allora come fare ?
La risposta è una sola, ruotare le coordinate del sistema, applicare il rimbalzo e riportare le coordinate del sistema allo stato iniziale.

Creo un FLA che salvo con nome ' trigonometria7.fla '.
Al suo interno disegno una linea orizzontale, la trasformo in MovieClip e gli assegno nome istanza line_mc.
Creo ora un' altra MovieClip con forma circolare come fosse una pallina e gli assegno nome istanza ball_mc.

Ora creo un altro livello, apro il pannello azioni e scrivo:

line_mc.rotation=20;

var vx:Number=0;
var vy:Number=0;
const GRAVITY:Number=.5;
const BOUNCE:Number=-.7;
var angle:Number=(line_mc.rotation/180)*Math.PI;

addEventListener(Event.ENTER_FRAME,go);

function go(evt:Event):void
{
	vy+=GRAVITY;
	ball_mc.x+=vx;
	ball_mc.y+=vy;
	
	var sine:Number=Math.sin(angle);
	var cosine:Number=Math.cos(angle);
	
	var xx:Number=ball_mc.x-line_mc.x;
	var yy:Number=ball_mc.y-line_mc.y;
	
	var x1:Number=cosine*xx+sine*yy;
	var y1:Number=cosine*yy-sine*xx;
	
	var vx1:Number=cosine*vx+sine*vy;
	var vy1:Number=cosine*vy-sine*vx;
	
	if(y1>-ball_mc.height/2)
	{
		y1=-ball_mc.height/2;
		
		vy1*=BOUNCE;
	}
	xx=cosine*x1-sine*y1;
	yy=cosine*y1+sine*x1;
	vx=cosine*vx1-sine*vy1;
	vy=cosine*vy1+sine*vx1;
	
	ball_mc.x=line_mc.x+xx;
	ball_mc.y=line_mc.y+yy;
}

Analizziamo il codice

assegno una rotazione a line_mc di 20°
creo due variabili in cui inserisco i valori delle velocità della x e della y
var vx:Number=0;
var vy:Number=0;
una costante che contiene il valore della gravità
const GRAVITY:Number=.5;
una costante che contiene il valore dell' altezza del rimbalzo
const BOUNCE:Number=-.7;
una variabile che contiene il valore in radianti della rotazione di 20° applicata a line_mc
var angle:Number=(line_mc.rotation/180)*Math.PI;

aggiungo un ENTER_FRAME che chiama la funzione go
addEventListener(Event.ENTER_FRAME,go);

Nella funzione go:
aumento progressivamente la velocità sull' asse y di ball_mc aggiungendogli la costante GRAVITY
vy+=GRAVITY;
do in pasto alle proprietà x e y di ball_mc i valori delle velocità ( vx e vy )
ball_mc.x+=vx;
ball_mc.y+=vy;
creo due variabili che contengono rispettivamente il seno e coseno dell' angolo che abbiamo come valore nella variabile angle
var sine:Number=Math.sin(angle);
var cosine:Number=Math.cos(angle);
creo due variabili che contengono le distanze tra la x e la y di ball_mc e line_mc
var xx:Number=ball_mc.x-line_mc.x;
var yy:Number=ball_mc.y-line_mc.y;
applico la formula di rotazione che abbiamo visto nel tutorial di trigonometria 6 e quindi ruoto le coordinate del sistema
var x1:Number=cosine*xx+sine*yy;
var y1:Number=cosine*yy-sine*xx;
applico la stessa formula di rotazione anche per le velocità ( in matematica/fisica sarebbe come cambiare la direzione di un vettore )
var vx1:Number=cosine*vx+sine*vy;
var vy1:Number=cosine*vy-sine*vx;
applico le collisioni ed il rimbalzo
if(y1>-ball_mc.height/2)
{
y1=-ball_mc.height/2;

vy1*=BOUNCE;
}
riporto le coordinate del sistema allo stato iniziale
xx=cosine*x1-sine*y1;
yy=cosine*y1+sine*x1;
vx=cosine*vx1-sine*vy1;
vy=cosine*vy1+sine*vx1;
assegno i valori di xx e yy rispettivamente alla x e y di ball_mc
ball_mc.x=line_mc.x+xx;
ball_mc.y=line_mc.y+yy;

Alla prossima !