In this episode, I am going to attempt to make my character move by the arrow keys.  Just left and right.
First, I need to set up the bitmap that will hold the character

    Dim PlayerBmp As Bitmap           'This will hold the main character graphics.
    'Actually, it is a bunch of frames of the character. 

PlayerBmp is the bitmap of the player.  It has 10 frames each 16x32 and they are arranged 10x1, so the bitmap is 160x32.  You can get the bitmap that I am using here.

First, I want to declare some constants that define the size of the character in the bitmap.

CHARWIDTH Width of character on the form and in the bitmap file.  It is 16.
CHARHEIGHT Height of character on form/bitmap.  Currently 32.
I wanted them to be unequal so that I can make sure that my code will work for all cases.

    Const CHARWIDTH As Integer = 16
    Const CHARHEIGHT As Integer = 32
    'These define the width of the character in the file. 

All of those go into the declarations section.
Next, I actually need to get the image that goes into the bitmap.

        PlayerBmp = New Bitmap(Application.StartupPath & "\..\sumult.bmp")
        'Loads the image into this bitmap.
        'Given this arrangement, the bitmap must be in the same directory as the solution.
        PlayerBmp.MakeTransparent(Color.Magenta)
        'Makes all of the magenta in the bitmap transparent. 


Notice the Application.StartupPath... that's the location of the EXE file, which is usually located in the bin 
folder from the solution.  Therefore, the \.. takes you up to the folder with the solution in it, and the
\sumult.bmp gets the bitmap in the folder (I hope you put the bitmap in the same folder with the solution.)
The .MakeTransparent simply makes magenta transparent so that you can see the background instead of magenta.

Now, to display the bitmap to the form, I need to draw it in the Clock_Tick event.

            GFX.DrawImage(PlayerBmp, 100, LANDHEIGHT - CHARHEIGHT, New Rectangle(0, 0, CHARWIDTH, CHARHEIGHT), GraphicsUnit.Pixel)
            'This draws the character to the display.  Right now, the 100 is a fixed number, but When the character moves 

In effect, the 100 will change into the X variable that determines my character's XLocation...
also, when I get to animate the character (next episode), the parameters to the rectangle will change.  When I turn the character, it will change also, and that's coming up soon.

This 12th overload the DrawImage takes the bitmap, the x and y of the drawing location, and a source rectangle that determines what portion of the original image to draw.

At this point, the character's first frame should be drawn to the form, touching the grass at the bottom.

Now, to make the character respond to movements.
First, I need to make some additions.


PlayerLoc is going to hold the X and Y locations for my character.  I wanted a rectangle because eventually I will need to see the width and height of the character, mainly for detecting collisions.
GoLeft is true when the Left button is pressed.  
GoRight is true when the Right button is pressed.
Those two booleans will be check and responder
MOVESPEED - how much the character moves when the clock.

    Dim PlayerLoc As Rectangle
    'This will hold the current location of the player.  X and Y included.
    'Why didn't I use point?  Because I am probably going to use the height and width for collisions later.
    Dim GoLeft, GoRight As Boolean
    'Indicates if the left / right buttons are pressed.

    Const MOVESPEED As Integer = 5
    'How much I move every tick 

Now I need to initialize the location of the character.
In Form_Load:

        PlayerLoc = New Rectangle(100, LANDHEIGHT - CHARHEIGHT, CHARWIDTH, CHARHEIGHT)
        'Instantiate the player location. 

Now, in order to move the character, I don't have to do something like:
X += MOVESPEED

I will utilize the Rectangles .Offset method.  But more on that when I get there.

First, let's set the Booleans in the KeyDown and KeyUp events.

    Private Sub PFMain_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown
        If e.KeyCode = Keys.Left Then
            GoLeft = True
        ElseIf e.KeyCode = Keys.Right Then
            GoRight = True
        End If
    End Sub

    Private Sub PFMain_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyUp
        If e.KeyCode = Keys.Left Then
            GoLeft = False
        ElseIf e.KeyCode = Keys.Right Then

Notice that the keydown and keyup events can only take one key event at a time and then, they fire somewhat sporadically.  Doing them like this makes them nice and orderly, and their state can be identified by the booleans.

Now, for the Timer.

        If GoLeft Then
            PlayerLoc.Offset(-MOVESPEED, 0)
            'Move player left.
            UpdateArtwork = True
        ElseIf GoRight Then
            PlayerLoc.Offset(MOVESPEED, 0)
            'Move player right.
            UpdateArtwork = True
        End If


That goes before the If UpdateArtwork Then block, as you will want to be able to move the character at all times, not when you need to update the display.

Also, the drawImage in the If UpdateArtwork Then block needs to be modified as well:

            GFX.DrawImage(PlayerBmp, PlayerLoc.X, PlayerLoc.Y, New Rectangle(0, 0, CHARWIDTH, CHARHEIGHT), GraphicsUnit.Pixel)
            'This draws the character To the display, based on the current character location. 

Replace the old GFX.DrawImage in the timer with this.
Now, at this point, the image should be moving left and right according to the keys that you press (and hold down).

Now, how to make the character actually face the direction that he is going?
We'll just have to add another variable.

    Dim CharDirec As Integer
    'Which direction is the character facing? 

CharDirec will be 0 if the character is facing left and 1 when he is facing right.
Now, to make that happen, I fix it in the Timer subroutine.
I don't want to put it in the keydown because the keys can be released out of order....  If you press both keys at once, then the direction will default to 0... based on this modification of the keycode check in the Clock.

        If GoLeft Then
            PlayerLoc.Offset(-MOVESPEED, 0)
            'Move player left.
            UpdateArtwork = True
            CharDirec = 0   'Look left.
        ElseIf GoRight Then
            PlayerLoc.Offset(MOVESPEED, 0)
            'Move player right.
            UpdateArtwork = True
            CharDirec = 1  'Look right.
        End If

Now, I change the DrawImage to this so that the Left property of our source rectangle goes to 4 * CHARWIDTH, the location of the character facing to the right.  I can do this with a bitshift.

            GFX.DrawImage(PlayerBmp, PlayerLoc.X, PlayerLoc.Y, New Rectangle(CHARWIDTH * (CharDirec << 2), 0, CHARWIDTH, CHARHEIGHT), GraphicsUnit.Pixel)
            'This draws the character to the display, based on the current character location. 

though if you are using .NET 2002, you'll have to use multiplication.

            GFX.DrawImage(PlayerBmp, PlayerLoc.X, PlayerLoc.Y, New Rectangle(CHARWIDTH * CharDirec * 4, 0, CHARWIDTH, CHARHEIGHT), GraphicsUnit.Pixel)
            'This draws the character to the display, based on the current character location. 

And, after you make those few changes, the character should now turn depending on which direction he is going.

That concludes this episode... next time, I will attempt to make the character animate.