[Tutorial] Simple VB game step by step, line by line (written and videos)

begallegal1 Jan 19, 2013

  1. begallegal1

    begallegal1 Medicine Man Lifetime Gold TeamXPG
    0/47

    Joined:
    Oct 31, 2011
    Messages:
    3,694
    Likes Received:
    3,131
    Trophy Points:
    235
    Gender:
    Male
    Location:
    In a Field of Green
    Console:
    Xbox
    Here is a very simple example of a game made with VB​
    with nothing more than one small picture and one small icon.​

    I will be breaking the project up into multiple videos to show the steps, and give a general idea of how the functions in the project work. For the sake of time I am going to copy and paste the longer bits of code, but I will also give written explanation for each, along with the source snippets at XPGamesaves.com so all you will have to do is duplicate it with your choice image and icon files.​

    Here is basically what your final project will look like only with your choice image​
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Part 1 Video, explanation ,and breakdown



    You will need to open Visual Studio, and start a new "Windows Form Aplication" name it anything you wish that will suit your project. we are going to use "picture click"

    once your solution is opened you will click on the main form "form1.vb" and go to the properties box on the right, I will pull this box out in the video to better show the fields being altered.

    you will change the Text property to your games name, this will change the text that displays on the top left of your game. We are going to make our game 640x480 by using the size property.

    Now we are going to add the icon and small picture to our game, you will need any small jpeg or png picture and any .ico icon file (you can make these from images with many free online converters) click the project tab at the top and choose "add Exitsting Item" find and add your image and icon to the project.

    back on the "form1" properties you will click next to the icon option, go to the directory in your games build folder (game name/game name/here)and choose the icon you just added to your project
    I also change my "formBorderStyle" to "Fixed3D" for a better look and to make the app unable to be resized, you can also change the background color to anything you prefer. The final step here is to double click on our form and it will open our code page and add the "Form1_Load" line for us.

    now we go back to the form design page, in our toolbox (you may have to add toolbox from the "view" tab) you will find the "picture Box" function and inside of our main form make a picture box roughly the size of your small picture, in PictureBox1 properties window click the "Image" property and you will be prompted to import a resource Click "import" and add your small picture that you previously included in the project(your small image) then click "ok" to make the image fill your Picture box, resize your box as needed to fit the image properly. double click your picture box and it will again create a line of code in the code page for your "PictureBox1"

    Next we want to use the toolbox to add a timer to our app. Place the timer anywhere, it is not visible on the form, again double click on your timer to add the line of code to the code page, now back on the form go to the properties of your timerand change Enabled to "True" and Interval to "1000" (1000 milliseconds).......Now the fun starts :D

    On the code page you are going to add a line of code to the "Timer1_Tick" line.

    Code:
    PictureBox1.Location = New Point(Rnd.Next(0, Me.Width - PictureBox1.Width),Rnd.Next(0, Me.Height - (PictureBox1.Height + (Me.Height - Me.ClientSize.Height))))
    What Does this do???
    you should now see an error under the part in the line "Rnd.Next" this is because the program has no idea what a "Rnd" (or random) is, add this line just below "Public Class Form1" at the top of your page
    Code:
    Private Rnd As Random = New Random
    What Does this do???
    You'll see that the error has gone away, we can now click the "debug" button and we should see our application come to life and our picture moving randomly within.....

    Now if you go back to the Timer1 properties and change enabled to "False" , Click Debug again and you will see the image now sits still in it's location because the timer is essentially "off" , playing with this aspect we will now give a way to turn the timer on and off within our program

    Just under the "PictureBox1_Click" line of code add the code below and debug your application again, you will see that the box sits still, but if you click on the picture it begins it's random movement
    Code:
    Timer1.Enabled = True
    What Does this do???
    End Part 1
     
  2. begallegal1

    begallegal1 Medicine Man Lifetime Gold TeamXPG
    235/282

    Joined:
    Oct 31, 2011
    Messages:
    3,694
    Likes Received:
    3,131
    Trophy Points:
    235
    Gender:
    Male
    Location:
    In a Field of Green
    Console:
    Xbox
    Part 2 Video Explanation and breakdown



    In part 2 we are going to finish off our basic game functions an test it out

    Go to your Timer1 properties and change enabled to True so the timer is always on, back

    on the code page we are going to comment out the Timer control out of the code with a

    ' you will see the line turn green. Now on your form in the toolbox we want to add a

    "Label" you can place this anywhere you wish , I put it in the upper right corner of the

    form. Double click on the label to create your line of code on the code page, now go

    back to the label's properties and change it's text from "label1" to just blank. Now on the

    code page were going to add 3 seperate bits of code

    Under "Public Class Form1" add the line
    Code:
    Dim score As Integer = 0
    What does this do???
    Next we will add a way to score points and display them.

    Under the "PictureBox1_Click" line we will add the code below
    Code:
    score += 1
    What does this do???
    Under the "timer1_Tick" add
    Code:
    Label1.Text = "Score: " & score
    What does this do???

    If you debug the program now, you should see your picture moving randomly with a

    Score: 0
    displayed where you put the label. And if you click your picture you will see that you get

    1 point added to your score everytime you do.

    End part 2
     
  3. begallegal1

    begallegal1 Medicine Man Lifetime Gold TeamXPG
    235/282

    Joined:
    Oct 31, 2011
    Messages:
    3,694
    Likes Received:
    3,131
    Trophy Points:
    235
    Gender:
    Male
    Location:
    In a Field of Green
    Console:
    Xbox
    Part 3 Video Explanation and breakdown




    For Part 3 we are going to add a "link label" for a url, and add the icon so we can make

    our first "release" build before adding the last features in part4

    GO to the Toolbox and click on "LinkLabel" and place the label anywhere you want on

    your Form now in the Properties for LinkLabel1 change the text to what you want and

    change the link colors etc as you like, when you are done there double click the link on

    the form to add the line of code to your code page
    under the "LinkLabel1_LinkClicked" line add
    Code:
    Process.Start("http://websiteofchoice.com")
    What does this do???
    Next we will right click on your project solution (in tutorial it's "Picture click") and go

    to the project properties page, now set your Icon to the icon you added earlier by using

    the drop down box.

    now go up to the top where you start the debug, change the drop down box from "debug"

    to"release" and under the build tab click rebuild solution, now navigate to your games

    folder Gamename/Gamename/Bin/Release/gamename.exe
    now give your game a run and see how it works :D
    that's the basics of this build now we add extra's in part 4
     
  4. begallegal1

    begallegal1 Medicine Man Lifetime Gold TeamXPG
    235/282

    Joined:
    Oct 31, 2011
    Messages:
    3,694
    Likes Received:
    3,131
    Trophy Points:
    235
    Gender:
    Male
    Location:
    In a Field of Green
    Console:
    Xbox
    Part 4 Video Explanation and breakdown



    In part 4 we are going to add 2 more timers that will pose as game difficulty levels, and

    an opening and closing message box to allow simple use of these difficulty functions

    and give a final score tally and goodbye message box with a couple options. Since these

    code bits are more complex for the sake of time I will be copy and pasting them in the

    video.

    We want to turn our first timer off by changing it's property to false, next we are going

    to add 2 more timers and change their intervals to lower numbers than your previous

    timer (for tut I used 750 and 250) by using multiple timers with different time intervals

    we created simple levels of dificulty, We will later add a way to turn each level on when

    the game opens. Double click on each timer to generate the line of code on the code

    page.

    Now since we want all the timers to move our picture box and track our score we are

    going to add the exact same code from the first timer to bothnew timers under

    their lines "Timer2_Tick" and "Timer3_Tick"
    Code:
    PictureBox1.Location = New Point(Rnd.Next(0, Me.Width - PictureBox1.Width),
                                             Rnd.Next(0, Me.Height - (PictureBox1.Height + (Me.Height - 
    
    Me.ClientSize.Height))))
            Label1.Text = "Score: " & score
    What does this do???
    Now we need a simple way to turn each level on upon opening the game so we are going

    to use a simple "messagebox" with 3 options Yes,No,Cancel.
    Under the "Form1_Load" line add the code below
    Code:
     Dim intResponse As Integer
    
            intResponse = MsgBox("Choose Skill Level. Y=Hard N=Easy C=Are you Nuts?", _
            vbYesNoCancel + vbQuestion, _
            "Thanks For Playing!")
    
            If intResponse = vbYes Then
                Timer2.Enabled = True
            ElseIf intResponse = vbNo Then
                Timer1.Enabled = True
            ElseIf intResponse = vbCancel Then
                Timer3.Enabled = True
            End If
    What does this do???
    If you debug your game now you will be greeted with a message box and be able tochoose

    your level and visibly see the difference in timers ,especially on C :LOL:
    once youhave verified that your levels work, go back to your code page and near the end

    before "end class" create a line of space and add the code below
    Code:
     Private Sub Form1_Closing(ByVal sender As Object, ByVal e As 
    
    System.ComponentModel.CancelEventArgs) Handles MyBase.Closing
            Dim intResponse As Integer
    
            intResponse = MsgBox("Would you like to visit Webisiteofchoice.com?", _
            vbYesNo + vbQuestion, _
            "Thanks For Playing! Your score is " & score)
    
            If intResponse = vbYes Then
                Process.Start("http://www.websiteofchoice.com")
            ElseIf intResponse = vbNo Then
                End
            End If
        End Sub
    What does this do???
    Finishoff with one final "rebuild solution" under the build tab and grab your game from

    Gamename/Gamename/Bin/Release/gamename.exe
    and have fun :)

    I hope you enjoyed this tutorial series and if your interested in code, dive right in, it can

    be great fun to learn once you get started, and while this certianly isn't the next blockbuster top seller, it may just spark that bug in some who never knew they would enjoy it ;)
     
  5. gold972

    gold972 团队XPG影响 Effect XPG Developer TeamXPG
    205/282

    Joined:
    Dec 6, 2010
    Messages:
    6,833
    Likes Received:
    14,939
    Trophy Points:
    205
    Gender:
    Male
    Location:
    France Kernal XDK
    Console:
    Xbox
    hehe nice TuT begal ;)
     
  6. Ta

    Taylzx Guest

    Nice little tut here begal will be using it properly tomorrow :)
     
  7. tbugz

    tbugz Newbie
    0/47

    Joined:
    Jul 26, 2014
    Messages:
    19
    Likes Received:
    1
    Trophy Points:
    0
    cool tut bro...appreciate it
     

Share This Page

Close