UPDATE!

I have updated the associated download file to include the updates made in the "Basic Map File Loading" tutorial.

Introduction:

I had a request for help from someone on how to move a character around on a tiled background. I'd done this plenty of times in the past, so I took for granted that this would be a simple thing to describe. Well, it's not so simple to describe...but with Blitz Basic, it's a lot easier than it could be.

As with most of these articles, I'm going to give you a starting point. When you're done with this tutorial, you should be able to put an image up on the screen and move it around a tiled map. From here you'll want to work on expanding this idea to include things from past tutorials.

This tutorial relies heavily on the map loading routine that was in my last tutorial, "Basic Map File Loading". If you haven't read that tutorial yet, you'll likely get confused in here. So I'd recommened that you get that stuff down first.

Note that I *did* have to make some alterations to the Map File Loading stuff in order to make it accessible as a library. Check out the source in the TILES.BB file and also the TILES.BB section of the demo file for usage descriptions.

Note that the tiles used are from Ari Feldman's SpriteLib. Ari no longer makes this available on the web, but he has a book out that has these tiles on the CD. His site is: http://www.arifeldman.com.

Placing the Player's Character--Map to World Coordinates

Since our map is a two-dimensional Array of Types, we have to think in terms of X and Y. So, provided that we have a given Width and Height for each tiles (in this case, 32x32), we just need to find a tile on our map that is okay to place the character on. You don't want to place the character on a wall tile because that character will be unable to move. So locate a dirt/grass/etc. tile that the character CAN move on and find it's position.

In the example program I decide to put the character near the middle of the map. So I counted across in the map file and found that the X location was 8 and the Y was 5. From here I just took the TileWidth and TileHeight values (both 32) and multiplied the X and Y array values to get the "world coordinates".

Depending on the project, the term World Coorinates can mean different things. The basic idea is that you need a way of representing where things are in the game world. In your array, the player starts at 8,5. But if you call DrawImage with 8,5 as a start position, you'll see the image in the upper left corner. This will do you know good cause that's a wall!

Because of this you'll need to convert the array (or Map) coordinates to the game's World Coordinates. It's quite simple since it just requires you know the conversion amount. Again, in this case that amount is 32 for X and 32 for Y. So, if we want the World Coordinates for 8, we multiply 8 x 32 and get 256. Now when we call DrawImage with that X value, the image will be drawn with it's left-hand side starting on pixel 256 on your screen. We do the same thing for Y, 5 x 32 = 160.

We do have a minor problem that we'll need to adjust for. The player's image is NOT 32x32. It's a little smaller. Thus we'll need to adjust the final World Coordinate for the player a bit.

For X I take the TileWidth - PlayerWidth and divide that amount by 2. This gives an adjustment of 2. So I just hardcode that 2 in my DrawImage calls. I do this because I don't want to waste time calculating something that will remain constant. The Y value is handled the same way except using TileHeight - PlayerHeight / 2.

Now when the DrawImage function is called, the image will be draw near the center of the screen in World Coordinates.

Player hits a wall--World to Map Coordinates

Our player is on the map and things are looking good! At least until we start moving the character around. If we don't do some checking the character will run right over the walls and that will make for a dull game (unless it's some weird power-up option or something ;)).

Checking for wall collisions isn't as tough as you might think, but it can be a little tricky the first time you try it. There are points that you have to check on your image depending on the direction you're moving. If you are moving left, for example, you'll need to check the left side at the top and at the bottom. If you just check the left side you'll run the risk of having your player's feet run through a wall. Here is a few diagrams to kinda point this out since I know it's tough to visualize. This first shows the two points that must be checked if your player is moving left:

This one shows the points to be check if your player is moving right:

This one shows the points to be check if your player is moving up:

And finally this one shows the points to be check if your player is moving down:

If you don't check these points you will see your character running on top of some of the walls...even if only in a minor way.

So, what's the code look like for checking this? Glad you asked! Here is the code, study it carefully as you reference the above images (don't worry, I'll break this down a little after the code):

Now let me break down the basic World to Map Coordinate algorithm a little bit. To do that, I'm going to use the top-left check above...from there you should be able to determine the rest of the pieces.

As you'll recall, we hooked up our starting player position to be at 8,5 on the map. Converting that value to World meant we needed to multiply each Map Coordinate by the Tile Width/Height, 32. Then we adjusted that value by the Player Width/Height. So we had:

The above should get you started on moving a character around a tiled-map. You should play around with the calculations a bit and see if you can get them a bit more precise and/or try different sized images and get them to work on the screen. You'll notice that my calculations will make it so either the player is PERFECTLY positioned or the image won't move down...you'll likely want to be more forgiving than that!

To get a demo and all the source code: Click Here.

Until next time...cya!

-Krylar