Tilebased games in Flash 5 – Part 11

Haven´t written in a long time, due to summer, vacation, sun, sandy beaches, beautiful women and warm beers ;) …an excuse as good as any I hope!

So now a little info on how to approach sloping tiles.

The first step is to find out where a certain point of our character is(usually the feet, or the bottom, by bottom I don´t mean the ass…).

Ok, so we have an xPos and a yPos of the character.
If we do something like:

onTileX = Math.floor(xPos/tileW);
onTileY = Math.floor(yPos/tileH);

We will find out what tile his on, like we´ve done many times before in previous tutorials. Now if we want to find out where on the tile xPos and yPos is, we could use these two variables above and do something like this:

whereOnTileX = Math.floor( ((xPos/tileW)-onTileX)*tileW );
whereOnTileY = Math.floor( ((yPos/tileH)-onTileY)*tileH );

If our tileW and tileH are 16×16 this will output a value between 0 and 16. If we remove the last values in the equation(*tileW and * tileH), we would get values between 0 and 1. So if we rather have it in percent than pixels or something else, that´s what we would change…

Here´s an example that demonstrates this visually(move your mouse over it).

Ok, so what good will this do then?
Well… if we got a tile that looks like this…

…you might see the connection? No…?
Simple, whereOnTileX is what we should remove from the yPos. The more to the right the point is on this tile, the more whereOnTileX will increase and the more we should remove from yPos to position it correctly…

Like this(move your mouse over it):

Pretty damn simple…
So how could we implement this into your charcater code then?
Well let´s say that this sort of tile is refered to as number 7 in our map.
We would know if we are on tile of type 7 by:

currentTile = map[onTileY][onTileX];

Then we could have a function like:

function collisionTileType_7 () {
	// alter the ypos or whatever here...

Then we could have a function like that for every tiletype that needs it. And then just call them with something like:


This can of course be done in other ways, but that´s up to you how you like to solve it…
Here´s an example of how it could look(focus then arrowkeys, left and right):

Ok, straight slopes is pretty easy to figure out since there´s a certain logic, the height difference between two points… But what about tiles that bends in all different directions? Like this one:

Maybe that was a bad example ;) but anyway… Looks like a road sign for bumby road, or topless women ahead…

I would have an array in the collision-function for this tile, that stores the height of each x-coordinate in that tile. Something like:

function collisionTile_15 () {
	var heightArray = [4,5,6,7,7,6,5,4,4,5,6,7,7,6,5,4];
	yPos -= tileH - heightArray[whereOnTileX];

So it would come out like this(move your mouse over it):

So that´s it then. As you can see this is pretty easy, but yet very powerful. Simply by knowing where the x and y coords for a point is on a certain tile, we can manipulate collisions and much more with pixel-perfection :)

This technique is of course the same when it comes to isometric enviorments.

It is also very useful when it comes to moving tiles, which should be the next tutorial I think…