Creation of a platform game with Flash – step 3

March 19, 2008 • Flash, Game design by Emanuele Feronato • 32 Comments

To show you how hard I am going to try wiping the vaporware out of my life, I am publishing the 3rd part of the platform game tutorial.

Read parts 1 and 2 if you don’t remember what I am talking about.

In this update, I introduced two new tile types: the lava tile that kills you when you walk over it (read: when you walk over it, not when you touch it), and the horizontally moving tile, that automatically (read: automatically) connects two spots.

The code needs to be cleaned, but everything seems to work

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

// 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());
_root.createEmptyMovieClip("lava", _root.getNextHighestDepth());
_root.createEmptyMovieClip("moving", _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, 4, 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, 3, 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, 3, 3, 3, 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) {
			ladder_brick = lad.attachMovie("block", "block_"+lad.getNextHighestDepth(), lad.getNextHighestDepth(), {_x:x*20+10, _y:y*20+10});
			ladder_brick.gotoAndStop(level[y][x]);
		}
		if (level[y][x] == 3) {
			lava_brick = lava.attachMovie("block", "block_"+lava.getNextHighestDepth(), lava.getNextHighestDepth(), {_x:x*20+10, _y:y*20+10});
			lava_brick.gotoAndStop(level[y][x]);
		}
		if (level[y][x] == 4) {
			moving_brick = moving.attachMovie("block", "block_"+moving.getNextHighestDepth(), moving.getNextHighestDepth(), {_x:x*20+10, _y:y*20+10});
			moving_brick.gotoAndStop(level[y][x]);
			moving_brick.dir = 1;
			moving_brick.onEnterFrame = function() {
				this._x += this.dir;
				if ((_root.lev.hitTest(this._x+10, this._y, true) and (this.dir>0)) or ((_root.lev.hitTest(this._x-10, this._y, true) and (this.dir<0)))) {
					this.dir *= -1;
				}
				if (_root.player.hitTest(this._x, this._y-11, true) or _root.player.hitTest(this._x+5, this._y-11, true) or _root.player.hitTest(this._x-5, this._y-11, true)) {
					player._x += this.dir;
				}
			};
		}
	}
}
_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;
	// lava control
	if (_root.lava.hitTest(forecast_x, forecast_y+this._height/2-1, true)) {
		forecast_x = 40;
		forecast_y = 40;
		jumping = false;
	}
	// floor control             
	while ((_root.lev.hitTest(forecast_x, forecast_y+this._height/2-1, true)) or (_root.moving.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) or (_root.lava.hitTest(forecast_x, forecast_y-this._height/2, true)) or (_root.moving.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);
}

and, more important, I am learning how to fight vaporware plague.

