Beginner to Pro: Game Programming

If you haven't already, make sure to get a copy of Visual Basic Express 2010. It's free of charge- just register (also free) within thirty days of downloading. Today's lesson will involve preparation of your game, and starting off with your basic movement script. This will allow you to get a feel of how to code responses to key presses (we'll be using the up, down, right and left arrows) to move your character around the map.

Preparation: Outlining Your Game

Before we get to any coding, we need to have all our information. Look at the list below. You should have:

• A drawn map of the area(s) in the game (preferably with detailed maps drawn of sub-areas)
• A fully written storyline (writing it like a play script is helpful)
• A list of all characters and their sprites (sprites are images of things in the game that are not tiles)
• A list of all your tiles (tiles are images of map pieces, such as grass or dirt or water)
• Shops, items, and other gear
• Monsters or other enemies and their sprites
• A level system, class system if you wish (fighter, mage, cleric, etc)
• A stat system (this can be rough, since we'll be going over it in detail later on)

Once all of this is done, we can start coding. Don't worry too much if you're a little unsure of some parts of the list. All will be addressed throughout the tutorials.

Starting VB.NET and creating your First Application


Installing VB Express 2010 is fairly simple. Follow the instructions and once installed, go ahead and start it up. Your screen should look something like the picture on the right. You can click any image throughout the tutorial to enlarge it.

In the top left corner, select File - New Project - Windows Form Application.

A windows form application is our choice because we're going to be interacting directly with Windows as we code, as well as while the game is running. It allows us to call on responses directly from your computer, such as when you press a key. Most of the time, VB.NET programs are made using a windows form application.

In the center window (the largest) there should be a box window. It will be labeled "Form 1". Should you click on it once, you'll see some information in the Properties window at the lower right corner of your screen. Toward the top of the list of items in Properties, you should see "(Name) Form 1". Let's change that and give our application a proper name. Clicking the part that says Form 1, type "mymap" in replacement, then hit Enter. This should save what you wrote. Scroll down the Properties box to "Text       Form 1" and clicking the Form 1 part, change it to My Epic Game. Hit enter and you may notice that in the box in the center window, the title will now read "My Epic Game".

What We Did:
The Properties section represents the properties of whichever item we are selecting in the center screen, which is our work space. When selecting a new item in the work space, such as the form (the box window) we have access to its specific properties. Changing the 'text' attribute will change the title text of the item. You can adjust many things in the properties window, from the size of the object to the color, and more.

From here on we're going to be referring to the form we just edited as mymap, since that is what we have officially named it. Names are important so that we don't get mixed up when we have many items in our project. When giving something a name, it is best to give it a short, easy to understand name that clearly represents the object at hand.

So far, this is what we should have:










Making Your Player Character

Pretty plain, isn't it? Let's make it a bit more interesting by putting our character in there.
Right now we're just going to use a block to represent the character. The great thing about using VB Express 2010, is that there's a whole list of clickable objects we can insert without any code needed. These are available in the Toolbox. If you look at the image above, you'll see the toolbox on the left of the screen. It's a long list full of a number of things, and that's where we'll grab our PictureBox. If it isn't open already, click the little arrow beside Common Controls to drop down a list, and then grab (click and hold) and drag PictureBox into mymap. Release and you should have a rectangle with a dashed outline sitting in your mymap form.
Clicking on the PictureBox once, you should see some new information in the Properties panel, which is now displaying attributes of the new PictureBox.

Note: if you accidentally double-click you'll be brought to the code view window. Just switch back to the design view by clicking the tab at the top of the workspace window.


As we did with mymap, we're going to change the name of the PictureBox. Scroll the Properties list to "(Name) PictureBox1" and change PictureBox1 to myplayer. Again, we're changing the name because it makes it easier to recognize later on. If we see script that simply says "PictureBox1", we're less likely to remember what it represents, rather than myplayer.
Scrolling down a little in the Properties window, you'll see BackColor and a gray box beside it. Where the gray box is, there's a little arrow. Click it and a drop-down list will display a number of possible color selections. The three tabs above the selection will be Custom, Web, and System. Choosing the Custom tab gives you an array of colors to choose from. Web and System have a smaller and generally less vibrant list of colors, so I usually prefer to always choose my color from Custom. Do so now. I chose blue. When you pick a color by simply clicking it, the myplayer box will change to the selected color. It's that simple.
Note: Later on we'll get to using actual images for our characters, but for now, let's keep to the basics.

We've got one last thing to change before we delve into coding. You'll notice that our little player is rectangular in shape. Personally, I've never seen a character who was horizontally elongated, so let's fix that. If you look at myplayer, you should notice some re-sizing dots. Grab the bottom-right one and resize your player into a decent cube shape. If you prefer, you can go to Properties (make sure myplayer is selected) and scroll to size. Adjust this to 50, 50 by clicking and typing the numbers (don't forget the comma) in.


And now we're ready to code! So let's refill our coffee, have a snack, and get into that scripting!

Coding Your First Script - Character Movement

Currently we're in design view, and in order to see or write code, we need to go to code view. At the very top of your screen, where it says File, Edit, View and so forth, select View - Code. This should open a new tab in the workspace. The following text will be displayed:


Public Class mymap


End Class


Do you recall when we named our form mymap? We can tell that we're working with that specific form because of how we labeled it. It's easy to recognize, and later on if we wish to call on mymap in a different form, it will be very easy to remember. 


Breaking down the code
Public Class means that anything used between Public Class and End Class will be wholly available to the entire page of code, rather than a Private Class. Objects in a Private Class are only usable within that specific Private Class. There are a number of Classes, such as Public, Private, Friend, and Protected. Most of the time, Public Class is the preferred choice.

The class we are using is public because we want the objects in it to be accessible anywhere. We are referring to mymap, meaning all the information we put between Public Class mymap and End Class will be held within the form that is mymap.

Lamens Terms: You have two baskets. One is big and one is small. The big one is called mymap and can hold the smaller one, as well as other things. You've got a bunch of apples (your code relative to the map) you want to keep together and separate from the oranges (code not relative to the map), so you put them in your mymap basket to do so. This is important when you have a whole lot of fruit and baskets later on, and just want to grab the apples.

Assigning Arrow Keys to Movement
Let's go back to our design view by selecting its tab at the top of the workspace window. Make sure mymap is selected (you can always tell, because it will show the name mymap in the properties window) and have a look at the properties window. You will notice a small lightning bolt (see reference image) which when clicked, will show a new list of Events. An event is just that- an event that takes place when something happens. Scroll to KeyDown and double-click it. You'll be sent back to the code view in the workspace, and a new line of code has appeared. We now have:





I know it looks like a lot, but if we go through and break it down, it's quite simple. Private Sub, the opposite of public class, is a sub-class within the public class that is mymap. It's like a smaller basket in your mymap basket, able to hold an event and the information pertaining to this event. The information is ONLY pertaining to that event. This is why it's private. mymap_KeyDown is the kind of event. It is simply saying that if the user presses a key while mymap is running, the event is triggered to happen.
(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown is assigning two new values to variables. A variable is a word that represents, or holds a line of information that can and is usually changed throughout the script Variables are also used to shorten large lines of code so that we don't have to keep typing them out.
 ByVal means "by value". The code is stating that the value of the variable sender is System.Object, and the value of the variable e is System.Windows.Forms.KeyEventArgs.

You may have noticed we're using Windows based terms because we're creating a windows application, thus why we chose to make a Windows Form in the beginning. 


Basically, what this script is doing is translating windows language and functions so they can be used in VB.NET. Pretty nice, huh? 
The important part of the script is the variable e. Luckily, we don't have to type out System.Windows.Forms.KeyEventArgs every time we want to see if a key is pressed, because this line of code has simply been assigned the variable 'e'. That's what makes variables so simple. Every time we refer to 'e', we are really referring to the above blue text, unless 'e' gets assigned to something else. So now that we have this, it's time to make a Case.


Creating a Case
A case is a kind of event that says, "if one of these things happens, do this." For each case, there is a possible event. In our situation, we want four cases. The case of the down-key pressed, the up-key pressed, the right-key pressed, or the left-key pressed. 


Let's begin adding that in. First we must make a Point. A point is like a variable that stores an x/y coordinate. We will use this to hold the coordinates of our player. Let's call our point Loc; short for location. The term Dim Loc as Point will be used. Dim basically means, "create". Thus, we create the variable Loc, and the type of variable is a Point. 



You must always start your case with Select. Select Case e.KeyCode just means that we are beginning a Case statement, and that we are checking to see (e.KeyCode) what key was pressed. The keys we want to find are arrow keys Up, Down, Left, and Right. Any other keys pressed will be ignored, as they are not given a Case.
However, if we were to run the program, nothing will happen should we press a directional key. This is because the individual cases do not have any executable code as of yet. It's time to change that and make something happen should one of the keys be pressed.

If Statements
An If statement is much like a Case. The concept is, "IF this happens, do this." Have a look at the following, and what I've added to our code.






Breaking this down, in "If Not myplayer.Location.Y - 5 < 0 Then" what we have is, "If myplayer's Location, minus five, is not less than mymap's minimum height value, run the following code."
We don't want our player to go off the map, so we need to first be sure that if they move up by 5, they are still within the parameters of the map. Should that be the case, we will next move the character (myplayer) in a set direction. We start with Loc = New Point, meaning we are changing the Location of myplayer's coordinates to a new coordinate. We then define that new coordinate with (myplayer.Location.X, myplayer.Location.Y - 5). The parenthesis () will always hold the information that the variable (currently Loc) is being assigned. As you can see, myplayer.Location.X is not changed. It's merely reassigned as itself, with no new math. But, with myplayer.Location.Y - 5, we are taking away the value of 5, thus moving myplayer by 5 on the Y axis. myplayer.Location = Loc is just stating that we are officially setting the Location of myplayer to the new coordinates (Loc).


TEST!
Have you gotten it down so far? Try on your own to set the code for the remaining cases (Down, Left, and Right). Save your project and try running it by pressing the green arrow at the top of your screen (shown in the image to the right).




Complete Code: 



Public Class mymap


    Private Sub mymap_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown
        Dim Loc As Point
        Select Case e.KeyCode
            Case Keys.Up
                If Not myplayer.Location.Y - 5 < 0 Then
                    Loc = New Point(myplayer.Location.X, myplayer.Location.Y - 5)
                    myplayer.Location = Loc
                End If
            Case Keys.Down
                If Not myplayer.Location.Y + 5 < 0 Then
                    Loc = New Point(myplayer.Location.X, myplayer.Location.Y + 5)
                    myplayer.Location = Loc
                End If
            Case Keys.Left
                If Not myplayer.Location.X - 5 < 0 Then
                    Loc = New Point(myplayer.Location.X - 5, myplayer.Location.Y)
                    myplayer.Location = Loc
                End If
            Case Keys.Right
                If Not myplayer.Location.X + 5 < 0 Then
                    Loc = New Point(myplayer.Location.X + 5, myplayer.Location.Y)
                    myplayer.Location = Loc
                End If
        End Select


    End Sub


End Class