Creation of a platform game with Flash – step 2

November 3, 2007 by Emanuele Feronato
Filed Under Flash, Game design • 35 Comments 

This is a quick update to the tutorial/engine started with Creation of a platform game with Flash – step 1.

I fixed some bugs and added a ladder object (the one defined in the array with “2″ and painted in light purple).

Use arrows to move and space to jump.

I won’t explain the script line by line at the moment because I want to add more features before writing a complete tutorial.

But the source code is someway commented

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

// player default speeds
xspeed = 0;
yspeed = 0;
max_yspeed = 10;
walk_speed = 4;
climb_speed = 2;
// am I climbing?
climbing = false;
// am I jumping?
jumping = false;
// can I jump?
can_jump = true;
// gravity & jump settings
gravity = 1;
jump_power = 10;
walking_while_jumping = true;
// level creation
level = new Array();
_root.createEmptyMovieClip("lev",_root.getNextHighestDepth());
_root.createEmptyMovieClip("lad",_root.getNextHighestDepth());
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
level[1] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
level[2] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
level[3] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
level[5] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1);
level[6] = new Array(1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[7] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[8] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[9] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[10] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[11] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[12] = new Array(1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1);
level[13] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
level[14] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
for (y=0; y<=14; y++) {
	for (x=0; x<=24; x++) {
		if (level[y][x] == 1) {
			place_brick = lev.attachMovie("block", "block_"+lev.getNextHighestDepth(), lev.getNextHighestDepth(), {_x:x*20+10, _y:y*20+10});
			place_brick.gotoAndStop(level[y][x]);
		}
		if (level[y][x] == 2) {
			place_brick = lad.attachMovie("block", "block_"+lad.getNextHighestDepth(), lad.getNextHighestDepth(), {_x:x*20+10, _y:y*20+10});
			place_brick.gotoAndStop(level[y][x]);
		}
	}
}
_root.attachMovie("player","player",_root.getNextHighestDepth(),{_x:40, _y:40});
// end of level creation
player.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		if (climbing) {
			xspeed = -climb_speed;
		}
		else {
			if (walking_while_jumping or can_jump) {
				xspeed = -walk_speed;
			}
		}
	}
	if (Key.isDown(Key.RIGHT)) {
		if (climbing) {
			xspeed = climb_speed;
		}
		else {
			if (walking_while_jumping or can_jump) {
				xspeed = walk_speed;
			}
		}
	}
	if (!feet_on_ladder()) {
		climbing = false;
	}
	if (Key.isDown(Key.UP)) {
		if (feet_on_ladder()) {
			yspeed = -climb_speed;
			climbing = true;
			jumping = false;
		}
	}
	if (Key.isDown(Key.DOWN)) {
		if (feet_on_ladder() or ladder_under_my_feet()) {
			yspeed = climb_speed;
			climbing = true;
			jumping = false;
		}
	}
	if ((Key.isDown(Key.SPACE)) and can_jump and !jumping and !climbing) {
		yspeed -= jump_power;
		jumping = true;
	}
	// adjusting y speed           
	if (!climbing) {
		yspeed += gravity;
	}
	if (yspeed>max_yspeed) {
		yspeed = max_yspeed;
	}
	if (level_under_my_feet() and !jumping and !climbing) {
		yspeed = 0;
	}
	if (ladder_under_my_feet() and !jumping and !climbing) {
		yspeed = 0;
	}
	forecast_x = this._x+xspeed;
	forecast_y = this._y+yspeed;
	// floor control 
	while (_root.lev.hitTest(forecast_x, forecast_y+this._height/2-1, true)) {
		forecast_y--;
		xspeed = 0;
		yspeed = 0;
		jumping = false;
	}
	// ceiling control
	while (_root.lev.hitTest(forecast_x, forecast_y-this._height/2, true)) {
		forecast_y++;
		yspeed = 0;
	}
	// left wall control
	while (_root.lev.hitTest(forecast_x-this._width/2+1, forecast_y, true)) {
		forecast_x++;
		xspeed = 0;
	}
	// right wall control
	while (_root.lev.hitTest(forecast_x+this._width/2, forecast_y, true)) {
		forecast_x--;
		xspeed = 0;
	}
	this._x = forecast_x;
	this._y = forecast_y;
	// adjusting speeds for next frame
	xspeed = 0;
	if (climbing) {
		yspeed = 0;
	}
 
};
function feet_on_ladder() {
	return _root.lad.hitTest(player._x, player._y+player._height/2-1, true);
}
function level_under_my_feet() {
	return _root.lev.hitTest(player._x, player._y+player._height/2, true);
}
function ladder_under_my_feet() {
	return _root.lad.hitTest(player._x, player._y+player._height/2, true);
}

