Benoit Freslon's blog - Game Design, Flash games, ActionScript tutorials ... » Game Design

ActionScript: Tutorial How to create a gravity like a Mario platformer

admin — Wed, 02 Feb 2011 14:21:47 +0000

In this little tutorial you will learn how to create a gravity like a Mario platformer.

Let’s start!

Get files

Save these 2 sprites (Right click > Save as)

Open Flash and create a new ActionScript 3.0 document.
Document properties: 24 fps, 550×400 by default.

Create the Hero MovieClip

Create a new Symbol: Insert > New symbol > MovieClip
Symbol name: Hero
Check Export for ActionScript
And Click OK

Now you are in you Hero symbol! Perfect!
Import the first sprite: mario_stand.png on the first frame:
File > Import > Import to stage > mario_stand.png
Set the sprite just on the top of the little black cross (pivot point)
Now create an empty keyframe on the timeline:
Timeline > 2nd frame on the timeline > Right Click > Create empty Keyframe
Import the second sprite: mario_jump.jpg on the second keyframe
Then create a new layer on the top and set 2 labels names
Insert > Timeline > New layer
And add 2 labels names:
On the timeline click on the first key frame with the mario_stand.png sprite and go to the Properties pannel > Label > Name > stand
On the timeline click on the second key frame with the mario_jump.png sprite and go to the Properties pannel > Label > Name > jump

Add the jump script

Back to the main scene: Click on the Scene 1
Add a new layer named “Actions”: Insert > Timeline > New layer
And open the Actions pannel: Timeline > Actions Layer > Keyframe > Right click > Actions
Finally copy and paste this 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

// The game gravity
var gravity = 0.8;

// The floor position (y)
var floor = 300;

// Add the hero MovieClip
var hero = new Hero();
// Set the x position
hero.x = 550/2;
// Set the y position on the floor
hero.y = floor;
// Set the hero state to "stand"
hero.gotoAndStop("stand");

// Add hero on the display list
addChild(hero);

// Create and set the speedY property to 0
hero.speedY = 0
// Create and set the jump impulsion to 10
hero.impulsion = 10;
// Add an enter frame event
hero.addEventListener(Event.ENTER_FRAME, heroEnterFrame)
function heroEnterFrame (pEvent)
{
// On each frames...

// Set the world gravity
hero.speedY += gravity;

// Move the hero with his speedY
hero.y += hero.speedY;

// If the y property is larger than the floor position
if (hero.y > floor)
{
// Set the hero on the floor
hero.y = floor
// Cancel the current speed
hero.speedY = 0;
// Change the state to stand
hero.gotoAndStop("stand");
}
}

// Add a mouse event on the stage
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown)

function mouseDown (pEvent)
{
// When the user click on the stage...

// If the hero is standing
if (hero.currentLabel == "stand")
{
// Set the new speedY with the hero impulsion
hero.speedY = -hero.impulsion;
// And change the state to jump
hero.gotoAndStop("jump");
}
}

Download sources: www.benoitfreslon.com_Create_gravity_like_a_mario_plateformer

ActionScript: Move an object with keyboard with absolute controls

admin — Tue, 01 Feb 2011 11:29:30 +0000

In this tip I will show you how to move an object with keyboard with absolute controls.

What is the absolute controls?

The direction of your object will be calculated depending the object orientation. (Biohazard, Micro Machines, Gears of War). This code is very usefull if you design a car game.

How to make an absolute control in Flash?

Get the arrow key status (key is up/key is down);
Move or rotate the object on enter frame with the new velocity (Left and Right keys: rotate, Up key: forward, Down key: backward);

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

// Assign 4 booleans for the 4 arrow keys
var keyUp = false;
var keyDown = false;
var keyLeft = false;
var keyRight = false;

// Add the keyboard event (KEY_DOWN) on the stage
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
function pressKey(pEvent)
{
// If an arrow key is down, switch the value to true to the assigned variable
if (pEvent.keyCode == 38)
{
keyUp = true;
}
else if (pEvent.keyCode == 40)
{
keyDown = true;
}
else if (pEvent.keyCode == 37)
{
keyLeft = true;
}
else if (pEvent.keyCode == 39)
{
keyRight = true;
}
}
// Add the keyboard event (KEY_UP) on the stage
stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
function releaseKey(pEvent)
{
// If the arrow key is up, switch the value to false to the assigned variable
if (pEvent.keyCode == 38)
{
keyUp = false;
}
else if (pEvent.keyCode == 40)
{
keyDown = false;
}
else if (pEvent.keyCode == 37)
{
keyLeft = false;
}
else if (pEvent.keyCode == 39)
{
keyRight = false;
}
}

