The first thing you should probably make is a map file. I don't recommend trying to put the map data in the source, as it limits severely the size of map that you can have, and that's not good. This file should look something like the following.
Key:
00-grass
01-wall
02-water
Actual Map File:
02,02,02,02,02,02,02,02,02...
01,01,01,01,01,01,01,00,00...
00,00,00,00,00,01,01,01,01...
etc...
I cheated a bit on that, because your actual map file would be much larger than that, but you get the picture. Now that you have this map file(presumably), you need to load it into an array so that you can use it(it is possible not to do this, but that gets too complicated to try right off, so I won't get into it). To do this, you simply open the file and read the data into an array. Ex:
open "mapfile.dat" for input as #1
for y = 0 to some number(the height of your map)
for x = 0 to some number(the width of your map)
input #1, tiletype(y, x)
next
next
Note that, yes, you do have to do it as y, x. It's because an array is arranged down and then over. I won't go into any more detail than that, because for this you just need to understand that it has to be y, x. Now you have a map to work with. Some variations of this is to have multiple layers, but that's another advanced topic that we can worry about later.
Now, drawing tiles is one of the easiest things to do. All you have to do is use a couple of for...next loops such as this. I'm assuming you have already gotten your tiles into an array(I will use a multi-dimensional array, but you wouldn't necessarily have to).
for y = 0 to 160 step 16
for x = 0 to 160 step 16
typeoftile = tiletype(y/16, x/16)
put (x, y), tileimage(0, typeoftile), pset
next
next
Line by Line Translation: Line one: loop that will draw rows of tiles, and assumes 16x16 tiles(hence step 16). Line two: Loop that will draw columns of tiles and also assumes 16x16 tiles. Line three: This statement gets what type of tile is at the location that is currently being processed(drawn to the screen). It has to be y/16, x/16 because the for loops use step 16, and the array holding the map data isn't likely to leave gaps of 16 0's in between numbers(it would be a horrendous waste of memory). Line four: This actually puts the image of the tile(which it is assumed you have already gotten into an array, in this case named tileimage). That should be pretty easy to figure out, if you know anything about arrays and putting(hopefully you do). Lines five and six: If I need to explain these, then you shouldn't be trying to write a scrolling engine.
The easiest way that I have found to move the tiles is to get the entire map, minus the row or column of tiles at the edge of it in the direction it is moving, and then move them all over the width or height of one tile. This is done in the opposite direction of the apparent movement of the character. I'll be assuming for the rest of this tutorial that there is a character involved. To demonstrate, I have created a small chart below showing which tiles would be gotten, which way they would be moved, and which direction the character would be moving.
G=tiles to get
N=tiles not to get
arrows indicate the direction of the movement of the character and tiles
NGGGGGGGGGGGG
NGGGGGGGGGGGG
NGGGGGGGGGGGG
NGGGGGGGGGGGG ------------» Direction of character movement
NGGGGGGGGGGGG «------------ Direction of tile movement
NGGGGGGGGGGGG
NGGGGGGGGGGGG
NGGGGGGGGGGGG
'Here's some code that you would use to to what is shown above.
'I'm just doing for movement in the direction shown.
dim shared scroll(33000)
if inkey$ = chr$(0) + "M" then 'move right, and no, this is not the best way to do it.
xloc = xloc + 1 'Move the map one right.
get (16, 0)-step(144, 160), scroll
put (0, 0), scroll, pset 'Move tiles in the opposite direction of the character movement.
for y = yloc to yloc + ony 'Draw new column of tiles.
typeoftile=tiletype(y, xloc + onx)
put ((y-yloc) * 16, 160), tileimage(0, typeoftile), pset
next
endif
Yloc is the location of the top row of tiles on the map: Here's another diagram to explain what I mean:
0000000000000000000
0000000000000000000
1111111111111111111
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
...
If we assume that the 111 line is the top row of tiles shown on the screen and the 111's would be the third line of the map file, then yloc would = 3. Back to the code above, ony is the number of tiles on the screen per column. In this case I am assuming that ony = 10, so 10 tiles per column. xloc and onx are the same, except they are for the x axis(rows).
Now, as far as what actually happened here, the tiles to be gotten(G) would be moved over one to cover up the N tiles, and then the row that was immediately off the right side of the screen before the movement was done would be drawn in the space that would remain on the right side of the map. Here's another diagram to show what I mean:
This time, the G's are tiles that were moved, and N's are the tiles that were previously just off the right edge of the map(and were not shown). These tiles are now shown because the character moved. Hopefully you're with me so far. The arrows still indicate movement directions.
GGGGGGGGGGGGN
GGGGGGGGGGGGN
GGGGGGGGGGGGN
GGGGGGGGGGGGN ------------» Direction of character movement
GGGGGGGGGGGGN «------------ Direction of tile movement
GGGGGGGGGGGGN
GGGGGGGGGGGGN
GGGGGGGGGGGGN
I only showed you the code for one direction, but if you switch some +/- signs and flip some x/y variables, it should work for all directions. That pretty much concludes this Tutorial. Feel free to contact me if you need any more help.