Flash Tutorials

Main | Simple AS | Overhead | Platform | ISO & TBW | Popup Poll | Change the Style | FK Games Forum | Back Home

Mario: A tile based game

Now, if you have played with mario, you will realize it isn't that smooth. In this edition, 
we plan to make his collision detection more accurate and to make him jump higher.

The reason for his hopeless collision is because we only guess where his edges are. Let's fix 
it a bit

In mario's brain's onClipEvent(load), we will work out the bounderies. Here's the
script for the first bit:

	b = new Object();
	b = _parent.getBounds(this);

Now, lets edit the function a bit (still in load):

Lets Change:
		px = _parent._x;
		py = _parent._y;

		left =  Math.floor((px - _parent._width/2)/_root.tile_width);
		right = Math.floor((px + _parent._width/2)/_root.tile_width);
		top = Math.floor((py - _parent._height)/_root.tile_height);
		bot = Math.floor(py/_root.tile_height);
		botup = Math.floor(py+2/_root.tile_height); // From below

To:
		px = _parent._x+x;
		py = _parent._y+y;

		left =  Math.floor((px+b.xMin)/_root.tile_width);
		right = Math.floor((px+b.xMax-_root.tile_width/4)/_root.tile_width);
		top = Math.floor((py+b.ymin)/_root.tile_height);
		bot = Math.floor((py+b.yMax-_root.tile_height/4)/_root.tile_height);

What these changes did was to accuratly work out mario's edges, and also to make it predict for
this move, and not the current position (slight overlook on my side, sorry :(). Since
we now have better hit detection, we no longer need botup (it was an extra foot hit area, slightly
up from the feet).

A little change. We will change all references to botup to bot, the only ones are in the x movment
hit tests. They should change to this:

 		if(x < 0){
			if(_root.map[top][left] < hardTileMin || _root.map[top][left] ≷ hardTileMax){
				if(_root.map[bot][left] < hardTileMin || _root.map[bot][left] > hardTileMax){
					_parent._x += x;
				}
			}
		}
 		if(x > 0){
			if(_root.map[top][right] < hardTileMin || _root.map[top][right] > hardTileMax){
				if(_root.map[bot][right] < hardTileMin || _root.map[bot][right] > hardTileMax){
					_parent._x += x;
				}
			}
		}

Soon we will need to program it to take the player right up to the edges, but that can wait.

Let's do the more fun thing, making him jump higher. This is quite easy, just a little edit
of the bottom of the brain onClipEvent(enterFrame).

Change:
	if(Key.isDown(Key.UP)){
		if(jumping == false){
			jumping = true;
			vel_y = -10; // Y Velocity
		}
	}
	
	if(jumping){
		vel_y += 1;
		move(0,vel_y);
		if(vel_y >= 10){
			jumping = false;
		} 
	}
To:
	if(Key.isDown(Key.UP)){
		if(jumping == false && UPdown == false){
			jumping = true;
			vel_y = -15; // Y Velocity
		}
		UPdown = true;
	}
	else{
		UPdown = false;
	}
	
	if(jumping){
		vel_y += 1;
		move(0,vel_y);
		if(vel_y >= 15){
			jumping = false;
		} 
	}

Next up, making him play his animations. We will make him play the run ones when
either the left or right key is down, and make him play the jump one too.

In the first bit of the enterFrame in the brain script, lets change it too:

	
	if(Key.isDown(Key.LEFT)){
		move(-4,0);
		if(_parent._currentFrame != 3 && _parent._currentFrame != 4){
			_parent.gotoAndPlay(2);
		}
	}
	if(Key.isDown(Key.RIGHT)){
		move(4,0);
		if(_parent._currentFrame != 3 && _parent._currentFrame != 4){
			_parent.gotoAndPlay(2);
		}

	}

Let's fix the obvious "moon walking" of mario:

	if(Key.isDown(Key.LEFT)){
		move(-4,0);
		if(_parent._currentFrame != 3 && _parent._currentFrame != 4){
			_parent.gotoAndPlay(2);
		}
		if(_parent._xscale != -100){
			_parent._xscale = -100;
		}
	}
	if(Key.isDown(Key.RIGHT)){
		move(4,0);
		if(_parent._currentFrame != 3 && _parent._currentFrame != 4){
			_parent.gotoAndPlay(2);
		}
		if(_parent._xscale != 100){
			_parent._xscale = 100;
		}
	}

And, the jump image:

	if(jumping){
		_parent.gotoAndStop(5);
		vel_y += 1;
		move(0,vel_y);
		if(vel_y >= 15){
			jumping = false;
		} 
	}


There are a good few things still to do (feedback on when character hits
the ground, scrolling, baddies, boxs, power ups ect....) but I'm quite
happy with it so far. Till next time, enjoy :)

(Note, I noticed a small typo, a missing [0] in my depth setting
and have changed it in all versions. This tutorial didn't use the
same method, so no worries) I also made a new map.

Zipped up current mario fla
Current mario fla
Current mario swf

Next
Counter:
Warning: include(../counter.php) [function.include]: failed to open stream: No such file or directory in /home/mack/public_html/flash_tutorials/includes/general.bot.php on line 8

Warning: include(../counter.php) [function.include]: failed to open stream: No such file or directory in /home/mack/public_html/flash_tutorials/includes/general.bot.php on line 8

Warning: include() [function.include]: Failed opening '../counter.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/mack/public_html/flash_tutorials/includes/general.bot.php on line 8

Unless otherwise specified, all textual content here was made by Ed Mack and should only be used for educational purposes. If you are cutting portions out, a credit and/or URL to this site is required. I'm not out there to sue people, but remember, I'm not paid for doing this, so if it gets stolen and put up somewhere else as "Joe Blogs 129"'s work, I may as well give up.