Collisions example 1

[Flep]

Collision with Actionscript 3.0 – example 1

We are arrived at a very interesting subject. Specially for who wants to develop Flash games, the collision in between objects are fundamentals and often needed.

With FlepStudio, we will discover 4 types of them:

-collision in between MovieClip and straight virtual/drawn lines, using the conditional logic

- collision in between MovieClip and virtual/drawn points, using the Pythagorean theorem

- collision in between two or more MovieClip using the hitTestObject

- collision in between two or more MovieClip using the Pythagorean theorem

I advise to those of you who have not read yet the following articles, to take a look and study what has been explained in the tutorial <URL> Pythagorean theorem with Actionscript 3.0 and <URL> Pythagorean theorem – collision in between two MovieClip.

Let us start with the first example: collision in between a MovieClip and straight virtual/drawn lines using the conditional logics.

In the first part, we will see how to change the direction of an object which moves on stage once it collides with the stage limits.

In the second part, we will see how to change the direction of an object which moves on stage once it collides with drawn lines assigned as movement limits of the object itself.

Follow me…

First part

I create a FLA and save it as ‘main1.fla’, into which I create a MovieClip shaped as a ball. I place an instance of it on stage and name it ‘ball_mc’.

I now create a Document Class to associate to the FLA, an AS file saved as ‘Collisione.as’, implemented the following way:

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

The result:

Let us analyse the code.

Properties

two numerical variables to which I assign the values of the speed’s movement of the ball on the X and Y axes

private var speedX:int=2;

private var speedY:int=2;

a constant to which I assign the maximum value for the upwards ball movement

private const sopra:int=0;

a variable to which I assign the maximum value for the right movement (variable and not constant as I assign the value of the stage width, meaning a variable and not a constant which values need to be declared beforehand)

private var destra:Number;

a variable into which I insert a maximum value in between which the ball can move downward

private var sotto:Number;

a constant into which I insert the maximum value in between which the ball can move towards left

private const sinistra:int=0;

Methods

init();

I impost the frame rate

stage.frameRate=31;

I assign to the variables ‘destra’ and ‘sotto’ the stage width and height

destra=stage.stageWidth;

sotto=stage.stageHeight;

I call an ENTER_FRAME with a listener added to ball_mc

ball_mc.addEventListener(Event.ENTER_FRAME,go);

go();

I increase the ball_mc x and y of the value of speedX and speedY

e.target.x+=speedX;

e.target.y+=speedY;

I now apply a series of conditional logics which control constantly if ball_mc x and y are within the limits

I control if its x if smaller of the variable ‘sinistra’ plus half of the ball_mc width (as ball_mc has a centred registration point)

if(e.target.x<=sinistra+e.target.width/2)

{

I impost the ball_mc x equal to the left limit plus its width divided by two and then invert the value of the speed on the x axe (speedX). Using *=-1, we know that any number multiplied by minus itself will result in itself but with the opposite sign

e.target.x=sinistra+e.target.width/2;

speedX*=-1;

}

I repeat the same process with the other 3 conditions

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;

}

*

Second part

I create a FLA and save it as ‘main_2.fla’ into which I create a MovieClip shaped as a ball. I place an instance of it on stage and name it ‘ball_mc’.

I draw a rectangle using only the borders and no filling, smaller then the stage and placed in its centre.

I now create a Document Class associated to the FLA, an AS file saved as ‘Collisione2.as’

The Collisione2.as Class is different of the Collisione.as only for its properties values:

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 this case, I assign to the constant ‘sopra’ a value equal to 25 which would be the Y of the rectangle’s segment placed on top

To the constant ‘sinistra’ I assign a value equal to 25 which would be the x of the rectangle’s segment placed to the left

To the variable ‘destra’ I assign a value equal to 525 which would be the x of the rectangle’s segment placed to the right

To the variable ‘sotto’, I assign a value equal to 375 which would be the y of the rectangle’s segment placed at the bottom

The result:

See you soon with the second part!