Step by step AS3 translation of Creation of a platform game with Flash – step 1.5

June 22, 2008 by Emanuele Feronato
Filed Under Actionscript 3, Flash, Game design, Users contributions • 11 Comments 

According to Bart de Boer, this is the step 1.5 of the Step by step AS3 translation of Creation of a platform game with Flash.

He fixed the jump issue and improved the collision engine.

As in the previous example, the file Script.as is the main class:

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
170
171
172
173
174
175

/*____________________________________________________
|______________	register of functions _______________|
|____________________________________________________|
 
- main()			only calling to update_hero() (every frame)
 
- create_hero()		creates hero as the var "Hero"
 
- update_hero()		check collision an move
 
- BuildMap()		load and create the level
 
 
extern
 
Data.as
- Setup()			create levels 
 
collision_manager.as
- Setup(size,map,hero)		setup the map
 
- Solve_all(forecastx,forecasty)		solves the collsions and checks for a jump
*/
 
 
package{												//The begin of an .as file
	import flash.display.MovieClip;						//import some libraries
	import flash.events.Event;
	import flash.events.KeyboardEvent;
 
	public class Script extends MovieClip{				// start the script
 
	private const gravity:int = 1;
	private const max_speed:int = 8;
 
	private const walkspeed:int = 4;
	private const jumpspeed:int = 10;
 
	private var forecast_x:int;
	private var forecast_y:int;
 
	private const start_x:int = 50;
	private const start_y:int = 50;
 
	private var left:Boolean;
	private var up:Boolean;
	private var right:Boolean;
	private var space:Boolean;
 
	private var level:Array = new Array();
	private var tiles:Array = new Array();
 
	private var Map_data:Data = new Data;				// create a version of the Data.as
	private var Hero_col:collision_manager = new collision_manager;
 
	private var Hero:hero = new hero;
 
		public function Script(){						// the init (will only be runned once)
			BuildMap();
			create_hero();
			addEventListener(Event.ENTER_FRAME, main);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
 
			Hero_col.Setup(25,level,Hero);
		}
 
		private function main(event:Event){
			update_hero();
		}
 
		private function key_down(event:KeyboardEvent){
			if(event.keyCode == 37){
				left = true;
			}
			if(event.keyCode == 38){
				up = true;
			}
			if(event.keyCode == 39){
				right = true;
			}
		}
 
		private function key_up(event:KeyboardEvent){
			if(event.keyCode == 37){
				left = false;
			}
			if(event.keyCode == 38){
				up = false;
			}
			if(event.keyCode == 39){
				right = false;
			}
		}
 
 
 
/*
///    ///		/////////	///////////		///////////
///    ///		///			////    ///		///		///
///    ///		///			////    ///		///		///
//////////		/////////	//////////		///		///
//////////		/////////	////	///		///		///
///    ///		///			////	///		///		///
///    ///		///			////	///		///		///
///    ///		/////////	////	///		///////////
*/
		private function create_hero(){
			addChild(Hero);
			Hero.x = start_x;
			Hero.y = start_y;
			Hero.x_speed = 0;
			Hero.y_speed = 0;
		}
 
		private function update_hero(){
			Hero.y_speed += gravity;
			if(left){
				Hero.x_speed = -walkspeed;
			}
			if(right){
				Hero.x_speed = walkspeed;
			}
			if(up && Hero_col.can_jump){
				Hero.y_speed = -jumpspeed;
			}
 
			if(Hero.y_speed > max_speed){
				Hero.y_speed = max_speed;
			}
 
			forecast_y = Hero.y + Hero.y_speed;
			forecast_x = Hero.x + Hero.x_speed;
 
			Hero_col.solve_all(forecast_x, forecast_y);
 
 
			Hero.x_speed = 0;
		}
 
 
/*
|||||||||||		 |||||||||||	  ||||||||||	||||||||||
||||||||||||	||||||||||||	 ||||	 ||||	||||	|||
||||	||||| |||||		||||	 ||||||||||||	||||||||||
||||	  |||||||		||||	 ||||	 ||||	||||
||||	    |||			||||	||||	  ||||	||||
||||					||||	||||      ||||	||||
*/
 
		private function BuildMap(){
			Map_data.Setup();												// setup data from extern file
 
			level = Map_data.level1;										// get data from extern file
 
			for(var t = 0; t < level.length; t++){
				for(var u = 0; u < level[t].length; u++){
					if(level[t][u] != 0){									//if the data is not null
						var new_tile:platform_tile = new platform_tile;		//than build a tile
 
						addChild(new_tile);									//put it on the screen
 
						new_tile.gotoAndStop(1);
						new_tile.x = u * 25;
						new_tile.y = t * 25;
 
						tiles.push(new_tile);								//put it in an array
					}
				}
			}
		}
	}
}
 
