This tutorial will teach you scrolling, a simple technique in games.

Setting it up
Perhaps I don't need an intro for this tutorial (but I have one for every tutorial anyways). Scrolling is a very simple, but somewhat tricky, concept in games. In this tutorial we're going to build off of our old tutorials (Reading And Writing From Text Files to load the map, and Animation with GDI+ to load the character). Sorry, I don't have enough space to upload the source, but it's easier to just paste this code in.


Create a new project called Scrolling. Create a class called clsMap and paste this code in. (I used regions so that this code wouldn't take up a lot of space on this page).

Click the following region to continue 

#Region " clsMap "   ...

Imports System.IO
Public Class clsMap
    Dim SR As StreamReader

    Public NumColumns As Integer
    Public NumRows As Integer
    Public Tiles(,) As Bitmap

    Dim NumOfTiles As Integer

    Public Sub ReadMap(ByVal MapFile As String)
        SR = New StreamReader(MapFile)

        Dim ln As String
        ln = SR.ReadLine() 'The first line: "22,16"

        Dim str() As String
        str = ln.Split(",")

        NumColumns = str(0) - 1
        NumRows = str(1) - 1

        ReDim Tiles(NumColumns, NumRows)


        '---------------------------

        Dim CurrentRow As Integer
        Dim CurrentColumn As Integer

        Dim Line() As String 'Will store current line, broken apart by "," and 


        For CurrentRow = 0 To NumRows
            'Read each Line (Go down the file)

            ln = SR.ReadLine()
            Line = ln.Split(",")

            For CurrentColumn = 0 To NumColumns
                'Read each character (Go across the file)
                Tiles(CurrentColumn, CurrentRow) = new Bitmap("tiles\" & Line(CurrentColumn) & ".jpg")
            Next
        Next

        SR.Close()
    End Sub


End Class
#EndRegion

Well now we need to render our map. Increase the size of your form to 640x480 so you can see more of the map. Paste
in the following code. In your globals, Dim map as clsMap and Dim PushedOtherKey as Boolean

    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        Dim x, y As Integer

'See Reading And Writing Text Files for help on this loop


        For x = 0 To map.NumColumns
            For y = 0 To map.NumRows
                e.Graphics.DrawImage(map.Tiles(x, y), x * 30, y * 30)
            Next
        Next
    End Sub

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        map = New clsMap()
        map.ReadMap("test.txt")

        'No Flicker
        SetStyle(ControlStyles.AllPaintingInWmPaint, True)
        SetStyle(ControlStyles.DoubleBuffer, True)
    End Sub

Be sure that you have the text file from the Reading and Writing text files tutorial, as well as the jpegs (stored in the bin/tiles directory).
Run your app, it works fine, great - nothing new if you did the other tutorial - I just put stuff in classes that's all.

Now we're going to throw in a character that can move/animate. (Unfortunately, I couldn't put this in a region, the Squishyware Syntax Highlighter
is limted to only 1 region per page.. else it gets buggy.  Create a new class called clsSprite

Note: please ignore the random double spacing, it might be easier to paste this code into notepad or vs.net rather than reading it from here

Public Class clsSprite

    Dim CharFolder As String


    Public Direction As String
    Public Frame As Integer
    Public Image As Bitmap
    Public Position As Point
    Public CanWalk As Boolean = True 'Allow him to walk in the beginning
    Public Walking As Boolean


    Public Sub New(ByVal CharacterFolder As String)
        CharFolder = CharacterFolder
        Image = New Bitmap(CharFolder & "/" & "right1.gif") 'Set his default image
    End Sub

    Public Sub MoveUp()
        Direction = "up"
        Frame += 1
        If Frame = 4 Then Frame = 1 'There's no "Alex/up4.gif"
        Image = New Bitmap(CharFolder & "/" & Direction & Frame & ".gif")  '"alex/up1.gif"
        Position.Y -= 1 'Move him up 1 pixel
    End Sub

    Public Sub MoveDown()
        Direction = "down"
        Frame += 1
        If Frame = 4 Then Frame = 1
        Image = New Bitmap(CharFolder & "/" & Direction & Frame & ".gif")
        Position.Y += 1
    End Sub

    Public Sub MoveLeft()
        Direction = "left"
        Frame += 1
        If Frame = 4 Then Frame = 1
        Image = New Bitmap(CharFolder & "/" & Direction & Frame & ".gif")
        Position.X -= 1
    End Sub

    Public Sub MoveRight()
        Direction = "right"
        Frame += 1
        If Frame = 4 Then Frame = 1
        Image = New Bitmap(CharFolder & "/" & Direction & Frame & ".gif")
        Position.X += 1
    End Sub

    Public ReadOnly Property TilePos() As Point
        Get
            Return New Point(Position.X / 30, Position.Y / 30)
        End Get
    End Property


End Class

Listed above was the code to paste into that class. In your form globals:
Dim alex as clsSprite.

Now add in this code at the end of the paint event (Syntax highlighting each tiny snippet of code would take up too much space, so for any
small snippet, I'm gonna just make it black.
alex.Image.MakeTransparent(Color.Lime)
e.Graphics.DrawImage(alex.Image, alex.Position)

Now add this to form1_load:
alex = New clsSprite("alex") 'His images are stored in the alex folder

 Now add a form1_keydown sub.

(I have no idea why Dreamweaver is double-spacing this!! I tried to delete the double spaces)

                Private Sub Form1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown
       
       
       
       
        If alex.CanWalk Then
            alex.CanWalk = False 'He's gonna walk now, so DON'T let him walk!

           

           

            Select Case e.KeyCode
               
               
               
               
                Case Keys.Left
                    alex.Direction = "left"
               
               
               
               
                Case Keys.Right
                    alex.Direction = "right"
               
               
               
               
                Case Keys.Down
                    alex.Direction = "down"
               
               
               
               
                Case Keys.Up
                    alex.Direction = "up"
               
               
               
               
                Case Else
                    PushedOtherKey = True
           
           
           
            End Select
           
           
           
           
            'Now we've figured out his direction, its time to move him in that direction


       



       



        Dim x As Integer
       
       
       
       
        If Not PushedOtherKey Then
               
               
               
               
                For x = 1 To 30
                    alex.Walking = True
                   
                    Application.DoEvents()

                   

                   

                    If alex.Direction = "left" Then
                       
                        alex.MoveLeft()
                   
                   
                   
                   
                    ElseIf alex.Direction = "right" Then
                       
                        alex.MoveRight()
                   
                   
                   
                   
                    ElseIf alex.Direction = "up" Then
                       
                        alex.MoveUp()
                   
                   
                   
                   
                    ElseIf alex.Direction = "down" Then
                       
                        alex.MoveDown()

                   
                   
                    End If
     
                   
                   
                    Me.Invalidate()

               
               
                Next
 
           
           
            End If
       
       
       
       
        'The reason I don't loop in the Select case at the top is becuase:
       
       
       
        'Looping up there would result in checking the keypress 30 times.
              
       
       
        'So while in the middle of the loop, you really don't want to 
        



       


             
       
       
        'push another key and change directions while he's heading towards

       
       
        'another tile. Thus, you figure out what key he pushed first, 
            



           


 
           
           
            'set his direction and THEN loop based on what direction it was. 

            








           






            alex.CanWalk = True 'He's done walking, let him walk some more!
       
       
       
       
        End If
   
   
   
   
    End Sub
Great! Now run the app. Nothing new. Earlier, we just either created a character, or just simply created a map. Now we just created both.

When drawing  more than one object, there's 1 thing to keep in mind .Whatever you draw first will be on the top. If you drew the map over the
character (meaning if you drew the character 1st and then the map), you'd only see the map and not the character. Since the character is on top
of the map, you always want to draw it last.


 
(now dreamweaver randomly decides change my font into whatever it wants)

Oh, and another thing about e.graphics.drawimage:
I recently figured out that you dont have to say New Bitmap if you're passing in a Bitmap as the argument. You only have to say
New Bitmap when you want to create a bitmap from a string.


For example: Dim x as string = "asdf.bmp" e.graphics.drawimage(new bitmap(x),10,10) 
and
 Dim x as new bitmap("asdf.bmp") e.graphics.drawimage(x,10,10)
 

Get my point? Try this. Change
e.Graphics.DrawImage(map.Tiles(x, y), x * 30, y * 30)
to
e.Graphics.DrawImage(new Bitmap(map.Tiles(x, y)), x * 30, y * 30)


Run the app and see the difference. See how slow it is? Change it back to what it was before.

 Now its time to scroll.

 

Scrolling
Scrolling is pretty easy. Well..... .... if you know how to do it, it is :p. Years ago (well.. not that long ago, probably about a year or 2 ago), I used to be confused on how to scroll. I thought of weird methods like (feel free to laugh): 
Extend the form's right border to the right to make the map wider; extend the form's left border to the right to make it the right width; this effect makes you see the map; but the problem is the form's position gets shifted to the right - so i just move it to the left. >_< You wont believe how slow it went - 1-2 frames per second at max!! Heh.. *jeez that was dumb*.


Now I'm going to teach you the real way to scroll. Its very simple. Lets say you want to move right. How would you scroll? You move the map left! 


In typical RPGs, the character remains centered on the screen. In order to move the character in one direction, you move the map in the opposite direction. In other words, you offset the map. The map is drawn in a certain position, when you move left for example, the map gets offset to the right. 


Now let's translate these words into code!


In clsSprite add 2 globals:
Public OffsetX as Integer
Public OffsetY as Integer


In the moveUp sub, add this to the end:
OffsetY +=1 'We move the character up, but we move the offset down.
In the moveRight sub add this to the end:
OffsetX -=1 'We move the character right, but we move the offset left.


 You know the drill. Do this for the MoveDown and MoveLeft subs. 

Now its time to put this in action. Go back to the paint event. Change:

 e.Graphics.DrawImage(map.Tiles(x, y), x * 30, y * 30) 'Offset the map
to
 e.Graphics.DrawImage(map.Tiles(x, y), x * 30 + alex.offsetX, y * 30 + alex.OffsetY)
 

Now we have to center the character. We know that the map is 22x16 (if you look at the map text file). Thus the center tile is 11,8. So replace:
 

e.Graphics.DrawImage(alex.Image, alex.Position)
with
 e.Graphics.DrawImage(alex.Image, New Point(11 * 30, 8 * 30))


Run it. The character is centered on the screen. Push a few keys and stuff. Awesome! We just finished scrolling.
Wait.. the character doesn't look centered for some reason! Yeah, I honestly don't know why. 


Change the 11 to a 10 and the 8 to a 7, it seems to work better :). 


 e.Graphics.DrawImage(alex.Image, New Point(10 * 30, 7 * 30))


Well that's it for this tutorial! Wasn't that simple? That's it for this tutorial

Oh, and guys, btw - bear with me on this font issue, its driving me nuts!! Its hard to even get a bit of content out! Randomly text becomes commented ("invisible") so i have to look for it in the code. SIGH!!


I hope you've enjoyed this tutorial, even with this stupid font problem :).
 
 
              The Source 
              Code
 
               
 
               
 
               
 
               for this tutorial is located here: 
              You can also 
              locate this by logging in to 
 
               
 
              vbProgramming 
 
              Forums and going 
              to:
Tutorials 
 
              > Tutorial Source Code > 
              Source Code