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.

Navigation

• Previous step The camera
• Next step Conclusion

• Back Overview