Benoit Freslon's blog » ActionScript

ActionScript: test collision between a circle and a line

admin — Thu, 19 Aug 2010 18:27:45 +0000

Preview:

Download source code: circle_line_collision

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

// Test collision between a circle and a line
// coded by Benoit Freslon
//
// www.benoitfreslon.com

// Copy and paste this function into your code and don't forget to import the Point class.

import flash.geom.Point;

// pP1: (Point) the first point of the line
// pP2: (Point) the second point of the line
// pC: (Point) the point of the circle
// pRay: (Number) the ray of the circle
function lineCircleCollision(pP1:Point,pP2:Point,pC:Point, pRay:Number):Boolean {
var x0:Number = pC.x;
var y0:Number = pC.y;

var x1:Number = pP1.x;
var y1:Number = pP1.y;

var x2:Number = pP2.x;
var y2:Number = pP2.y;

var n:Number = Math.abs((x2-x1)*(y1-y0)-(x1-x0)*(y2-y1));
var d:Number = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
var dist:Number = n/d;

if(dist > pRay) {return false;}

var d1:Number = Math.sqrt((x0-x1)*(x0-x1)+(y0-y1)*(y0-y1));

if((d1-pRay) > d) {return false;}

var d2:Number = Math.sqrt((x0-x2)*(x0-x2)+(y0-y2)*(y0-y2));

if((d2-pRay) > d) {return false;}

return true;
}

// Now test this function

// 2 points for the line
var pt1:Point = new Point(100,50);
var pt2:Point = new Point(300,400);

// The ray of the circle 30px
var ray:Number = 30;

// Draw the line
this.graphics.lineStyle(1);
this.graphics.moveTo(pt1.x,pt1.y)
this.graphics.lineTo(pt2.x,pt2.y);

// Drag the circle
circle.startDrag(true);

// And test the collision
this.addEventListener(Event.ENTER_FRAME, enterFrame);
var ptC:Point = new Point(circle.x,circle.y);
function enterFrame (pEvt:Event):void {
// Update circle coordinates
ptC.x = circle.x;
ptC.y = circle.y;
if (lineCircleCollision(pt1,pt2, ptC, ray)) {
// Collision ok
circle.alpha = 0.5;
} else {
// No collision
circle.alpha = 1;
}
}

Orient an object to the mouse cursor

admin — Sat, 09 Jan 2010 18:17:14 +0000

How to orient an objet to an other ? Just put those lines and change the instance name myTank.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// This object will always look at the mouse cursor
myTank.addEventListener(Event.ENTER_FRAME, tankEnterFrame);
// This function will be launched every frame (25 times by seconds)
function tankEnterFrame(pEvt) {
// pEvt.currentTarget : myTank
var mc=pEvt.currentTarget;
// Get the radian angle between the tank and the cursor
// You can also replace mouseX and mouseY by another coordinates
var angleRadian=Math.atan2(mouseY-mc.y,mouseX-mc.x);
// Convert the radian angle in dedree
var angleDegree=angleRadian*180/Math.PI;
// Set the orientation
mc.rotation=angleDegree;
// Display angle of rotation in degree
txtAngle.text=Math.round(angleDegree)+"°";
}

Download the source code here : [www.thisisgameplay.com]_Orient_object_to_mouse_cursor.fla

Tutorial: How to make a game like Jetman – step 1 – The Jetman

admin — Fri, 18 Dec 2009 17:06:36 +0000

In my first tutorial I will show you how to make a flash game like Jetman.
A simple very famous casual game on facebook and very addictive.

Play Jetman

1. First of all you have to download the Adobe Flash IDE: Adobe Flash CS3 or Adobe Flash CS4

We will code the game with ActionScript 3.0 (the programming language of Flash) so you need Adobe Flash CS3 at least.
You can download the free trial version of Adobe Flash here (Mac or Windows) : https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en&product=flash

2. Create your document

Open Flash.
Create a new ActionScript 3.0 document.
On the properties set the framerate to 25fps.
And set the background color to black.

3. Create Jetman MovieClip

Flash uses graphic objects called MovieClip. So we have to create the Jetman’s MovieClip.

Click on the Rectangle tool on the tools bar. (on the left)

Then drag and drop on the stage to create a rectangle about width:50px and height:15px (you can modify your shape dimentions later).
Select all your shape including the border. You can also use a double click.
Do a right click on your selected shape and click on Convert to Symbol.
Write this symbol’s name : Jetman (not jetman or JETMAN).
Then click OK.

Now you can see your Symbol Jetman into your Library (on the right). If you don’t see the Library Press F11 key.
You have 1 instance of the Jetman symbol on your stage. Good. We just created a MovieClip.