// You may not post this on any other site than: http://www.emanueleferonato.com or http://www.frozenhaddock.com. You may not claim that you wrote this code. I'm not responsible for any nuclear activity that may be caused by this script.

The level is stored in the Data.as

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

package{
 
	public class Data{
 
	public var level1:Array = new Array();
		public function Setup(){
			level1 = [
					  [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, 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, 1, 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, 1, 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, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
					  [1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
					 ]
		}
	}
}
 
// You may not post this on any other site than: http://www.emanueleferonato.com or http://www.frozenhaddock.com. You may not claim that you wrote this code. I'm not responsible for any nuclear activity that may be caused by this script.

While the solve_all function contained in the collision_manager.as solves all collisions in the forecast position of the player

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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245

package{
 
	public class collision_manager{
		private var Tile_size:int;			//containing the size of the tiles
		private var level;					//level data container
		private var forecast_x:int;			//where the player will be at the end of the frame
		private var forecast_y:int;			//"												  "
		public var can_jump:Boolean;		//same as in Emanuele's tutorial
		private var hero;					//to store the Hero object in
 
		public function Setup(size,map,heroj){		//my standard setup function(init)
			Tile_size = size;						//initializing al vars
			level = map;
			hero = heroj;
		}
 
		public function get_corners(point_x,point_y){				
		//get the position of the four corners of the hero
 
			hero.downy = Math.round((point_y + 10 - Tile_size/2) / Tile_size);
			hero.upy = Math.round((point_y - 10 - Tile_size/2) / Tile_size);
			hero.rightx = Math.round((point_x + 5 - Tile_size/2) / Tile_size)
			hero.leftx = Math.round((point_x - 5 - Tile_size/2) / Tile_size);
			/*
			Looks in wich tiles these four point are.
			*Attention* TILES and not pixel!
 
			Will be used to get the position of the corners 
			and to get the end position of the hero.
			*/
 
			hero.downleft = level[hero.downy][hero.leftx];
			hero.downright = level[hero.downy][hero.rightx];
			hero.upright = level[hero.upy][hero.rightx];
			hero.upleft = level[hero.upy][hero.leftx];
 
 
			/*
			Gets the sort tile the position of the corners has.
 
			One means there can be collision, zero is air.			
			*/
		}
 
		public function check_ground(){
			hero.downy = Math.round((hero.y + 11 - Tile_size/2) / Tile_size);
			hero.rightx = Math.round((hero.x + 5 - Tile_size/2) / Tile_size)
			hero.leftx = Math.round((hero.x - 5 - Tile_size/2) / Tile_size);
			// Makes three points in tile-coordinates
 
			hero.downleft = level[hero.downy][hero.leftx];
			hero.downright = level[hero.downy][hero.rightx];
			//Checks the sort
 
			if(hero.downleft == 1 || hero.downright ==1){		//if there is any collision by the hero's feet
				can_jump = true;								//than can jump
			}
			else{
				can_jump = false;								//else not
			}
		}
 
		public function solve_all(forecastx, forecasty){
		/*
		This function looks hard... an it is...
		I've been working on it for loads of hours, and this is the result.
 
		This is the best collision-test I've ever made, for sqaures.
 
		It's still readable, because I made it simple.
 
		It's four times almost the same. It checks for collision between the spots, 
		the four spots if there only were x_speeds, the four spots if there only was y_speed, 
		the four spots if there were both y- and x_speed.	
		That are 3*4 = 12 spots.
 
 
		//////////////////////////////////
		Why's:
 
		question:
		Why did I used forecast_x and forecast_y and not just hero.x and hero.y?
 
		answer:
		Changing the hero over the screen will cost loads of CPU because an hero 
		exist out of loads of pixels. The forecast's are just simple variables
 
		question:
		Is such a huge function not requiring a lot of CPU?
 
		answer:
		It doesn't uses any while- or for loops, Math. functions and the most important of 
		all: no hitTestPoint()/hitTestObject(). So it's a lot faster.
 
		question:
		Is there a better or faster collision test?
 
		answer:
		Probaly, yes.
		//////////////////////////////////
 
		var-explanation:
 
		downC 	-> 	is collision under the spot
		upC		->	is collision above the spot
		rightC	->	is collision right from the spot
		leftC	->	You probaly wouldn't expect this, but this is collision left from the spot
 
				*/
			forecast_x = forecastx;
			forecast_y = forecasty;
 
			get_corners(forecast_x,forecast_y);
 
			if(hero.downleft == 1){
				get_corners(hero.x,forecast_y);
					if(hero.downleft == 1){					
						hero.downC = true;
					}
					else{
						hero.downC = false;
					}
				get_corners(forecast_x,hero.y);
					if(hero.downleft == 1){					
						hero.leftC = true;
					}
					else{
						hero.leftC = false;
					}
					if(hero.leftC && hero.downC){
						forecast_x = (hero.leftx+1) * 25 + 5;
						forecast_y = (hero.downy+1) * 25 - 11;
						hero.y_speed = 0;
					}
					else if(hero.leftC){
						forecast_x = (hero.leftx+1) * 25 + 5;
					}
					else if(hero.downC){
						forecast_y = (hero.downy+1) * 25 - 11;
						hero.y_speed = 0;
					}
			}
 
			get_corners(forecast_x,forecast_y);
 
			if(hero.downright == 1){
				get_corners(hero.x,forecast_y);
					if(hero.downright == 1){					
						hero.downC = true;
					}
					else{
						hero.downC = false;
					}
				get_corners(forecast_x,hero.y);
					if(hero.downright == 1){					
						hero.rightC = true;
					}
					else{
						hero.rightC = false;
					}
					if(hero.rightC && hero.downC){
						forecast_x = hero.rightx * 25 - 6;
						forecast_y = (hero.downy+1) * 25 - 11;
						hero.y_speed = 0;
					}
					else if(hero.rightC){
						forecast_x = hero.rightx * 25 - 6;
					}
					else if(hero.downC){
						forecast_y = (hero.downy+1) * 25 - 11;
						hero.y_speed = 0;
					}
			}
 
			get_corners(forecast_x,forecast_y);
 
			if(hero.upleft == 1){
				get_corners(hero.x,forecast_y);
					if(hero.upleft == 1){					
						hero.upC = true;
					}
					else{
						hero.upC = false;
					}
				get_corners(forecast_x,hero.y);
					if(hero.upleft == 1){					
						hero.leftC = true;
					}
					else{
						hero.leftC = false;
					}
					if(hero.leftC && hero.upC){
						forecast_x = (hero.leftx+1) * 25 + 5;
						forecast_y = (hero.upy) * 25 + 10;
						hero.y_speed = 0;
					}
					else if(hero.leftC){
						forecast_x = (hero.leftx+1) * 25 + 5;
					}
					else if(hero.upC){
						forecast_y = (hero.upy) * 25 + 10;
						hero.y_speed  = 0;
					}
			}
 
			get_corners(forecast_x,forecast_y);
 
			if(hero.upright == 1){
				get_corners(hero.x,forecast_y);
					if(hero.upright == 1){					
						hero.upC = true;
					}
					else{
						hero.upC = false;
					}
				get_corners(forecast_x,hero.y);
					if(hero.upright == 1){					
						hero.leftC = true;
					}
					else{
						hero.leftC = false;
					}
					if(hero.leftC && hero.upC){
						forecast_x = hero.rightx * 25 - 6;
						forecast_y = (hero.upy) * 25 + 10;
						hero.y_speed = 0;
					}
					else if(hero.leftC){
						forecast_x = hero.rightx * 25 - 6;
					}
					else if(hero.upC){
						forecast_y = (hero.upy) * 25 + 10;
						hero.y_speed  = 0;
					}
			}
 
			hero.x = forecast_x;		//place the hero
			hero.y = forecast_y;
 
			check_ground()		//runs the function to check for ground
		}
	}
}
 
// You may not post this on any other site than: http://www.emanueleferonato.com or http://www.frozenhaddock.com. You may not claim that you wrote this code. I'm not responsible for any nuclear activity that may be caused by this script.

Now we have a working AS3 platform engine

Thanks to Bart de Boer for providing the source code of this prototype. Download it and start making your own AS3 platform game.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.83 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.

11 Responses to “Step by step AS3 translation of Creation of a platform game with Flash – step 1.5”

  1. Frederik J on June 22nd, 2008 10:27 am

    I think that it’s in the place to mention that this engine, is based on Tony Pa’s tile tutorials…

  2. brart on June 22nd, 2008 11:38 am

    Only the getCorners function I used was the same as him… also I didn’t know it.

    I didn’t USED his one. I even didn’t read his one, know I read it because you mentioned it.

    Brart

  3. Andvari on June 23rd, 2008 8:44 pm

    yay!! Finally it works great :D

  4. elhector on July 9th, 2008 9:23 pm

    Hey Emanuele, I really really like your blog and have been following it for a while. But I notice you keep using AS2 in your examples: don’t get me wrong, you are awesome to share them either way!… What I am wondering is: is there an underlying reason why you haven’t make the switch to AS3 completely?… Any bugs you have bumped into or something?…

  5. lain on July 18th, 2008 12:38 pm

    How could i add a bigger charakter … size like Width 22, Height 56 ?
    I get always a bug when i try to change some of the
    “forecast_x = (hero.leftx+1) * 25 + 5;” values
    My Character is walking into the tiles… or the tile pulls him away…
    can somebody plz help me…

  6. XNA Monkey on August 18th, 2008 10:33 pm

    I can see that you wrote this from scratch great work. Tonys Get corners did the trick. I actually used the Flash Geom Rectangle Class to figure out the corners for me.

    DOnt worry Frederik J just wanted to hate and hijack you AS3 implementation at the same time LOL.

    Great work man.

  7. Nathan on August 26th, 2008 1:47 pm

    Can you make a tutorial on how to do slopes and ladders, I can’t translate from Tony Pa’s code.
    Is there a such thing as prototype in AS3?

    Please respond, it would be much obliged.

  8. rahul on September 2nd, 2008 12:40 pm

    hi
    i want to know more abt collsiosn…how to do the
    collsiosn of player with tiledMap(like 0 ,1)

  9. Rezki on April 22nd, 2009 10:07 am

    hi im newbie. wats the different between as2 and 3? thx

  10. Daks on October 16th, 2009 4:03 pm

    Actionscript 2 was an extension of AS1, and they had similar syntax. They were designed to be accessible to non-programmers, and work with the Flash environment. Actionscript 3 is radically different in syntax and structure from AS2. AS3 is an object-oriented language, and much more similar to ‘real’ programming languages. While it is still optimized for use with Flash, it can now be used standalone, and code written in other languages are easy to port to AS3.

Leave a Reply




Trackbacks

  1. Adobe Flash CS3- AS3 and AS2 game tutorials roundup | Lemlinh.com on August 28th, 2008 1:57 am

    [...] Step 1.5 [...]

flash games company