Breadcrumbs

[CodenStuff]

Hello,

Moved from VIP Section as newer tutorials have been added.

This is the first part of a tutorial that will show you how to make an RPG style game like my Adventure Game found here: viewtopic.php?f=54&t=3506

These type of games should really be made using GDI or DirectX for better animation and visual effects but they can be very time consuming to make especially if your coding on your own. In this tutorial I will show you how to do it quickly and easily and although the graphics/animation may not be as stunning as they would be using DirectX you could still make some great games and have lots of fun with it. At the end of this series of tutorials you will learn how to make the following:

The main game screen
Moveable Character
Collisions - Unpassable blocks
OverHeads - Used to display map objects over the player for things like walking behind trees, under bridges or behind walls
Items / Pickups
NPCs - Interactive characters that talk and give clues/quests to complete
A full blown map/game editor

And the amount of code used to create both the game and editor is so small that I even amazed myself. The code is easy to understand even if your a beginner in VB.Net you will find it easy to follow and even change/add your own stuff to make them even better.

Part 1: Creating the main game screen and your moveable character

Open VB and start a new project
When your project starts and form1 is visible on screen stretch it out so that we have enough room to put our controls on and then change the name of "form1" to "GameForm" using the forms name propertie.

Now add a "Panel" control to your form and change the following properties:

Change Size to: 578, 386
Change BorderStyle to: FixedSingle

The panel is going to be used to contain our main game screen. Now we need to pictureboxes into our panel and these will be used as a tile system for our game maps.

Add a "Picturebox" control into the panel and change the following properties:

Change Size to: 64, 64
Change BorderStyle: FixedSingle
Change BackgroundColor: Transparent
Change Margin - 'All' propertie to: 0

Now this part is quite important so I will try to explain it best I can and hope that we get it rite lol. The picturebox you just added is called "Picturebox1" and we now need to duplicate this picturebox 56 times BUT we need to place them into the panel in numeric order. Each time we duplicate the picturebox it will be numbered on the end like "Picturebox2, Picturebox3" etc so first of all move the picturebox you already have into the top-left corner of the panel - it should snap into possition as you get to the top edge.

Now copy your picturebox using "Ctrl+C" and paste it into your panel using "Ctrl+V" and move it so that its next to your first picturebox and continue doing this until you have your first row of 9 pictureboxes. Now when you paste your 10th picturebox into your panel it needs to go under "Picturebox1"..and the 11th needs to go under "Picturebox2" and so on like this:

sshot-122d.PNG

Continue to do that on every row until your panel is filled with 54 pictureboxes and looks like this:

sshot-12.png

Now we need to create 2 more pictureboxes so "Ctrl+V" twice and move them both outside the panel as shown in the image above. These 2 pictureboxes should be "Picturebox55" and "Picturebox56" and we need to rename both of these pictureboxes..it doesnt matter which one is which. Rename one of them as "Player" and rename the other one as "Shadow" using the Name properties and change both of there "Tag" properties to "Player"

Now you need to add a "BackgroundImage" to your Player picturebox and its best to use an image that has a transparent background so that you will be able to see behind the player. I just used a simple character sprite found on google. Set the player "BackgroundImageLayout" propertie to "Stretch" if your image doesnt fit. Make sure you add it to the BackgroundImage and not the Image propertie - VERY important.

Once youve done that move them both to the top-left square inside your panel as shown here:

sshot-12vc.PNG

sshot-13.png

Ok you will be happy to know that that was the hardest part of this tutorial but its still easy and didnt take too long rite ;)

Now its time for the player movement code so go into code view and add the following code:

Place this code under "Public Class GameForm"

Code: Select all

'STORE PLAYER MAP COORDINATES
    Public GboundX = 1
    Public GboundY = 1
    'DETECT KEYBOARD KEY PRESSES
    Protected Overrides Function ProcessDialogKey(ByVal keyData As System.Windows.Forms.Keys) As Boolean
        Keys_Down(keyData)
        Return MyBase.ProcessDialogKey(keyData)
    End Function
    'CONTROL/MOVE OUR PLAYER USING THE ARROW KEYS
    Public Sub Keys_Down(ByVal e As System.Windows.Forms.Keys)
        Select Case True
            Case e = Keys.Down And Not GboundY = 6
                Shadow.Top = Shadow.Top + 64 : GboundY += 1
            Case e = Keys.Up And Not GboundY = 1
                Shadow.Top = Shadow.Top - 64 : GboundY -= 1
            Case e = Keys.Right And Not GboundX = 9
                Shadow.Left = Shadow.Left + 64 : GboundX += 1
            Case e = Keys.Left And Not GboundX = 1
                Shadow.Left = Shadow.Left - 64 : GboundX -= 1
        End Select
        Player.Location = New Point(Shadow.Location.X, Shadow.Location.Y)
    End Sub

I have commented the code so you know exactly what it does and its use is the allow control of the player using the arrow keys and to ensure the player does not go outside the panel, this is controlled using the player coordinates.

And thats it you now have your main game screen and moveable player. How easy was that?

In the next part of the tutorial we will tackle the tile system and make a start on our map editor.

Download the source for this part of the tutorial:

AdvGTutorial.zip

Happy coding cooll;

[Cheatmasterbw]

Nice Tutorial!

[Usman55]

Excellent codenstuff! 5/5. Great tutorial. That was really easy. Only took 5 minutes.

[Liberated360]

This is amazing!! Short, simple, and working!

[Painstryver]

No.. you havent commented so I know exactly what is going on.. you really didnt explain the code you just said "COPY AND PASTE" .. How am I supposed to make a game with the use of my own knowledge if I dont know what the code means.

[Bogoh67]

becuase you look it up

[Painstryver]

becuase you look it up

You have to be kidding me, did you really just say that?

[CodenStuff]

The code is commented and I thought it was rather easy to understand.

Code: Select all

'STORE PLAYER MAP COORDINATES
    Public GboundX = 1
    Public GboundY = 1

GboundX and GBoundY save the location of the player box on the map.

Code: Select all

'DETECT KEYBOARD KEY PRESSES
    Protected Overrides Function ProcessDialogKey(ByVal keyData As System.Windows.Forms.Keys) As Boolean
        Keys_Down(keyData)
        Return MyBase.ProcessDialogKey(keyData)
    End Function

This monitors your keyboard and detects key presses.

Code: Select all

'CONTROL/MOVE OUR PLAYER USING THE ARROW KEYS
    Public Sub Keys_Down(ByVal e As System.Windows.Forms.Keys)
        Select Case True
            Case e = Keys.Down And Not GboundY = 6
                Shadow.Top = Shadow.Top + 64 : GboundY += 1
            Case e = Keys.Up And Not GboundY = 1
                Shadow.Top = Shadow.Top - 64 : GboundY -= 1
            Case e = Keys.Right And Not GboundX = 9
                Shadow.Left = Shadow.Left + 64 : GboundX += 1
            Case e = Keys.Left And Not GboundX = 1
                Shadow.Left = Shadow.Left - 64 : GboundX -= 1
        End Select
        Player.Location = New Point(Shadow.Location.X, Shadow.Location.Y)
    End Sub

This finds out which key was pressed and moves the Player box and Shadow box in the direction of whichever arrow key was pressed and updates the GboundX and GboundY values so we know where the player is.