// Set the velocity of the object
var speed = 6;
// And the rotation speed
var rotationSpeed = 5;

// Add an enter frame event on the moving object
myCircle.addEventListener(Event.ENTER_FRAME, circleEnterFrame);
function circleEnterFrame(pEvent)
{
// Set the default velocity to 0 if no key is pressed
var velocity = 0;
if (keyUp)
{
// If the key up is pressed set the new velocity to the speed value
velocity = speed;
}
if (keyDown)
{
// If the key down is pressed set the new velocity to the half speed value
velocity = -speed/2;
}
if (keyLeft)
{
// rotate the object
pEvent.currentTarget.rotation -= rotationSpeed;
}
if (keyRight)
{
// rotate the object
pEvent.currentTarget.rotation += rotationSpeed;
}

// Convert the degreeAngle to the radian angle
var angleRadian = pEvent.currentTarget.rotation / 180 * Math.PI;

// Move the object with the radian angle and the object speed
pEvent.currentTarget.x += Math.cos(angleRadian) * velocity;
pEvent.currentTarget.y += Math.sin(angleRadian) * velocity;
}

Download source: www.benoitfreslon.com_Move_an_object_with_keyboard_with_absolute_controls

ActionScript: Move an object with keyboard with camera relative control

admin — Tue, 04 Jan 2011 16:22:25 +0000

In this tip I will show you how to move an object with keyboard with camera relative control.

What is a camera relative control?

The direction of your object will be calculated depending the camera position. (Mario 64, Uncharted, GTA 3, etc.).
Eg: If press the right button the character will go on the right.

How to make a camera relative control?

Get the arrow key status (key is up/key is down)
Set the direction vector
Move the object on enter frame with the direction vector

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

// Assign 4 booleans for the 4 arrow keys
var keyUp = false;
var keyDown = false;
var keyLeft = false;
var keyRight = false;

// Add the keyboard event (KEY_DOWN) on the stage
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
function pressKey(pEvent) {
// If an arrow key is down, switch the value to true to the assigned variable
if (pEvent.keyCode == 38) {
keyUp = true;
} else if (pEvent.keyCode == 40) {
keyDown = true;
} else if (pEvent.keyCode == 37) {
keyLeft = true;
} else if (pEvent.keyCode == 39) {
keyRight = true;
}
}
// Add the keyboard event (KEY_UP) on the stage
stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
function releaseKey(pEvent) {
// If the arrow key is up, switch the value to false to the assigned variable
if (pEvent.keyCode == 38) {
keyUp = false;
} else if (pEvent.keyCode == 40) {
keyDown = false;
} else if (pEvent.keyCode == 37) {
keyLeft = false;
} else if (pEvent.keyCode == 39) {
keyRight = false;
}
}

// Set the velocity of the object
var speed = 6;

// Add an enter frame event on the moving object
myCircle.addEventListener(Event.ENTER_FRAME, circleEnterFrame);
function circleEnterFrame(pEvent) {
// Create a 2D vector in order to get the object direction according the arrow keys
var vector = new Point(0,0);
if (keyUp) {
// If keyUp is true add the -1 value on the y axis
vector.y += -1;
}
if (keyDown) {
// If keyDown is true add the 1 value on the y axis
vector.y += 1;
}
if (keyLeft) {
// If keyLeft is true add the -1 value on the x axis
vector.x += -1;
}
if (keyRight) {
// If keyRight is true add the 1 value on the x axis
vector.x += 1;
}

// Get the radian angle of the direction
var angle = Math.atan2(vector.y,vector.x);

// If vector lenght is not null
if (vector.length > 0) {
// Move the object with the angle and the object speed
pEvent.currentTarget.x += Math.cos(angle) * speed;
pEvent.currentTarget.y += Math.sin(angle) * speed;
}
}

[kml_flashembed publishmethod="static" fversion="10.0.0" movie="http://www.benoitfreslon.com/wp-content/uploads/2011/01/www.benoitfreslon.com-Move-an-objet-with-keyboard-with-camera-relative-control.swf" width="550" height="400" targetclass="flashmovie"]

