Tilebased games in Flash 5 – Part 2

Ok, let´s continue with adding a character that can walk around. We use the same file as in the first tutorial, so if you haven´t read it, please do(it can be found here).

The first thing we should do is to change the registration-point on our tiles to the top-left corner. This will make it easier to calculate.

Then let´s make a movieclip containing our character, ctrl-F8, name it “character”. Draw a red square 10×10 pixels and center it.

Right-click this movieclip in the library and choose “Linkage…”, check “export this symbol” and write “char” in the identifier.

Now to the code.

First we need to setup where our character should start on the map. So we add this line after our map-array:

charPos = [1,2];

This means that the character will be placed at position 1 x-wise and 2 y-wise, or here:

myMap = [ [1,1,1,1,1,1,1,1],
	  [1,0,0,0,0,0,0,1],
	  [1,->0<-,1,0,0,0,0,1],
	  [1,0,0,0,0,1,0,1],
	  [1,0,0,0,0,0,0,1],
	  [1,1,1,1,1,1,1,1] ];

Now we move into our buildMap-function and add this piece of code inside the loop:

	...
	this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1);

	// add the character
	if ( i == charPos[1] && j == charPos[0] ) {
		this.attachMovie("char", "char", (mapWidth*mapHeight+1) );
		this.char._x = (j*tileW)+tileW/2;
		this.char._y = (i*tileH)+tileH/2;
	}
	...

It simply attaches the character-movieclip in the correct position on top of the map. Test the movie and see if it works. Hopefully it does…

Move! It should move!

Yes, it should! So let´s make it walk.

Doubleclick the character-movieclip in the library and get inside it. Make two new layers, one for a script and one to hold our keyevent-movieclip. We start with the getting the keys(we´re going to use the arrowkeys to control).

Make an empty movieclip, ctrl-F8, drag it from the library into the character-movieclip and center it. Select it and bring up the actionscript-window, and attach the following code:

onClipEvent (keyDown) {
	var dir;
	if (Key.isDown(Key.UP)) {
		dir = "up";
	} else if (Key.isDown(Key.DOWN)) {
		dir = "down";
	} else if (Key.isDown(Key.LEFT)) {
		dir = "left";
	}else if (Key.isDown(Key.RIGHT)) {
		dir = "right";
	} else {
		dir = null;
	}
	_parent.walk(dir);
	updateAfterEvent();
}

The if-statement just checks what key is pressed and sets the variable “dir” to that direction. Last we call a function that we´re about to make, and then we use updateAfterEvent to update the screen. This might be better of in a enterFrame-event later on if decide to do more complex stuff, but for now it works(one should really try to have as few enterFrame or frameloops as possible).

Next up is the walk-function, which we call from the keyevent-movieclip.

In the script-layer, add this code:

// speed constant
speed = 2;

function walk (dir) {
	// check dir
	if ( dir == null ) {
		return;
	}
	// where are our edges?
	var downY   = Math.floor( ( _y + (_height/2) ) /_parent.tileH );
	var upY     = Math.floor( ( _y - (_height/2) ) /_parent.tileH );
	var leftX   = Math.floor( ( _x - (_width/2) ) /_parent.tileW );
	var rightX  = Math.floor( ( _x + (_width/2) ) / _parent.tileW );
	var centerX = Math.floor( _x / _parent.tileW );
	var centerY = Math.floor( _y / _parent.tileH );	

	// move got dammit... and check for collisions.
	if ( dir == "up" && _parent.myMap[upY][centerX] != 1 ) {
		_y -= speed;
	}
	if ( dir == "down" && _parent.myMap[downY][centerX] != 1 ) {
		_y += speed;
	}
	if ( dir == "left" && _parent.myMap[centerY][leftX] != 1 ) {
		_x -= speed;
	}
	if ( dir == "right" && _parent.myMap[centerY][rightX] != 1 ) {
		_x += speed;
	}
}

So let´s step through that.

First we set a constant called speed, just how many pixels we should move each time.

In the function we first check to see if there is a direction(if a key is pressed), otherwise we just break.

Then by a simple equation like: xPostion / tileWidth.

We find out where we are in the array, let´s say our xPostion is 32 pixels from the left and our tileWidth is 12, 32/12 and we get something like 2.66666. If we then enclose this in a Math.floor we round this down to the closest integer, that is 2, so we should check on position 2 in the array.

So we simply find out where the edges of our character are.

Then we check what kind of tile that is in our map-array, like:

_parent.myMap[upY][centerX] != 1

Here we check what kind of tile is located in the top-center of the character. If it´s a 1-tile we don´t move, otherwise we do. You could of course do a little better checking, like if we move up you might want to check the leftX and rightX instead of the centerX. But you get the basic idea.

Here´s the example(Focus, then arrowkeys):

That´s it, now it should move, but not on the black tiles… You can download it here if you´re lazy, but I recommend that you try to do it your own way rather than trusting me.

Next up I´ll think we will look into scrolling, which can be bit tricky, especially in flash which is nearly to slow for that task. Until then, PLAY, add gravity, tiles with different properties and so on!

Twitter

    Sorry, no Tweets were found.

Categories