Maps Tutorial
I N D E X:
Basic Tile Mapping (Maps & Levels)
One of the key elements of many 2D games are the scrolling worlds we guide our character through. While there are many different 2D genres from scrolling shoot-em ups, plat formers through to puzzle games. They virtually all share the same approach for how those worlds are created. Tile Maps
To build these large worlds, the graphic artists have various options. They could try and draw then entire worlds backdrop (the scenery) as one big picture. In theory, this would give artists total freedom to create the most interesting worlds possible. But sadly this approach is impractical. Both from an artistic stand point and the computers. As not only would it take hundreds if not thousands of hours to draw such a backdrop, but the amount of graphics memory required would be astronomical. It's certainly possible for smaller game backdrops, of say a few screens in size, but beyond that, you need to start looking for a better approach.
The solution is Tile Mapping. In contrast to the above, tile mapping relies upon the artist drawing small sets of reusable graphic blocks, called tiles or blocks. Each tiles has unique tile number, by which it's referred to.
To construct a backdrop, the artist stores the tiles onto the level, not by graphics though, but by the tile number. So the level is not an image, it's really just a grid numbers, where each number represents what tile should be drawn at that position, throughout the level.
eg. Example of row of tile indexes. Each number represent a block of graphics to be drawn.
00,00,01,01,01,02,02,02,02,04,05
|
So when the level is drawn, the game looks through the tile numbers stored in the level data, and then draws the appropriate graphic block at each position.
This approach will allow an artist to create vast areas, from a small collection of commonly used graphic tiles.
Top
Maps in PlayBASIC
As you would expect, PlayBASIC comes with it's own integrated command sets for dealing with the creation, management, interaction (Collision / Occlusion) and displaying of tile maps. Which all comes under on the loose heading of MAPS.
Maps are really the housing for the three main components needed for mapping, which are the Tile/Block Graphics, Tile Animations and the Levels.
Tile/Block Graphics 'GFX'
* Each map can have it's own set tile graphics imported into it. The graphic blocks can be of any size you like. However, the size can't vary between tiles, so all tiles will be the same size.
All of the Levels stored in this Map, will be drawn using the block Graphics we give it.
Here's how we we can visualize a set of 6 blocks (0 to 5).
Levels
* Each MAP can have an unlimited number of Levels stored within. Each level has it's own drawing settings and be of any size you like, such as Solid (No see through pixels), Transparent and Animated mode.
You can visualize a level is a 2D array of tile/block indexes. So the level doesn't actually store the graphic block in each cell, rather each cell is a numeric index to what block we wish to render at that location within the map. When a level is drawn, PlayBASIC uses the maps block graphics and animation data (if any), to draw this level.
Here's a graphical representation of what a level might look like. Bellow we see a level that's 10x by 5y tiles wide and high. So it's eleven tiles across and six rows down. Which occurs because Level sizes in PlayBASIC use inclusive ranges. Meaning that setting a level to a width of ten cells, means that you can access cells from zero through to and including ten. Giving us a total eleven possible cells..
If look closely at the cells in the level and compare to the block example above, you should be able to see the this level defines a level with a brick floor and pyramid in the middle.
Can't imagine it, well here's a visualization of the level, showing the indexes and the graphic block that would be drawn at every position.
And finally here's what our level will look like, if drawn using DrawMap
Tile Animations
* Each map can have it's own set of animations. There is no limit upon number of tile animation you can create, apart from the memory.
A tile animation is nothing more than list of tiles. When a Level is drawn, that has animated tile within, PlayBASIC will calculate and draw the next animated tile, from the required Tile Animation list for us. So animations an be build right into the level. You just set it and forget it !
Top
How do I create a Map and draw it ?
In this example were going to step through the manual creation of a Map, including it's tile graphics, a level, all the way through to displaying it.
First we'll create a new Map and store it's map index value in our MyMAP variable. The map will have provision for 1 level. We can expand this later on if need be, but for now, we're only going to be dealing with one level.
Next, we'll manually build a series of randomly coloured blocks in a row on the screen. Then we'll grab these blocks as an image (via getimage), then import the image into our newly created Map above.
TileWidth=32
TileHeight=32
Number_of_tiles = 5
; Loop through and draw a series of randomly coloured
; Boxes to the screen
For lp=1 To Number_of_tiles
xpos=lp*tileWidth
BoxC Xpos,0,Xpos+TileWidth,TileHeight,1,RndRGB()
Next
; Grab the graphics that we've just drawn as an image.
TempImage=GetFreeImage()
GetImage TempImage,0,0,xpos+TIleWidth,Tileheight
|
So far, we've created our Map, and an image containing some coloured boxes that will become our maps graphics. Now it's time to import this temporary image into our Map as the Tile Graphics.
When we have tile graphics stored within an image. We import the tiles using the MakeMapGFX command.
This command requires the Map you wish to import these tiles to, the Image to import, the Tile Width, the Tile Height, number of tiles to import and finally the transparent colour (if any) to use for these tiles.
; Import this image into our previously defined Map.
MakeMapGFX MyMAP,TempImage,TileWidth,TileHeight,Number_Of_Tiles,RGB(0,0,0)
; A copy of the Blocks are now stored within the Map, so the
; TempImage is no longer required. So lets delete it.
DeleteImage TempImage
|
Now we have a Map that has a set of blocks ready for use in it, the next thing we need to do is create a level array.
This is done with either the NewLevel or CreateLevel commands. In this example, we'll use the NewLevel approach. NewLevel requires three parameters. It needs to know what MAP we wish to attach this level to, and the levels width and height.
; Create level in MyMAP, 100 tiles across and 200 tiles down.
MyLevel= NewLevel(MyMap,100,200)
|
We're just about ready now to start drawing, but first we need to fill the level with what graphic tiles it should draw at each position. In this example, the following code will randomly fill the level. Normally, we'd use a level editing program like PLAY MAPPER for such things. But you're welcome to do it manually if you like.
; Now we fill this level will random block indexes.
For Ylp=0 To GetLevelHeight(mymap,MyLevel)-1
For Xlp=0 To GetLevelWidth(MyMap,MyLevel)-1
PokeLevelTile MyMap,MyLevel,Xlp,ylp,Rnd(number_of_tiles-1)
Next xlp
Next ylp
|
All that's left to do now is draw it...
; Draw the Level from Mymap to the screen
; at Xpos 0 and Ypos 50 (expressed in screen co-ordinates not tile ones)
DrawMap MyMap,MyLevel,0,50
; Show the user the screen and wait for a key to be pressed
Sync
WaitKey
|
Well, hopefully that's given you a better understanding of how Maps & Levels work..
Top
|
Example Source: Download This Example
; Ask PlayBASIC to create a New Map with provision for at least #1 level.
; The Map index is return and stored in the variable MyMap.
MyMap = NewMap(1)
; Next, we'll draw some coloured blocks to the screen. We'll
; then grab them as an image and use it GFX blocks in our test map.
TileWidth=64
TileHeight=64
Number_of_tiles = 5
; Loop through and draw a series of randomly coloured
; Boxes to the screen
For lp=1 To Number_of_tiles
xpos=lp*tileWidth
BoxC Xpos,0,Xpos+TileWidth,TileHeight,1,RndRGB()
Text Xpos,0,"Block:"+Str$(lp)
Next
; Grab the box graphics that we've just drawn as image.
TempImage=GetFreeImage()
GetImage TempImage,0,0,xpos+TIleWidth,Tileheight
; Import this image into our previously defined Map.
MakeMapGFX MyMAP,TempImage,TileWidth,TileHeight,Number_Of_Tiles,RGB(0,0,0)
; The Blocks are now stored within the Map, so the
; TempImage is no longer required. So lets delete it.
DeleteImage TempImage
; Create level in MyMAP, 100 tiles across and 200 tiles down.
MyLevel= NewLevel(MyMap,100,200)
; Now we fill this level will random block indexes.
For Ylp=0 To GetLevelHeight(mymap,MyLevel)-1
For Xlp=0 To GetLevelWidth(MyMap,MyLevel)-1
PokeLevelTile MyMap,MyLevel,Xlp,ylp,Rnd(Number_of_tiles-1)
Next xlp
Next ylp
; Draw the Level to the screen at Xpos 0 and Ypos 100
DrawMap MyMap,MyLevel,0,100
; Show the user the screen and wait for a key to be pressed
Sync
WaitKey
|
|