Donwload source: www.benoitfreslon.com-Move-an-objet-with-keyboard-with-camera-relative-control.zip

ActionScript: Move an object to coordinates with smoothing

admin — Mon, 03 Jan 2011 15:53:50 +0000

There is a simple formula to move an object to coordinates with smoothing.
The speed will decrease with smooth during the time.

speed = distance_between_objects / smoothing

The distance will decrease because the distance will decrease too.

If I set values I got:

object.x = 50
targetX = 100

speedX = (targetX – object.x) / 5

On the first frame: speed = 10
object.x += (100 – 50) /5 > 50/5 > 10
> object.x = 50+10 = 60

On the second frame: speed = 8
object.x += (100 – 60) /5 > 40/5 = 8
> object.x = 60 + 8 = 68

On the third frame: speed = 6,4
object.x += (100 – 68) / 5 > 32/5 = 6,4
> object.x = 68 + 6,4 = 74,4

etc.

On the 100th frame: speed = 0
object.x += (100 – 100) / 5 > 0 /5 = 0
> object.x = 100 + 0 = 100

Source:

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

// Add a mouse event on the stage
stage.addEventListener(MouseEvent.CLICK, click);
function click(pEvent) {
// On click set the new x and y coordinates
myBall.targetX = stage.mouseX;
myBall.targetY = stage.mouseY;
}

// Set default coordinates
myBall.targetX = 200;
myBall.targetY = 200;

// Add an enter frame event on the ball
myBall.addEventListener(Event.ENTER_FRAME, ballEnterFrame);
function ballEnterFrame(pEvent) {
// On enter frame move the ball to the target coordinates
var b = pEvent.currentTarget;
b.x += (b.targetX - b.x) / 8;
b.y += (b.targetY - b.y) / 8;
}

Exemple:

Download source: www.benoitfreslon.com Move an object to coordinates with smoothing.zip

ActionScript: Throw bullets to mouse direction

admin — Mon, 27 Dec 2010 12:50:13 +0000

After calculating the angle of 2 graphic objects, you can also use this angle to throw a bullet to the object direction with the trigonometry.

How ?

Calculating the angle (in radian) between 2 graphics objects with the Math.atan2 method (cf. Orient object to the mouse cursor).
On click, display a bullet to the “tank” position and add an “enter frame” event on this bullet.
And save the angle between the tank and the mouse cursor on the new bullet.
Use this angle on the “enter frame” event to calculate the x and y speed with the cosinus and the sinus.

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

import flash.display.MovieClip;
import flash.geom.Point;
import flash.events.MouseEvent;

// Code by Benoit Freslon.
// Tutorials, Flash games:
// http://www.benoitfreslon.com

// 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 angle
var angleDegree = angleRadian * 180 / Math.PI;
// Set the orientation
mc.rotation = angleDegree;
// Display angle of rotation in degree
txtAngle.text = Math.round(angleDegree) + "°";
}

// Add a mouse down event on stage
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

function mouseDown(pEvent) {
// Create a new bullet
var b = new Bullet();
// Set his position to the tank position
b.x = myTank.x;
b.y = myTank.y;
// Save the randian angle between the mouse and the tank
// This angle will set the direction of the bullet
b.angleRadian = Math.atan2(mouseY - myTank.y,mouseX -myTank.x);
// Add an enter frame event on each bullet
b.addEventListener(Event.ENTER_FRAME, bulletEnterFrame);
// Add this display object on the display list
addChild(b);
}

// Velocity of each bullet
var speed = 8;

function bulletEnterFrame(pEvent) {
// Get the current object (Bullet)
var b = pEvent.currentTarget;
// Move this bullet on each frames
// On X axis use the cosinus angle
b.x += Math.cos(b.angleRadian) * speed;
// On Y axis use the sinus angle
b.y += Math.sin(b.angleRadian) * speed;
// Orient the bullet to the direction
b.rotation = b.angleRadian * 180 / Math.PI;
// You have to remove each created bullet
// So after every moves you must check bullet position
// If the bullet is out of the screen
if (b.x < 0 || b.x > 400 || b.y < 0 || b.y > 400) {
// Remove it from the display list
removeChild(b);
// /!\ AND REOMOVE HIS EVENT LISTER
b.removeEventListener(Event.ENTER_FRAME, bulletEnterFrame);
}
}

