Real Software Forums

The forum for Real Studio and other Real Software products.
[ REAL Software Website | Board Index ]
It is currently Tue Nov 21, 2017 10:51 pm
xojo

All times are UTC - 5 hours




Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 4:08 am 
Offline
User avatar

Joined: Wed Oct 05, 2005 1:21 pm
Posts: 515
Location: United Kingdom
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,

_________________
Gorgeous REALbasic controls from Figa Software | My Flickr | My Blog
11" MacBook Air 1.8Ghz i7, 4GB RAM, OSX 10.8.2, RB 2012 r1.1 Pro | iPhone 4S 32GB | Nikon D60


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 8:59 am 
Offline
User avatar

Joined: Sun Aug 05, 2007 10:46 am
Posts: 4931
Location: San Diego, CA
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"....

_________________
Dave Sisemore
iMac I7[2012], OSX Mountain Lion 10.8.3 RB2012r2.1
Note : I am not interested in any solutions that involve custom Plug-ins of any kind


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 8:59 am 
Offline
User avatar

Joined: Sun Aug 05, 2007 10:46 am
Posts: 4931
Location: San Diego, CA
double post

_________________
Dave Sisemore
iMac I7[2012], OSX Mountain Lion 10.8.3 RB2012r2.1
Note : I am not interested in any solutions that involve custom Plug-ins of any kind


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 10:22 am 
Offline
User avatar

Joined: Wed Nov 15, 2006 3:50 pm
Posts: 2353
Location: England
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


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 10:27 am 
Offline
User avatar

Joined: Sun Aug 05, 2007 10:46 am
Posts: 4931
Location: San Diego, CA
yeah I was assuming the scroll was in whole tile increments

_________________
Dave Sisemore
iMac I7[2012], OSX Mountain Lion 10.8.3 RB2012r2.1
Note : I am not interested in any solutions that involve custom Plug-ins of any kind


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 11:49 am 
Offline

Joined: Fri Jan 06, 2006 3:21 pm
Posts: 12388
Location: Portland, OR USA
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 6:55 pm 
Offline
User avatar

Joined: Wed Oct 05, 2005 1:21 pm
Posts: 515
Location: United Kingdom
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,

_________________
Gorgeous REALbasic controls from Figa Software | My Flickr | My Blog
11" MacBook Air 1.8Ghz i7, 4GB RAM, OSX 10.8.2, RB 2012 r1.1 Pro | iPhone 4S 32GB | Nikon D60


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Mon Jan 25, 2010 10:40 pm 
Offline

Joined: Fri Sep 30, 2005 9:12 am
Posts: 725
Location: Rockford, IL
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.

_________________
RB2010r2.1 Pro on Windows 7


Top
 Profile  
Reply with quote  
 Post subject: Re: Scrolling Tile Map
PostPosted: Tue Jan 26, 2010 5:15 pm 
Offline
User avatar

Joined: Wed Oct 05, 2005 1:21 pm
Posts: 515
Location: United Kingdom
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,

_________________
Gorgeous REALbasic controls from Figa Software | My Flickr | My Blog
11" MacBook Air 1.8Ghz i7, 4GB RAM, OSX 10.8.2, RB 2012 r1.1 Pro | iPhone 4S 32GB | Nikon D60


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC - 5 hours


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group