# VBfx / Tile tutorial / Step 8

## Drawing the map

This is the last and probably hardest part of this tutorial where I'll teach you how to achieve a drawing function. We'll need BitBlt for this so if you don't yet know about BitBlt I recommend you reading through this article first:

• BitBlt Copy pictures using BitBlt

## Draw function

What we'll do now is going line by line through the map and draw what's within the screen. So the idea is as follows:

• Calculate the map index from the current camera position
• Draw each tile of this line until we reach the screen border
• Get the map index of the first tile from the next line
• Repeat the last two steps until the screen completely filled

This time I'll show you the code first and discuss it line by line afterwards:

```Public Sub Draw()
Dim X as Long
Dim Y as Long

Dim Index as Long
Dim TileIndex as Long

With Map
'Calculate map index from the camera positon
Index = ( Camera.Y * .w ) + Camera.X

'Draw the map
For Y = 0 To Camera.TilesY - 1
For X = 0 To Camera.TilesX - 1
'Get tile index
TileIndex = .Data( Index )

'Draw tile
BitBlt Camera.FrontDC, _
X * TileSize, Y * TileSize, _
TileSize, TileSize, _
Tile( TileIndex ).DC, _
0, 0, _
vbSrcCopy

'Next tile
Index = Index + 1
Next

'Get next line start
Index = Index + .w - Camera.TilesX
Next
End With
End Sub
```

## Step by step

I'll now go through each line of the code step by step and explain what it does.

```Public Sub Draw()
Dim X as Long
Dim Y as Long

Dim Index as Long
Dim TileIndex as Long
```

Well this are the declarations we'll need.

• X and Y will iterate from 0 to Camera.TilesX, .TilesY respectively.
• Index is the current map index and will be increased in both loops.
• TileIndex is a temporary variable to store the tile index at the current map position.
```        'Calculate map index from the camera positon
Index = ( Camera.Y * .w ) + Camera.X
```

Here we calculate the map index position, this is again done by (Y * Width) + X. In other words this is the offset in the map array where the camera currently points at.

```        'Draw the map
For Y = 0 To Camera.TilesY - 1
For X = 0 To Camera.TilesX - 1
```

These are the 2 loops mentioned above. The Y-loop is outside because we go through the map line by line, otherwise it would be row by row. Since the loops go from 0 we have to subract 1 from the width and height.

```                'Get tile index
TileIndex = .Data( Index )
```

Here we get the tile index from the map at the current indexed position. This is only useful if you want to access the current tile more than once so for this tutorial it's just to keep code more clearly.

```                'Draw tile
BitBlt Camera.FrontDC, _
X * TileSize, Y * TileSize, _
TileSize, TileSize, _
Tile( TileIndex ).DC, _
0, 0, _
vbSrcCopy
```

Well as the code says, this piece draws the tile at the current position on the screen.

• First parameter is the target DC we get from the camera.
• Our loops are in tiles so we need to multiplicate X and Y by the TileSize to get the position in pixels.
• Since the tiles are square-sized the parameters for width and heigth are the same.
• The DC is taken from the current tile, I'll explain later how the tiles are loaded.
• SourceX and Y is also 0 since we only have 1 tile on each DC and no animation.
• The last parameter should be clear.
```                'Next tile
Index = Index + 1
Next
```

Simple gets the next map index on each iteration. This works as long as we're stepping through the current line.

```            'Get next line start
Index = Index + .w - Camera.TilesX
Next
```

When stepping to the next line we have to add the whole map width to get the same position on the next line. Then subtract the line size to go back to the start of this line.

```    End With
End Sub
```

We're done.

## Conclusion

All of our objects and functions now work as they should. You can move around the camera and the draw function will take it's position as offset for drawing the tiles. Note that the camera position is in tiles, so when trying to set a pixel-based position you'd have to divide it by the tile size. Hopefully you learned something when reading this tutorial. If not go back and read it again.