Scrolling Tile Map

MadDoc · **Posted:** Mon Jan 25, 2010 4:08 am

I'm sure this is in everybody's 'Game 101' but I'm struggling to make a simple scrolling tile map.

I have a map of 200x200 tiles. Each tile is a 50x50 pixel square. The tiles are stored in an array - Tiles(column, row), where each element of the array is a special class, imaginatively called TileClass that has a single property - Image as picture. The window the map is being displayed in is 500x500 pixels.

I have figured out how to scroll this map with the arrow keys if I draw the ENTIRE map to an offscreen buffer picture and simply scroll that around a viewing canvas.

The problem with this is that it is so slow (probably because the memory footprint is big with 40,000 tiles!).

I know that the best way to do this would be to draw only the tiles that can be seen (in my case, 10x10 tiles on screen at once). I am struggling to figure this out - particularly as I would like to be able to see the edges of the tiles that are just off the viewing canvas (so you can see what tiles are 'coming up' if you continue to scroll).

Does this make sense? Does anyone have any sample code they would be willing to share?

Thanks,

DaveS · **Posted:** Mon Jan 25, 2010 8:59 am

should be as simple as something like this in your paint event

for x=0 to 9
  xpos=(x*tile_size_x)
  for y=0 to 9
    ypos=(y*tile_size_y)
    draw_your_tile x+offset_x,y_offset_y,xpos,ypos
  next y
next x

where tile_size_x and tile_size_y are constants indicating the number of pixels wide/tall your tiles are
offset_x and offset_y being the coordinate of the top/left visible tile [this is what changes with your scrolling keys]

draw_your_tile is a method that... well uh... draws your tile ... first two coordinates are WHAT tile from the map, last two are WHERE on the screen to draw it

Depending on what makes up the tiles you might be able to pre-draw them in a picture buffer..... for example if you have "grass" and "walls"....

DaveS · **Posted:** Mon Jan 25, 2010 8:59 am

double post

jefftullin · **Posted:** Mon Jan 25, 2010 10:22 am

Extending Dave's suggestion a little, you probably need to consider 11 x 11 tiles, as you want to see 'what is coming up'.
That implies seeing part of a tile at the edges.

So your scrolling will probably give you smaller than integer values.
Thinking just the x values, let's assume you scroll to position 14.3

You need to show 0.7 of block 14, then 9 full blocks, then 0.3 of the last block.

Offscreen, you use code like Dave's to draw the 11 x 11 grid using only tiles that are visible, offset by the scroll

So, draw tile 14 at position 0 * 50, tile 15 at position 1 *50 etc.
Finally, draw the offscreen picture to your visible canvas, using the fractional scrollbar value as the offset.

eg, the x co-ordinate for 14.3 would mean drawing 'offscreen' to 'visible canvas' at at starting point of minus( 0.3*50)
like this (where V is visible canvas, and O is the offscreen picture)
OOOOOOO
OVVVVVV
OVVVVVV
OVVVVVV

DaveS · **Posted:** Mon Jan 25, 2010 10:27 am

yeah I was assuming the scroll was in whole tile increments

timhare · **Posted:** Mon Jan 25, 2010 11:49 am

You also need to determine the tile to start with as well. Calculate which tile is at the origin of the visible area.

start_tile_x = floor(scroll_x / tile_width)
start_tile_y = floor(scroll_y / tile_height)

Then draw enough tiles to fill the screen using the code the others posted.

MadDoc · **Posted:** Mon Jan 25, 2010 6:55 pm

Thank you very much to everyone who has chipped in. These code snippets have been very helpful.

I'm still not quite there (irritatingly close though!). I have uploaded a sample application to show what is going wrong. It generates a random 20x20 map of blue and green tiles and scrolling is permitted with the arrow keys (keycodes 123 - 126). As you can see - something isn't quite right...

I have also attached the source code. It's very small and well documented. Can someone take a look at why I'm making such a mountain out of a molehill!

Mac app
Win app
Source code

Thanks in advance,

MadDoc,

piMaster · **Posted:** Mon Jan 25, 2010 10:40 pm

Here is my take. Hope this helps.
http://pimaster3.freeforums.org/map-scroller-t12.html

Edit: I didn't include the two image files, just the RB project file. You'll have to get the images from MadDoc's source code.

MadDoc · **Posted:** Tue Jan 26, 2010 5:15 pm

Thank you so much piMaster! The code demonstration really helped!

I have made several modifications and improvements. The MegaMap engine now scrolls via the keyboard, scroll wheel or by moving near the edge. I've also implemented a TileClicked() event.

I plan on expanding on this further (for the game I'm working on) but I thought I would share the source code at this point - as it seems only fair.

Source code
Mac demo
Win demo
Linux demo

All input is welcome.

MadDoc,

	Real Software Forums The forum for Real Studio and other Real Software products.
[ REAL Software Website \| Board Index ]

Real Software Forums

Scrolling Tile Map