Introduction:

Tiles are basically small images that you have created and stored in a graphics file, and can use them to create all manor of graphic situations. These take up less space, as you're not using a full sized bitmap for every background in your game.

Tilemaps are an essential part of any game, be it a background for the game, the ground the player walks on, a scrolling background/playfield, the bricks for your breakout game, etc. The uses are endless.

Preparation:

Firstly you will need to create your tile set in a paint package. It's always a good idea to leave the first tile blank; this makes it easier for deleting tiles and displaying the map without a pictured background.

I would then save them to a sub folder for your game called gfx, just so it makes it easier to have all of your graphics for that particular game in one place/folder.

I have created one for you for this tutorial.

I tend to use tiles of 32x32 but it's up to you what sizes you prefer to design.

So say you want to design 10 tiles, which are 32 pixels across & 32 pixels down.
Then the dimensions for the bitmap you are designing would be: 320 x 32
This will just give you 10 tiles going across the screen.

Next you will need to breakdown the graphics file into the appropriate sizes. Going by the above example:

You know you've got 10 tiles (frames) in your tileset, and that they are 32 by 32.To load them, and use them in our editor.

Our first bit of code would be:

The above code sets the screen resolution to 640 by 480.

Then using a global variable to tell blitz to load the tileset each time it's called, and lastly makes all the drawing to the screen invisible until we tell it to Flip the screen to the front.

Showing the map:

We now need to work out how many tiles can fit across and down the screen, with the sizes of the tiles and the resolution of the screen.

So that would be:
640 divided by 32 which equals 20. This is the amount across (x)
And:
480 divided by 32 that equal 15. And this is the amount down the screen (y)

So now we can create a function to draw the entire map, with the correct sizes. This also tells us where to stop the cursor from going out of bounds off the screen, so we don't get errors such as, illegal memory errors and crashes.

So adding to the code. We can define our map size using a DIM variable to store the data. So underneath the GLOBALS we can add:

This tells blitz that the map size is 20 tiles across (x) and 15 tiles down (y)

The routine (function) to display the map would be. Not forgetting that the map to start with will be blank, until later on we start adding tiles to it.

In the global section at the top of the code we need to add some more variables. So type in the following variables:

These variables will be used to draw the tiles apart from each other, in the correct positions.

What this does is by using FOR Y=0 to 15 and FOR X=0 to 20, this will only draw the tiles we need down the screen and will only draw the correct amount across the screen.

By using IF MAP(X,Y)<=10 AND MAP(X,Y)>0. This tells the routine to only draw if the tile is it's between 0 and 10. And is to make sure it doesn't display anything else.

We are next telling blitz that we should draw the tiles at the right postions,in increments of 32, by using this simple bit of maths. GX=X*32 and GY=Y*32, (e.g. if x equals 3 and y equals 2, then we would draw at position 96,64, and not at position 3,2).

The final bit of code draws the tiles on the screen at the corresponding locations, and the correct image: DRAWIMAGE GRAPHICSFILE,GX,GY,MAP(X,Y).

Then it goes through displaying all of the tiles, before ending the routine.

Speeding things up!!!

I'm now going to speed things up a little by giving you the entire functions and routines, the globals to add, and a description of what's happening. As im sure you'll be wanting to code the editor and start creating maps.

Underneath the command SETBUFFER BACKBUFFER(), if you were to add the following lines of code. This is for our program loop which tells Blitz to use our routines/functions, and if we were to press Escape then the program will end.

Keys we are using:

Keycodes	Key name	Action
57	Space Bar	Add & Delete Tile
13	+	Go to next tile
12	-	Go to previous tile
200,203,205,208	cursor keys	move cursor around the map
60	F2	Save The Map
59	F1	Load A Map
1	escape key	quit program\editor

Globals to add:

These are for flashing the cursor box:

Controlling the cursor and editing the map:

Now if you type in the following function below the updatemap function. I'll then tell you what it does.