In order to interact with the jetman MovieClip with ActionScript, we have the rename the instance’s name on the stage.

Click on the Jetman’s instance on the stage.

Then go to the properties on the bottom and set the instance’s name to jetman (not Jetman or JETMAN) it’s very important.

It’s done! Now we can move the instance with ActionScript.

4. Starting to code

You have differents ways to code with ActionScript. We will use the easier. (Coding into layers)

Create a new layer on the timeline (Click on the button on the left bottom corner).
Put the layer on the top: drag and drop the layer.
You can rename the layer with a double click or Right Click then rename.
Then select the first frame (here in black).

Finally go to the windows menu > Actions or press the F9 key.

A new windows is opening : The Actions window. We will to write all our code here.

Copy and paste this Actionscript 3 code (After codinf into your layer you should see a little a into this frame):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

// Please don't remove this comment.
// Code by Benoit Freslon.
// Tutorials, Flash games:
// http://www.thisisgameplay.com
//

////// Game balance
// Jetpack's boost speed
var speedBoost = -4;
// Gravity
var gravity = .8;
// Speed limit
var speedMax = 5;

////// Global variables don't touch those one
// Jetman is using his jetpack ?
var boost = false;
// Jetman's current speed
var speed = 0;

// 25 times by seconds this function will be launched
function jetmanEnterFrame(pEvt)
{
// If boost == true
if (boost)
{
// The speed changes
speed = speedBoost;
}
else
{
// Else the gravity decrease jetman's speed
speed += gravity;
}
// If the current speed is to hi
if (speed > speedMax)
{
// Limit the speed
speed = speedMax;
}
// If the current speed is to low
else if (speed < -speedMax)
{
// Limit the speed
speed = -speedMax;
}
// Every frame jetman will move vertically. (y axis)
jetman.y += speed;

// If jetman is out of the screen
if (jetman.y > 450)
{
jetman.y = 100;
}
}
// Add a event listener to launch the jetmanEnterFrame function every frames
jetman.addEventListener(Event.ENTER_FRAME, jetmanEnterFrame);

// If the mouse is pressed
function mouseDown(pEvt)
{
// Set boost to true
boost = true;
}
// Id the mouse is released
function mouseUp(pEvt)
{
// Set boost to false
boost = false;
}
// Detecting the mouse inputs (MOUSE_DOWN and MOUSE_UP) on the entire "stage"
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);

Finally test your game. (hit CTRL+ENTER)

You should see that:

Download the source file here:

[www.thisisgameplay.com]_Jetman_step1.fla

Download the compiled file here:

[www.thisisgameplay.com]_Jetman_step1.swf

Next step the level design… ;)

http://photos-g.ak.fbcdn.net/photos-ak-sf2p/v43/106/4243149646/app_1_4243149646_252.gif

Flash CS5 builds Iphone applications

admin — Tue, 06 Oct 2009 09:58:45 +0000

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store.*

A public beta of Flash Professional CS5 with prerelease support for building applications for iPhone is planned for later this year. Sign up to be notified when the beta starts.

At MAX 2009, Adobe showed a number of applications and games for iPhone that have been built using a prerelease version of Flash Professional CS5. These applications are available now for you to download from the Apple App Store.

Go to the official article on labs.adobe.com: http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/#divider

Roll And Jump released

admin — Sun, 27 Sep 2009 01:50:03 +0000

I’m proud to present you my last game: Roll And Jump. The game was designer for Iphone and IPod Touch.
If you are interrested in to play this game on your Iphone please contact me.
You can play here for free on your web browzer here:

PLAY ROLL AND JUMP

Have fun!

Win 80% performance on Flash ActionScript 2 project

admin — Wed, 18 Mar 2009 12:17:51 +0000

If you have lot of AS 2.0 projets like me you should be happy to know that you could win 80% performance on your projets with 4 lines of ActionScript.

First compile your AS 2.0 project with Flash.

Export your swf file in AS 2.0. (eg: your_as2_project.swf)

Then create an AS 3.0 loader with Flash CS3 or better.

Keep the same framerate on your loader. The same dimentions and the same background color. Put those lines into your AS 3.0 loader and replace the swf file with your file name.

var request:URLRequest = new URLRequest("your_as2_project.swf");
var loader:Loader = new Loader();
loader.load(request);
addChild(loader);

Finnaly compile your AS 3 loader.

It’s magic it works perfectly. It’s more smoothly and more faster. Thanks AVM2 ;).

Very important notes :

Delete all your TextField variables on you AS 2.0 file and use instance name. In AS 3.0 AVM2 doesn’t support TextField variables.
You couldn’t send HTML parameters to swf direclty to your AS 2.0 swf. You have to use a LocalConnection in order to send and receive informations between your 2 swf.