Download source: www.benoitfreslon.com_Throw_bullets_to_mouse_direction.zip

ActionScript: Detect collision between 2 circles

admin — Fri, 03 Dec 2010 11:02:25 +0000

With the Pythagoeran theorem you can detect collision with 2 circles.

You just have to get the rays of 2 circles with the width property divided by 2.
Actually the width property returns the diameter of the circle. So, you can calculte the ray like this:

ray = diamter / 2
ray = circle.width / 2

Therefore if you get the distance between the 2 circles you can detect the collision like this:

if distance < ( circle1.width/2+ circle2.width/2 ) is true => Collision

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

// Start enter frame event
this.addEventListener(Event.ENTER_FRAME, enterFrame);
function enterFrame(pEvent:Event):void {
// Get distance between the 2 MovieClips
var dist:int = getDistance(myCircleBlu,myCircleRed);
// Test the distance and compare with the 2 rays
if (dist < myCircleRed.width/2 + myCircleBlu.width/2) {
// If collision is detected change the opacity
myCircleRed.alpha = 0.5;
myCircleBlu.alpha = 0.5;
} else {
myCircleRed.alpha = 1;
myCircleBlu.alpha = 1;
}
}
function getDistance(pObj1:MovieClip,pObj2:MovieClip):Number {
var distX:Number = pObj1.x - pObj2.x;
var distY:Number = pObj1.y - pObj2.y;
return Math.sqrt(distX * distX + distY * distY);
}

ActionScript: Get distance between 2 MovieClips

admin — Thu, 25 Nov 2010 15:09:10 +0000

If you want to get the distance in pixels between 2 graphic objects just use the Pythagorean theorem in ActionScript :).

c² = a² + b²

Download source : Get_Distance.zip

1
2
3
4
5

function getDistance(pObj1:MovieClip,pObj2:MovieClip):Number {
var distX:Number = pObj1.x - pObj2.x;
var distY:Number = pObj1.y - pObj2.y;
return Math.sqrt(distX * distX + distY * distY);
}

ActionScript: Red Blood Cells behavior

admin — Fri, 12 Nov 2010 19:08:35 +0000

Download: Blood.fla

import flash.geom.ColorTransform;

var arrBlood:Array = [];

function createVers():void {
var b = new Blood();
b.speedX = 0;
b.speedY = 0;
b.coefCollision = 50;
b.coefRotation = 30;
var size:Number = Math.random();

b.scaleX = size * .5 + .5;
b.scaleY = size * .5 + .5;
b.scale = b.scaleX;
b.ray = b.width/2.5;
b.acc = true;
b.acceleration = 1+size*1;
b.coefDecceleration = 0.92+size*0.03;
b.velocityMax = 4+size*4;
b.velocity = 0;
b.x = 400 * Math.random();
b.y = 550 * Math.random();
b.angle = 0
var tint:Number = Math.random()*.7+.3;
b.transform.colorTransform = new ColorTransform(tint,tint,tint);
cont.addChild(b);
b.addEventListener(Event.ENTER_FRAME, versEnterFrame);
arrBlood.push(b);
//b.filters = [new DropShadowFilter(1,45,0,0.5,8,8)]
}

function getResAngleRad(angle1:Number,angle2:Number):Number {
var a:Number = angle1 - angle2;
if (a > Math.PI) {
a = a - Math.PI*2
} else if (a<(-Math.PI)) {
a = a + Math.PI*2
}
return a;
}