1. It checks to see if you have pressed F2 to SAVE the map, or F1 to LOAD a map, and asks you to enter a filename (the filename for loading must exist otherwise the program will crash). In this code I have made it so that it looks for and saves the file to a sub folder called MAP, and gives it an extension of .MAP. This you can alter to what ever suits you.
2. It then sees if you have pressed one of the cursor keys, and updates the variables accordingly. The reason for the limits being 0 - 14, and 0 - 19 is that the first position will be 0 and not 1.

   But if you try and move the cursor out of range/off screen then it wont allow you to, and makes the cursor stay at the screen limit until you move elsewhere. (if you were to change the KEYHIT to KEYDOWN then the cursor would zoom around the map)

3. Now it checks to weather or not you've pressed the spacebar or delete. If you have then it will place the tile that the cursor has to that position "map(x,y), and it will be stored, unless you pressed delete then the tile will become tile 0, blank. And this is the reason for having your first tile with nothing drawn on it.
4. Finally it checks if you've pressed either +/-. If you have then it will cycle through the tileset, and wont go over to a none existing one. The computer treats the first tile as zero and the last tile 10 as nine.
5. The update function is used to display our flashing cursor at the appropriate position, with the tile you have selected.

   Loading a map:

   Function loadmap(filename$) f=OpenFile(filename$) For y=0 To 15 For x=0 To 20 i=ReadInt(f) map(x,y)=i Next ;x Next ;y CloseFile f End Function

   
   

   This piece of code opens up the filename with the name you entered so that Blitz can read the file. It then uses the same workings out for the update_map routine (20x15), to read the information (bytes) from the file and puts it into the map array and stores it. Then closes the file, so it can be read later on.

   Saving a map:

   Function savemap(filename$) f=WriteFile(filename$) For y=0 To 15 For x=0 To 20 WriteInt f,map(x,y) Next ;x Next ;y CloseFile f End Function

   
   

   This is more or less the same as the load function above except that it saves the information

   Showing a cursor and making it flash:

   Function update_display() DrawImage graphicsfile,cursorx*32,cursory*32,currenttile flash() Rect cursorx*32,cursory*32,34,34,0 End Function

   
   

   All this does is to draw the tile you have selected with cursor x and y positions multiplied by the sizes of the tiles, the same as drawing the map (gx and gy). Then it calls a flashing color routine (which you don't have to include), which will flash the cursor. The last command draws a box slightly bigger than the size of the tiles, to go around the tile, so that you can see it more easily.

   Function flash() rcol=Rnd(127) rcol2=Rnd(127) rpik=Rnd(5) If rpik=0 Then Color rcol+128,0,0 If rpik=1 Then Color 0,rcol+128,0 If rpik=2 Then Color 0,0,rcol+128 If rpik=3 Then Color rcol+128,rcol+128,0 If rpik=4 Then Color rcol+128,0,rcol+128 If rpik=5 Then Color 0,rcol+128,rcol+128 End Function

   
   

   All this does is choose and change the colours for the cursor.

   How to use in other programs:

   To use the maps that you have designed. Use the following.

   Dim map(20,15) ; loadmap("map\filename.map") While Not KeyHit(1) Cls update_map() Flip Wend End Function loadmap(arr$) filein=OpenFile(arr$) For y=0 To 15 For x=0 To 20 i=ReadInt(filein) map(x,y)=i Next ;x Next ;y CloseFile filein End Function Function update_map() For y=0 To 15 For x=0 To 20 If map(x,y)<=10 And map(x,y)>0 gx=x*32 gy=y*32 DrawImage graphicsfile,gx,gy,map(x,y) End If Next ;x Next ;y End Function

   
   

   Last words:

   I hope that this sheds some light onto the subject, and that you have fun creating with it. It was fun to write, and hope it comes in useful, and will help you code your own.

   • To get the source/demo for this tutorial: Click Here.

   That's it from me, happy creating!!!

   And thank you.

   -Clyde Radcliffe

   ---

   For a printable copy of this article, please click HERE.

   ---

   This site is Copyright© 2000-2004, BlitzCoder. All rights reserved.