Rotation of coordinates and collision with an angled surface with Flash CS3

[Flep]

Hi all,

This tutorial is a start in the field of advanced effect applied to Flash CS3 with Actionscript 3.0.

We saw how to rotate the coordinates of a MovieClip using a trigonometric formula.

We will now see how to rotate a whole system of coordinates.

Surely, it will have happened to you to have to intercept a collision in between two MovieClip as for instance a small ball and a vertical or horizontal surface.

We have seen how to do it in the tutorial that explains how to bounce a ball.

Instead what would happen if the surface would not be anymore horizontal but angled?

I mean as if the surface was going downward.

How to simulate the physical situation as if in reality we took a ball and made it bounce against a 45° tilted surface?

This is when the thing gets a great deal harder to realise and none of the formula used before and even less the hitTestObject can resolve this problem.

So?how can we do it?

There is a unique answer: rotate the coordinate of the system, apply the bounce and bring back the coordinates of the system to the initial state.

I create a FLA and I save it as ?trigonometria7.fla?.

Into which, I design an horizontal line, I convert it into a MovieClip and I assign to it the instance name ?line_mc?.

I create, next, a second MovieClip of rounded shape to simulate the shape of a ball and I assign to it the instance name ?ball_mc?.

I now create a new level, I open the action panel and I write:

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;
}

Let us analyse the code

I assign a rotation of 20° to line_mc

I create two variables into which I insert the speed for x and y

var vx:Number=0;

var vy:Number=0;

a constant that contains the value of gravity

const GRAVITY:Number=.5;

a constant that contains the value of bounce height

const BOUNCE:Number=-.7;

a variable that contains the value in radiant of the rotation of 20° applied to line_mc

var angle:Number=(line_mc.rotation/180)*Math.PI;

I add an ENTER_FRAME that calls the function go

addEventListener(Event.ENTER_FRAME,go);

Into the function go:

I progressively increase the speed on the y axis of ball_mc adding to it the constant GRAVITY

vy+=GRAVITY;

I pass to the properties x and y of ball_mc the values of the speeds (vx and vy)

ball_mc.x+=vx;

ball_mc.y+=vy;

I create two variables that respectively contain the sinus and cosinus of the angle, value of the variable angle

var sine:Number=Math.sin(angle);

var cosine:Number=Math.cos(angle);

I create two variables that contain the distance in between the x and y of ball_mc and line_mc

var xx:Number=ball_mc.x-line_mc.x;

var yy:Number=ball_mc.y-line_mc.y;

I apply the formula of rotation as seen in tutorial 6 of <URL> trigonometry </URL> and doing so,

I rotate the coordinates of the system

var x1:Number=cosine*xx+sine*yy;

var y1:Number=cosine*yy-sine*xx;

I apply the same formula of rotation to the speed (in physics, it would be like changing the direction of a vector)

var vx1:Number=cosine*vx+sine*vy;

var vy1:Number=cosine*vy-sine*vx;

I apply the collision and the bounce effect

if(y1>-ball_mc.height/2)

{

y1=-ball_mc.height/2;

vy1*=BOUNCE;

}

I bring back the coordinates of the system to the initial state

xx=cosine*x1-sine*y1;

yy=cosine*y1+sine*x1;

vx=cosine*vx1-sine*vy1;

vy=cosine*vy1+sine*vx1;

I assign the values of xx and yy respectively to the x and y of ball_mc

ball_mc.x=line_mc.x+xx;

ball_mc.y=line_mc.y+yy;

See you soon !