function versEnterFrame(pEvt:Event):void {
var b:MovieClip = pEvt.currentTarget as MovieClip;
var angle:Number;

if (b.acc) {
//trace("acc")
b.velocity += b.acceleration;
//trace(b.velocity)
if (b.velocity > b.velocityMax) {
b.acc = false;
}
} else {
b.velocity *= b.coefDecceleration;
if (b.velocity < 0.5) {
b.acc = true;
if ( stage.mouseX > 550 ||stage.mouseY > 400 || stage.mouseX < 0 ||stage.mouseY <0) {
b.angle = Math.atan2(400/2-b.y,550/2-b.x);
} else {
b.angle = Math.atan2(stage.mouseY-b.y,stage.mouseX-b.x);
}
}
}
b.scaleX = b.scale + (b.scale * 0.4) * b.velocity/b.velocityMax;
b.scaleY = b.scale - (b.scale * 0.4) * b.velocity/b.velocityMax;
var angleSpeed:Number = Math.atan2(b.speedY,b.speedX);
var angleRes:Number = getResAngleRad(angleSpeed,b.angle)
//trace(angleRes)
if (Math.abs(angleRes)<0.1) {
//trace("=")
} else if (angleRes >0) {
angleSpeed -= Math.PI/b.coefRotation * b.velocity/b.velocityMax;
//trace("+")
} else if (angleRes <0) {
angleSpeed += Math.PI/b.coefRotation * b.velocity/b.velocityMax;
}//trace("-")

b.speedX = Math.cos(angleSpeed)*b.velocity;
b.speedY = Math.sin(angleSpeed)*b.velocity;

b.rotation = angleSpeed * 180/Math.PI;

b.x += b.speedX;
b.y += b.speedY;

for (var i:String in arrBlood) {
var mc:MovieClip = arrBlood[i];
var dist:Number = getDistance(b,mc);
if (dist < b.ray+mc.ray) {
//trace("col")
var a:Number = Math.atan2(b.y-mc.y,b.x-mc.x);
b.x += Math.cos(a)*dist/b.coefCollision;
b.y += Math.sin(a)*dist/b.coefCollision;
mc.x -= Math.cos(a)*dist/b.coefCollision;
mc.y -= Math.sin(a)*dist/b.coefCollision;
}
}
}

function getDistance(a:MovieClip,b:MovieClip):Number {
return Math.sqrt(Math.pow(a.x - b.x,2) + Math.pow(a.y - b.y,2));
}
for (var i:int = 0; i<100; i++) {
createVers();
}

Take Something Literally 2: released

admin — Mon, 07 Jun 2010 21:21:07 +0000

Play

The second episode of Take Something Literally was released friday june 4thon ArmorGames.com.

You can play this game by clicking here: Take Something Literally 2. (Exclusive on ArmorGames until Friday)

Like I said, I designed an original, conceptual and non-conform game. Unfortunatly many players expect to see “a classic game”. Therefore they don’t understand the meaning of the game “Take Something Literally”. If I had to describe the main concept of Take Something Literally 1&2 I said: “Make the players play with their environment “. Like the first episode players have to play with their computer inside and outside the game.

If you don’t want to play with your OS, your browser, your mouse and your keyboard I think that Take Something Literally is not for you.

What is this game?

Take Something Literally 2 is a compilation of 25 original puzzles. In this game you just have to think outside the box. This game is abstract, conceptual and uses new interactivities. This new episode contains new features: new scoring system, new tip system and more funny rewards.

Walkthrough

Only if you are stuck :)

1st Part : http://www.youtube.com/watch?v=OLfz5Jy9FDc
2nd Part: http://www.youtube.com/watch?v=Jb7S5x2NFGQ

Why this game?

Actually I had no plans to develop a second episode. The first episode exhausted all resources of Flash. But I received many messages from players asking me to make a new Take Something Literally. I was exciting to work on this game again. So I decided to find 25 new puzzles with the same idea: “Make the players plays with their environment”. I wanted to create something new. I knew that many players would dislike that king of game but I also knew that players would be surprised and entertained to play an original game with original interactions. So I hope that game will entertain many players!

You should also read my last post about Take Something Literally 1&2.

Nano War 2.0 private beta 3

admin — Wed, 12 May 2010 16:07:31 +0000

First of all I would like to thank all beta testers and all your feedbacks. Your feedbacks will help me to make better games. You are welcome to post your message on the forum. Everybody can read your message and discuss about that.

I red all your messages so I decided to modify Nano War 2 again. I worked on Nano War 2 during few weeks in order to add more features and improvements.

The new beta version is playable here and the password is beta, please install the Flash debugger version and post your comments on the forum. Enjoy !

Edit: New translations an will come on the next version.

Here the release notes of Nano War 2 beta 3:

Upgrade system: Unit’s speed, Increase time, Fat sheild efficient, Special cells cost.
3 new challenges: with HUD, without HUD, with Fog of war.
You can buy your upgrades by complete different challenges.
New Hud shows the units power.
25 levels are fully playable.
Better AI.
Main font swtiched to Verdana in order to use special chars like chinese, russian, …
The quality can be switched with the “Q” key in order to optimise framerate.
Blur transition removed.
Lot of bugs fixed (collision, AI,..)