Download the source code and give me the proof I can defeat vaporware.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 4.21 out of 5)
Loading ... Loading ...
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 32 comments

  1. RJ

    on March 19, 2008 at 8:36 pm

    Very useful, thanks

  2. Daniel

    on March 19, 2008 at 9:57 pm

    Nice,
    I hope you also create a side scrolling code, and clouds code, etc.
    Thanks

  3. David

    on March 19, 2008 at 10:32 pm

    Nice… Could you make the Super mario jump…. Thing? That would be awesome :).

  4. Grifo

    on March 19, 2008 at 10:44 pm

    Let us work together against Vaporware!

    Looks like I just came up with an enemy for our bombuzal. The Vaporbomber!!

  5. styxtwo

    on March 19, 2008 at 10:51 pm

    very sweet, and we all have to work agains vaporware ;)

  6. EagleVision

    on March 19, 2008 at 11:05 pm

    Thats a great Idea! :D

    Nice emanuele.

  7. Jack Hopkisn

    on March 19, 2008 at 11:19 pm

    Aweseome!
    The Vaporware has been…..Vaporized!!!!

  8. Kesh

    on March 20, 2008 at 1:15 am

    little bug report: when u fall into the red, you are still jumpable. so while ur falling, u can jump thus defying gravity.

  9. Michael

    on March 20, 2008 at 1:33 am

    You’re doing some good stuff here, Emanuele… keep it up :)

    I feel like I want to make another platform game now!

  10. Suely (Snakesue)

    on March 20, 2008 at 1:37 am

    Emanuele, you hit me and everybody. Wake up people. Thanks and a lot of kisses for you.

  11. abhilash

    on March 20, 2008 at 6:24 am

    please would u do the next tut on line rider i’am still waiting for that from last year.
    Nice tut ,ur first tutorial against vaporware :)

  12. Turboll

    on March 20, 2008 at 1:27 pm

    Many thanks for your great blog man, it is a great online game programming resource. I read most of the game design posts and you have inspired me picking up flash and actionscript.

    Your blog is as good as any game programming books, and it is an helpful guide in any programming language as it covers many basic gaming concepts. It has really helped me understanding some basic game programming functions that whas left in the dark before. It is allso helpful seeing the result of the code instantly in your web-browser.

    If I may ask: is it correct that your examples are written in actionscript 2? Can you recommend starting with As 2 or 3.0? (I’ve done some small games in C before).

    Best Regards.

  13. Eblup

    on March 21, 2008 at 6:55 am

    Hello this tutorial can lead to side scrolling that can be done by having everything in one moiveclip and have it move to keep the guy in the screen.

  14. Amanuele

    on March 22, 2008 at 12:52 am

    It looks like a very nice tutorial but can you help me? like can you breifly explain step by step or should I just read from parts 1-3 again?

  15. Eblup

    on March 24, 2008 at 9:23 am

    Hello, you should put in a area on youre sight for beginers and have some tutorials for actionscript 3.0.
    P.S. i think this may help you’re website a lot.
    ;}

  16. Eblup

    on March 24, 2008 at 9:41 am

    sorry for posting so much but if you have this
    1,1,1,1,1,1 and if you run into the moving block
    1,4,0,0,0,1 you glitch out.
    1,1,1,1,1,1

  17. Emanuele Feronato

    on March 24, 2008 at 11:14 am

    I know, the moving platform should kill the player but at the moment this does not happen.

    The first AS3 tutorial should be out today…

  18. Josh of Pixelton

    on April 1, 2008 at 11:50 pm

    Hello Emanuele,

    I simply had to say this is my favorite blog. I’m very bad at flash but your clear tutorials and awesome samples help show me the way. I feel that I might actually be able to learn this…

    So thank you! :D

    - Josh

  19. Josh of Pixelton

    on April 2, 2008 at 12:11 am

    Oh, and I’d love to learn how to create a level editor. Arrays are my enemy. Thanks again.

  20. Shaun

    on April 5, 2008 at 4:51 am

    Hey I have a question. why does it get all messed up when you raise the speed of the main character. It jumps up to the floor when you hit the wall at a higher speed

  21. ricky

    on April 9, 2008 at 2:32 pm

    heyy thnx for this TUT its great
    but im wondering how to make a WIN spot?
    when u arive in the win-block it loads a swf.
    can anyone help me?

  22. Joshua Thong

    on April 14, 2008 at 3:16 pm

    great tutorial, but can you like make a tut for a non-tile platform game? I’m not really at home with xml and other stuff, only actionscript. like, can you publish a tut on how to make a platform game where the hero is a symbol and the map and other obstacles etc. is a symbol too? XD ty man

  23. Mini Chris

    on April 17, 2008 at 8:17 am

    well so far tonypa’s is better but theres a few thing both of you dont have and thats freaking win spot to take you to next level i have tried and tried to do it but i cant.

  24. Jake

    on April 25, 2008 at 10:05 pm

    Need to add coins and an objective i dont know how Help need action script

  25. Quintus

    on May 16, 2008 at 2:09 pm

    Heho! :D
    i have a question.
    i am making a platform game in a soort op rpg style.

    but how do i make enemy’s, that attack and walk to you if you come close to them?

  26. Quintus

    on May 17, 2008 at 10:16 pm

    just put this action on your WIN place (alpha 0)

    onClipEvent(enterFrame) {
    if(_root.player.hitTest(this)) {
    //what ever you would happen if you win
    }
    }
    or do you mean somthing totally different where i dont have a clue in what for script it is?

  27. brart

    on June 10, 2008 at 7:52 pm

    For a port to the next level you have to make a 3 dimensial array where the first number is the level.
    When you finish the level, remove the movieclip lev, recreate it and than build the map with a higher number.

    I will try to make a tut for emanuele about this genre in as3. Maybe it will contain those “next level teleports”.

    Brart

  28. fraser

    on July 12, 2008 at 10:35 am

    now all we need is a tutorial for a door then were pretty much done and thanks these tutorials are a real help for flash game making

  29. Devon

    on March 28, 2010 at 4:12 am

    Can someone make it easy for a noob like me to just add more levels! I NEED to know how to make a door!

    PLEASE HELP!!

  30. Jade Gammer

    on February 2, 2011 at 1:19 pm

    This really help me, but a little bug, when holding UP and LEFT, the jump doesn’t work, but when holding UP and RIGHT jump does work. Haven’t figured out how to solve, but perhaps you could.

  31. Sam

    on March 18, 2011 at 1:06 am

    Emmanuel, how in the world did you manage to make the blocks all different colours using only 2 symbols, one of which is the player?
    I fail to see where you used code to change block’s colour.

  32. Sdrino

    on August 16, 2011 at 4:57 pm

    @Sam

    He put the color for each different block in different layers inside the “block” movie clip.

< >