This is the result you will get:

And this is the source code to download.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (37 votes, average: 4.68 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

35 Responses to “Creation of a platform game with Flash – step 2”

  1. lewis on November 3rd, 2007 4:54 pm

    cool man…i dont understand how to make side scrolling games please help!

  2. Kevin on November 3rd, 2007 5:57 pm

    Your tutorials are so awesome! thanks

    I’m also hoping that you do a side scrolling tutorial.

  3. Marcus Andersson on November 3rd, 2007 6:22 pm

    Wow!
    I gave up on making games in Flash a couple of years ago. Too bad this tutorial wasn’t around then (maybe it was and I didn’t see it?).
    Great job!

  4. LaRue on November 3rd, 2007 7:43 pm

    Instead of moving the man on the x-axis, only let him move on the y-axis(to jump). And make the background move. So if you press the left arrow key, make the background move right.

  5. chaew on November 3rd, 2007 8:02 pm

    this is great – with the ladders and everything but do you think you could do a similar tutorial but for an art-based scroller? Im currently developing a platform game (actually with the intention of publishing it on mochiads ;p) cheers

  6. RJ on November 3rd, 2007 8:28 pm

    Simply fantastic

  7. Tony on November 3rd, 2007 8:30 pm

    How’s the monetizing experiment going?
    I’m impatient to know it

    Keep up with this great work!

  8. Emanuele Feronato on November 3rd, 2007 9:11 pm

    Marcus: you couldn’t see it a couple of years ago because I posted it today :)
    But you can resume your skills and start programming again :)))

    Tony: I’ll write about it on Sunday (Italy time GMT+1), a week after I released the game

    About side scrolling: it’s an option I will inclue in future tutorials.

  9. sam on November 4th, 2007 7:54 am

    side scrolling would be easy. You can just make him move by 5 when you hit right AND make the whole scene move right. making boundaries and such too.i think new grounds has a tutorial thread full of lots of things about this. its called as: main i think. nice tuts Eman. Keep it up…

  10. Alejandro on November 5th, 2007 7:07 pm

    Is there any reason about to fill the array in the explicit way?
    Why don’t you use just

    level = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]

    In this way is easy to create a simple code to create levels and add a trace ouput to replace the level. I hope it helps with something
    Great tutorials!

  11. Sam on November 11th, 2007 11:29 am

    Will there be a third part to this tutorial? Perhaps one showing how to change the character from a block to better image…

  12. LonestarComics on November 13th, 2007 11:44 pm

    Is there a way to use XML data to load the level instead of arrays?

    This is the best Platformer tutorial I’ve found for Flash, keep up the great work and I can’t wait for part three!

  13. Emanuele Feronato on November 14th, 2007 1:47 am

    Sure, I wrote a tutorial about it on this blog.
    Search for “XML”

  14. Teal on November 14th, 2007 2:28 am

    This s great stuff. I’ve already started working on a new platform game using these tutorials, and it’s looking good.

  15. Strid on November 16th, 2007 10:39 pm

    Really nice

    would like to see a tutorial on angular collision and “loops” though

  16. Michael on November 17th, 2007 5:50 pm

    Hey, I am having trouble getting the ladder to work, I have copied the tutorial exactly, I just made the stage bigger. The thing that is wrong is that when I go to climb the ladder it just doesn’t let me pass through it and is treating it like it is part of the ground rather than the ladder. Any ideas on what is wrong?

  17. Randomguy on December 20th, 2007 7:26 am

    I got a way to avoid jumping in mid-air if you walked off a platform. just make sure that when space is down the guy is touching the floor. otherwise, he can jump in midair because his jumping is not set to true. this also removes the need for the can_jump and jumping variables.

  18. Pandz on February 16th, 2008 10:33 pm

    How do we add enemys? I’ve tried myself but its no t going that great… I’d really appreciate some help with this.

  19. Zenn on March 4th, 2008 1:30 am

    I would love to see this tutorial continued on to adding enemies, coins, getting you character to animate, and more!

  20. kylian on April 2nd, 2008 3:57 pm

    oh great tutorial but now i dnont now how to create a finnish plz help me

  21. Dan on April 28th, 2008 3:31 am

    this is using actionscript 3.0 right?

  22. stevie on May 8th, 2008 10:47 pm

    no dan u mug

  23. Gecko on June 14th, 2008 9:51 pm

    If you jump on the ladder, you will fall through it… Neat platform engine though!

  24. fraser on June 29th, 2008 11:37 am

    how would i make a door to go to the next area ive already made a block for it and added it to the level i just need the code to send me to the next level

  25. Nick on July 20th, 2008 11:27 am

    hey, love all the tutorials,
    could you please try to finish them would be so greatly appreciated.

    it would also be nice if you could make a tutorial that is on map making and such. i have read the xml and such though i am still confused on the several ways to make maps. and a map creator would be awesome.

  26. buhda on July 29th, 2008 2:07 am

    If you guys read the other tutorials, most of the ideas you are asking for have already been covered. If you start learning the code instead of stealing it you should be able to put the tutorials together to make a fully functional game.

    (btw thanks mr feronato)

  27. ultra on August 14th, 2008 1:15 pm

    hello i need the script for a door that go to the next lvl.

  28. FlashDev on November 2nd, 2008 11:49 am

    Great.

  29. FlashDev on November 2nd, 2008 2:44 pm

    Ye, I think that a door would be good in another tutorial. Also, I think that side scrolling and up-scrolling would be good. Many of the suggestions here are great eg. coins, enemies, finishes.

    (PS. Emanuele Feronato os a cool name.)

  30. lol on March 10th, 2009 11:36 pm

    wow thanks alot :D:D

  31. Jalapeno on June 29th, 2009 8:50 pm

    I seriously don’t think the climbing is good at all. I’m building a platformer now with a climb engine and your way of doing is is no good. Your shit.

  32. tommo on July 14th, 2009 2:09 pm

    hello im having trouble finishing the level im only 13 and i have only been making games for a few weeks now and i cant make a next level can someone please help

  33. Ruiqi on July 21st, 2009 11:35 am

    @tommo: Seriously, you’re 13 and you’ve only been programming for a few weeks… I’m 13 and I’ve been programming for 5 years…
    Anyways, first, put all of the level into a game movieclip and give it an instance name of mc_game. Then, change “_root” to “this”.
    After that, make a function in the root timeline:
    clearLevel = function():Void {
    for(i in mc_game) {
    mc_game[i].removeMovieClip();
    }
    }

    All that basically does is remove every movieclip within mc_game.

    Then place into mc_game’s timeline:
    if(mc_player.hitTest(mc_door)) {
    _root.clearLevel();
    nextFrame();
    }

    That is, assuming your door’s instance name is mc_door.

    And then make a new frame in mc_game. Copy the code and change the array to whatever you want.

    I assume you have AT LEAST basic knowledge of Flash…

    Hope I helped. :)

    And @Emanuele: Nice tutorial. It’s helpful.
    Except my player keeps sliding up the wall…
    :P

    Oh well, I can fix that.

  34. pud on October 28th, 2009 3:50 am

    @Ruigi: seriously, you’re only 13 and you’ve been programming for 5 years..

    i assume you don’t have any knowledge of how to make friends to play with..

    try to fix that.

Leave a Reply




Trackbacks

  1. Creación de un juego de plataformas (tipo Mario) en Flash « Shift F12 on May 13th, 2008 4:29 pm

    [...] otro lado esta el tutorial de Emanuele Feronato (tambien para AS2). Parte 1, Parte 2, Parte 3. Lo padre de este tutorial es que maneja varios niveles de plataformas y nos queda muy [...]

flash games company