Smooth Scrolling
By Peter Kuchnio

introduction

This is a tutorial that will show you how to scroll smoothly using tiles. Basically, so the smallest scroll distance isn't the tile width. I've noticed a lot of people have been asking about this so here is a tutorial! This tutorial uses some of the BiohazrdDD Grafx Core (available from the Source Code page BTW) to do some of the mundane tasks like initializing DirectDraw.

the code

Basically, smooth scrolling is akin to clipping, since you have to change the RECTs of the tiles so some are only partially shown. We're not going to be using DirectDraw clipper though, we're using a custom software clipper. There isn't a speed loss, in case you are wondering :) This tutorial does assume you already know how to do Tiling, since here only very simple (read crude) tiling techniques are used.

First, we set up an array of tiles (20 in total) to be displayed. Then, we have to detect the coordinates of the mouse. Here we use GetCursorPos:

'Update mouse coors
GetCursorPos Pnt
MouseX = Pnt.x
MouseY = Pnt.y

Then we respond if the mouse is within the set boundaries. In this case, if the pointer is within 10 pixels of the edge we scroll.

'Check wether the mouse has reached the bounds of the screen.
'If it has, scroll.
If MouseX >= 790 Then
    OffsetX = OffsetX + 5
End If
If MouseX <= 10 Then
    OffsetX = OffsetX - 5
End If
If MouseY <= 10 Then
    OffsetY = OffsetY - 5
End If
If MouseY >= 590 Then
    OffsetY = OffsetY + 5
End If

We use two variables here, OffsetX and OffsetY. These track how many pixels we are from coordinate 0,0 on the screen. When we draw the tiles, these values are subtracted from each tiles X and Y values.

'Draw all the tiles
For x = 1 To 20
     'This uses a custom subroutine
     Draw Tile, TileRECT, TilesX(x) - OffsetX, TilesY(x) - OffsetY, False, True
Next

To do the blitting, we use a seperate subroutine. This is where the clipping routines actually are.

Private Sub Draw(surface As DirectDrawSurface7, RECTvar As RECT, x As Integer, y As Integer, Optional transparent As Boolean = True, Optional Clip As Boolean = True)
    'This subroutine will BltFast a surface to the
    'backbuffer.
    
    'CLIPPING
    'Temporary rect
    Dim RectTEMP As RECT
    RectTEMP = RECTvar
    
    If Clip = True Then
        'Set up screen rect for clipping
        Dim ScreenRECT As RECT
        With ScreenRECT
            .Top = y
            .Left = x
            .Bottom = y + RECTvar.Bottom
            .Right = x + RECTvar.Right
        End With
        'Clip surface
        With ScreenRECT
            If .Bottom > 600 Then
                RectTEMP.Bottom = RectTEMP.Bottom - (.Bottom - 600)
                .Bottom = 590
            End If
            If .Left < 0 Then
                RectTEMP.Left = RectTEMP.Left - .Left
                .Left = 0
                x = 0
            End If
            If .Right > 800 Then
                RectTEMP.Right = RectTEMP.Right - (.Right - 800)
                .Right = 800
            End If
            If .Top < 0 Then
                RectTEMP.Top = RectTEMP.Top - .Top
                .Top = 0
                y = 0
            End If
        End With
    
    End If
    
    If transparent = False Then
        Call ddsBack.BltFast(x, y, surface, RectTEMP, DDBLTFAST_WAIT)
    Else
        Call ddsBack.BltFast(x, y, surface, RectTEMP, DDBLTFAST_WAIT Or DDBLTFAST_SRCCOLORKEY)
    End If
End Sub

This will perform the actual clipping. Basically, when each bitmap is drawn, the routine checks whether it is outside of the screen area and then messes with the rects of the image. This was made for an 800x600 resolution, so you would have to change the two numbers (800 and 600) for another resolution.

That's it for the Smooth Scrolling tutorial! You might want to Download the Source, to see the sample in action. If you have any problems with the sample ask a question on our Message Board!