Map Engines: Zelda style free movement and pixel by pixel scrolling

The most common types of map engines seen to day are those that: move tile by tile : patheticly blocky and jumpy movement

Pixel by pixel scrolling, move 1 tile at a time: decent to look at, but still pathetic when considering the freedom that the player has.

Now, probably one of the better engines is that of zelda clones, but only if the are done right. Most people find it hard to make these because of the freedom that the player has to move around the place. But this is one of the most simple things to do!To find out what tile a player is on all you do is use the following(very simple) calcs:-

xtile = INT(playerxpos / tilexsize)
ytile = INT(playerypos / tileysize)
        

There! Wasn't that easy, now all you must do is check that in the map buffer and you have collision detection!

What about scrolling you ask...Well I'm getting to that. The scrolling that we are going to use is not any fancy scrolling routines or anything like that, our map is going to be redrawn each time.
This will require the use of a lib to do a full screen map as you will see.

First of all we are going to implement a camera, this is really cool as there are lots of things you can do with camera routines, for example, in a cut scene that uses the game engine.

We are going to start with the simplest type of camera and basically keep the player in the center of the screen(until he/she hits the edge of the map) this can be done with the following code:-

cameraX = playerX - 160
cameraY = playerY - 100
        

This assumes that you are using mode 13 or 7 and a full screen map. so now the camera is at a place that will have the player in the center of the screen constantly. But, we want the camera to stop moving when the player hits the edge of the map so we just use some simple if's like so:

IF cameraX < 0 THEN cameraX = 0
IF cameraY < 0 THEN cameraY = 0
        

This accounts for the top and left of the screen, but what about the bottom and the right ? well for this we need two more values..maxmapx and maxmapy..so we can tell where to stop the camera going.

IF cameraX > maxmapx-320 THEN cameraX = maxmapX - 320
IF cameraY > maxmapY-200 THEN cameraY = maxmapY - 200
        

This is now allowing the map to stop scrolling when the player enters the edge of the map and stops us from going outside the map buffer also. 320 and 200 are taken away so that we get the top left hand side of the screen, this is where everything is being redrawn from so that is where we need it.

Now for the drawing of the map.

What we want to do here is calculate the tile where the camera starts(NOTE: the tile not the pixel) then we want to add the value of the distance into the tile that the camera is(in pixels) and then redraw the map from there.

So here is how we find out the x and y tiles that the camera is on: for the ease of it we are going to use 20x20 tiles

xtile = INT(cameraX / 20)
ytile = INT(cameraY / 20)
        

Now we know which tile the camera is on and which tile to start reading from the map buffer.
To calculate the exact position of the tile I am going to have to make a loop which is basically the whole thing, I'll explain after. (the routines in this are not real, just for speed)

DECLARE SUB PUTTILE(X, Y, TILETOPUT)

xtile = INT(cameraX / 20)
ytile = INT(cameraY / 20)

FOR x = 0 to 16
FOR y = 0 to 10
 tile = map(x+xtile,y+ytile)
 xpos = cameraX MOD 20
 ypos = cameraY MOD 20
 PUTTILE (x*20) - xpos, (y*20) - ypos, tile
NEXT
NEXT

I know this looks hard but I'll talk you through it:

The sub decloration is just to tell you what the parameters I am using are.

Then I calculate the tiles on which the camera lies

Then I start the x and y loops, this is all simple enough. Notice that by using 20x20 tiles and going from 0 to 16 and 0 to 10 that I'm using 1 extra tile either side of the screen, this is because we are going to need some of each tile to be on the screen at any one time.

I get the number of the tile from the map buffer, this assumes a map array with 2 subscripts. by adding the number of the tile that the camera is lying on to the x and y values when reading the map we are effectivly getting the correct offset in the map buffer according to where the camera is, this allows us to redraw only the part of the map being viewed on the screen.

By using the mod function on the camera values we are getting the offset into the tile that the camera is on. Even if you don't understand this, trust me, it works.

Now for the drawing of the tile. The tile is drawn at x*20, y*20 a standard thing in any map engine. Then we minus the distance that the camera is into the tile so that the map is drawn at the right place.

Next and next completes the loop and we have our map drawn.

So now we have our map engine, we can work out where the player is for collision, the map engine supports not only pixel by pixel movement but zelda style free movement around the screen !

Now for one last thing to make it complete. When ever putting sprites on the screen, such as the player or NPC's us the following code. I shouldn't really have to explain this as it is quite obvious:

xpos = playerX - cameraX
Ypos = playerY - cameraY
        

All it does is keep the player on the actual screen.

Geeze that was alot of writting ! Well I hope to see all of you kick ass map engines now, and no more crappy tile by tile junk, even if it scrolls !!!!!

Byeee !

---

This article was written by Maz (Greg McAusland)

---

© Copyright 1999-2000 The QB Times.
This tutorial was taken from The QB Times with permission from the webmaster(s) of the site. You may not take this article and place it on any other website.