× Main Menu

C# Tutorial Create a side scrolling platform game in visual studio

In this tutorial we will show you how to create a simple yet efficient side scrolling game only using Visual Studio toolbox components using the c# programming language. We have create another c# platform game tutorial before where you played the game in a static level for this one, we thought we can do better by adding the side scrolling and platform elements together. The main objective of this game, you the player are in a level where there is a locked door, you need to collect the key from the other end of the level while collecting some of the coins and not dropping off the platforms. Once you collect the key you are able to open the door and complete the level. Premise is fairly simple and it’s a lot of fun to make, let get started.

note – games development is a lot about trial and error, don’t be afraid to of the errors or the game breaking, while doing this tutorial it seems a lot easier to follow through but if you want to add more functionalities to it, don’t be afraid to try it out, if the worse happens this tutorial is here to help other than that you can try to make anything you want.

Lesson Objectives

  1. Create a full side scrolling platform game in visual studio with c# programming language
  2. Use several picture boxes and control them using timers
  3. Use Loops to easily identify the platforms, coins, keys and doors
  4. Create gravity and jump force in visual studio
  5. Using Key down and Key up events to control the character
  6. Smoothly scrolling the background, items and platforms as the player moves between left or right

Full Video Tutorial

Download the side scrolling platform game images here

C:\Users\Admin\Desktop\platform game 2\platform game resource\background.jpg
Above is the background image, this is a large image with a width of 2000 pixels and height of 480 pixels. This is the background image for the game this will be used to make the game on top of and we will scroll this image left to right.
C:\Users\Admin\Desktop\platform game 2\platform game resource\coin.gif This is the coin image, this is an animated coin gif
C:\Users\Admin\Desktop\platform game 2\platform game resource\door-closed.gif This is the door closed image, this will be default view of the door
C:\Users\Admin\Desktop\platform game 2\platform game resource\door-open.jpg This is the door open image, when the player collects the key and collides with the door it will change to this image
C:\Users\Admin\Desktop\platform game 2\platform game resource\key.jpg This is the key image.
C:\Users\Admin\Desktop\platform game 2\platform game resource\platform.jpg This is the platform image. All the platforms in the game will have this as their background image.

If you are new to games development, then let me let you in a secret that is games are illusions on a computer system, when you see Mario or sonic moving through a level they are not necessarily moving themselves the environment is moving towards them giving them an illusion of movement. We are going to do something similar to that in this tutorial. When the player will press left or right we will move the character little bit but we will move the environment more towards them which will give the player an ILLUSION of movement.

Create a new project in visual studio, Make sure its Visual C# and Windows Form Application. Name this project side scrolling platform game and click OK.

In the properties window change the size to 614, 520 and the text to “Side Scrolling Platform Game”.

From the toolbox drag and drop a picture box to the form. This will be used as the main background for our side scrolling game. Once you dropped it on the form please change the following in its properties window.

Name: background

Location: 0,0

In the same properties window find the option for image and click on the 3 dotted button to the right.

Once clicked you will see this window. This is the resource selection window it allows us to import images and other files to the project. While the Project Resource File option is selected click on import.

Navigate to the images you downloaded from MOOICT, select all the files and click on the open button.

You will be taken back to the resource selection window and from the list of images choose the background image and click OK.

This is what the image will look like now.

While the image is selected go to the properties window, change the size mode to AutoSize this will change the size to 2000, 480 which is the native size of the image.

This is what the form looks like now, as you can see most of the image is not visible, This is the right size for the form but we need to some elements to the whole game not just the first part of it. When you click on the form you can extend the width as you require, extend it so you can see the whole picture. If you can’t select the form because the picture is covering it, then just click on the title bar and it will select the form.

As you can see here we have extended the form to the full size now we can add platforms, coins, door and key on the level.

Add another picture box to the form.

Select the picture box and change the following in its properties.

In the properties window select the background image option and click on the 3 dotted button to the right.

This will take you the resource selection window, from this window select the platform image and click OK.

From the properties window add a tag to the picture box called “platform” all lower case. As we will have more than 1 platform in the game its best to give them a tag which will help organize it and identify them in the code.

because we set the image as the background for this platform we can extend it and make it smaller the background will tile with it. Now you can feel free to add as many platforms as you want, the easiest way to do this is to simply copy and paste this platform multiple times, it will copy the background image and the tag with it.

Add another picture box to the form

Name: door

Tag: door

Image: door

Size Mode: Auto Size

Location: you can place this door picture box anywhere in the level, we placed it on the top left over a platform see the level details below.

Add another picture box to the form

Name: player

Tag: none

Image: player

Size Mode: Auto Size

Location: 86, 398

Add another picture box to the form

Tag: coin

Image: coin

Size Mode: Stretch Image

Size: 35, 30

Location: place this object on top of the platforms, once you got one set up, you can copy and paste it many times.

Add another picture box to the form

Name: key

Tag: key

Image: key

Size Mode: Auto Size

Location: Place on the top right platform. See the level layout below.

Above is the final level design. As you can see we have placed the door, coins, platforms and key to this level. For now you can follow the same level design and may be once you got the grip you can design your own with more details.

Click on the form title again, we need to set the forms size back to normal. Set the form size back to 614 in the size option in the properties window.

This is the form size you should apply now.

From the toolbox drag and drop a timer to the form.

In the timers properties window change the following. Set name to gameTimer, set enabled to True and Interval to 20. Double check the image and see if it matches with yours.

Click on the little lightning bolt icon In the properties window, this will take you to the events manager window, for the timer there is only one event TICK. Type in mainGameTimer and press enter. This will take you the code view, comeback to the design view we need to add 2 more events to the game.

Click on the form, make sure you have selected the form and see the events manager by clicking on the small lightning bolt icon. Find the key down event and type in keyisdown and press enter. Find the key up event type in keyisup and press enter.

Start Coding

This is the code view of the game so far. There are three empty events in this game we are going to start by adding variables first.

Add the highlighted code where you see in the code below. All the codes are commented to further your understanding of the process.

There are 4 Booleans first goleft and goright Booleans will be used to detect the players movement, jumping Boolean will be used to control how the player jumps in the game and lastly the haskey Booleans will be set true once the player collects the key.

After that we have 5 integers. JumpSpeed will control how fast the player jumps, force will be used to check how high the player can jump, score is obvious off course to keep score, playSpeed will control how fast the player moves left or right and finally backLeft will control the environment speed relative to the player.

Key is Down Event

This event will trigger when the player presses a key on the keyboard. We will map out three different keys for this game, left right and space key.

//if the player pressed the left key AND the player is inside the panel

// then we set the car left boolean to true

if (e.KeyCode == Keys.Left)

{

goleft = true;

}

// if player pressed the right key and the player left plus player width is less then the panel1 width

 

if (e.KeyCode == Keys.Right)

{

// then we set the player right to true

goright = true;

}

The two if statements above will be waiting for the left or right key to be press and when they are we will set either the goleft or goright Boolean to true.

//if the player pressed the space key and jumping boolean is false

 

if (e.KeyCode == Keys.Space && !jumping)

{

// then we set jumping to true

jumping = true;

}

Lastly in this event we are looking at the space key, in this if statement we have two different condition and they both have to be true in order for this event to trigger. We are looking for the player to press the space key AND the jumping Boolean needs to be false. In short hand code we can tell the code !jumping means jumping is not true. If both of these conditions are met then we set jumping back to true, this is a popular method to stop players from double, triple jumping in the game.

Key is up event

This is event similar to the key is down event, in simple terms we setting everything back to false once the represented keys are released. also notice we are not specifically calling the space key because we know the jumping will have to be true so if the keys are released then we set it false.

Main Game Timer event

This event controls the whole game, from the movements of the player, to the environment and also removing objects from the form as they collide with each other. Follow the code in this event closely because its long and can get complicated, do one line at a time and if you get any errors check back with this tutorial.

 

// linking the jumpspeed integer with the player picture boxes to location

player.Top += jumpSpeed;

The code above is linking the jump speed with the player picture boxes top location. This will artificially add gravity to the player by including += meaning in every frame the player character will be pushed down according to the value of jump speed.

// refresh the player picture box consistently

player.Refresh();

Every picture box comes with several functions built in them, one of them is the refresh function. The picture box will flicker when you are playing the game so using this refresh function allows that to be reduced down a little bit.

// if jumping is true and force is less than 0

// then change jumping to false

if (jumping && force < 0)

{

jumping = false;

}

The if statement above means that if the jumping Boolean is true and force is less than 0 then we set jumping to false.

// if jumping is true

// then change jump speed to -12

// reduce force by 1

if (jumping)

{

jumpSpeed = -12;

force -= 1;

}

else

{

// else change the jump speed to 12

jumpSpeed = 12;

}

In the if statement above if jumping is true then we reverse the jump speed which will propel the player upwards and we reduce 1 from the force as the character jumps, else statement will trigger when the if statement condition becomes false. If the character is not jumping then we add force to the character in the jump speed.

// if go left is true and players left is greater than 100 pixels

// only then move player towards left of the

if (goleft && player.Left > 100)

{

player.Left -= playSpeed;

}

// by doing the if statement above, the player picture will stop on the forms left

In the if statement above if the go left Boolean is true and the player is further than 100 pixels from the left then we will allow the player to move the left. By doing an if statement like this we can stop the player from leaving the form from the left.

// if go right Boolean is true

// player left plus players width plus 100 is less than the forms width

// then we move the player towards the right by adding to the players left

if (goright && player.Left + (player.Width + 100) < this.ClientSize.Width)

{

player.Left += playSpeed;

}

In this if statement above we are looking if the go right Boolean is true AND players left position + player width + 100 pixels is less than the forms width meaning the right side of the form then we allow the player to move towards the right. if this condition is not met then the player will not move.

// if go right is true and the background picture left is greater 1352

// then we move the background picture towards the left

if (goright && background.Left > -1353)

{

background.Left -= backLeft;

// the for loop below is checking to see the platforms and coins in the level

// when they are found it will move them towards the left

foreach (Control x in this.Controls)

{

if (x is PictureBox && x.Tag == “platform” || x is PictureBox && x.Tag == “coin” || x is PictureBox && x.Tag == “door” || x is PictureBox && x.Tag == “key”)

{

x.Left -= backLeft;

}

}

}

In the if statement above you will see that we have a for each loop inside it. Lets break this down and explain it further.

IF GORIGHT AND BACKGROUND IMAGES LEFT POSITION IS GREATER THAN -1353 (this number is not random I tested it couple of times and this is the number that fits the best with the game.)

If those conditions are true then we move the background towards the left with background.Left -= backLeft; So if the player is moving right the background should move left.

Now the next part should make you aware of why we used tags, in visual studio two objects cannot share the same name however they can share the same tag. So we use tags to identify multiple objects. Because there are so many different platforms, coins, door and key on the level we need to move them all with the background at one speed giving the illusion of movement. We are using this symbol || in the if statement to differentiate the conditions, the is the way the program reads this statement

IF X IS A PICTURE BOX AND IT HAS THE TAG PLATFORM OR X IS A PICTURE BOX AND IT HAS THE TAG COIN OR IF X IS A PICTURE BOX AND IT HAS THE TAG DOOR OR IF X IS A PICTURE BOX AND IT HAS THE TAG KEY.

// the for loop below is checking to see the platforms and coins in the level

// when they are found it will move them towards the left

foreach (Control x in this.Controls)

{

if (x is PictureBox && x.Tag == “platform” || x is PictureBox && x.Tag == “coin” || x is PictureBox && x.Tag == “door” || x is PictureBox && x.Tag == “key”)

{

x.Left -= backLeft;

}

}

This for look inside that if statement simply states that we loop through every control component in this.Controls meaning this form. Then we identify if those controls are a picture box AND they have the given tags then we move them towards the left with the backLeft speed. Each of those controls will be linked in that x variable in the loop and they will be process to move towards the left.

// if go left is true and the background pictures left is less than 2

// then we move the background picture towards the right

if (goleft && background.Left < 2)

{

background.Left += backLeft;

// below the is the for loop thats checking to see the platforms and coins in the level

// when they are found in the level it will move them all towards the right with the background

foreach (Control x in this.Controls)

{

if (x is PictureBox && x.Tag == “platform” || x is PictureBox && x.Tag == “coin” || x is PictureBox && x.Tag == “door” || x is PictureBox && x.Tag == “key”)

{

x.Left += backLeft;

}

}

}

The above if statement now controlling the background from moving to the right.

IF GOLEFT IS TRUE AND BACKGROUND LEFT POSITION IS LESS THAN 2

THEN WE MOVE THE BACKGROUND TO THE LEFT USING += BACKLEFT VALUE.

We’ve done the similar thing to move the background, platforms, coins, door and key towards the right of the screen.

// below if the for loop thats checking for all of the controls in this form

foreach (Control x in this.Controls)

{

// is X is a picture box and it has a tag of platform

if (x is PictureBox && x.Tag == “platform”)

{

// then we are checking if the player is colliding with the platform

// and jumping is set to false

if (player.Bounds.IntersectsWith(x.Bounds) && !jumping)

{

// then we do the following

force = 8; // set the force to 8

player.Top = x.Top – player.Height; // also we place the player on top of the picture box

jumpSpeed = 0; // set the jump speed to 0

}

}

// if the picture box found has a tag of coin

if (x is PictureBox && x.Tag == “coin”)

{

// now if the player collides with the coin picture box

if (player.Bounds.IntersectsWith(x.Bounds))

{

this.Controls.Remove(x); // then we are going to remove the coin image

score++; // add 1 to the score

}

}

}

After that we are running another loop in the timer event, this one will check when we jump on top of the platform and collide with the coins.

The first if statement in the loop is checking if X control is a picture box and it has a tag of platform then we are also checking if the player intersects with it and player is not jumping if this is true then, we set the force back to 8, we place the player on top of the given platform by using player.top = x.top + player.Height. then we are setting the jumpSpeed to 0.

After the platform calculations we move on to the coin, now we don’t want the player to jump on top of the coin, we want the coin to disappear from the scene and we want to add 1 to the score integer. So we are once again checking the if X is a picture box and it has a tag of coin, then we are also checking if the player intersects with the coin then we remove the coin from the game and add 1 to the score integer, it’s as simple as this. Now we don’t usually do this but I have some homework for you regarding the score. Remember this section because it will be relating to this later in the tutorial.

// if the player collides with the door and has key boolean is true

if (player.Bounds.IntersectsWith(door.Bounds) && hasKey)

{

// then we change the image of the door to open

door.Image = Properties.Resources.door_open;

// and we stop the timer

gameTimer.Stop();

MessageBox.Show(“You Completed the level!!”); // show the message box

}

In the is statement above we are looking at the collision between the player and the door. In this if statement the player will have to intersects with the door AND the hasKey Boolean must be true, if so then we change the door image to the door open image, stop the game timer and show the level complete message.

// if the player collides with the key picture box

if (player.Bounds.IntersectsWith(key.Bounds))

{

// then we remove the key from the game

this.Controls.Remove(key);

// change the has key boolean to true

hasKey = true;

}

In the if statement above we are checking if the player intersects with the key then we will remove the key and change the hasKey Boolean to true. Remember without the hasKey Boolean being true the door will not open thus the game is not going to end.

// this is where the player dies

// if the player goes below the forms height then we will end the game

if (player.Top + player.Height > this.ClientSize.Height + 60)

{

gameTimer.Stop(); // stop the timer

MessageBox.Show(“You Died!!!”); // show the message box

}

Above is the last if statement in this program, this one is checking if the player has dropped off the form from the bottom then we stop the timer and show a message that states you died, in the nicest way possible off course. The way to read this if statement is IF THE PLAYERS TOP LOCATION + PLAYERS HEIGHT IS GREATER THAN THE FORMS HEIGHT + 60 PIXELS then we follow the instructions inside the if statement.

Let’s try to run the game – Click on the start button on the top tool bar.

Homework –

Remember when I mentioned that score integer and we will come back to it, at the moment you have the score being added as you collect the coins however nothing on the screen or the end screen message is showing the score. Can you fix That? Add something to the code or to the form that allows you to see how many coins you collected.

Have fun, Moo Out :).




3 responses to “C# Tutorial Create a side scrolling platform game in visual studio”

  1. Sylar Dean Paginton says:

    PHEW! impressive.. typed everything out all correctly and I got this error šŸ™

    CS1061 ‘Form1’ does not contain a definition for ‘Form1_Load’ and no accessible extension method ‘Form1_Load’ accepting a first argument of type ‘Form1’ could be found (are you missing a using directive or an assembly reference?)

    its a problem with the line that says.. ” public partial class Form1 : Form ” at the beginning of the code. Form1 : Form is all blue writing where the ‘Form’ word should be black accordign to the full code picture on the last page above.

    Any clue on how I can solve this please?

  2. Anhar Ali says:

    This error means that you do not have a form 1 load function in the code. You might have double clicked on the form which automatically adds a form load function. You can remedy this by deleting the event from the designer or you can delete the function from the event window.

  3. Vida Infinita says:

    I can’t believe you will make me type this entire code! What did it cost you to leave a pastbin? I just came here because of logic … Forget it. Thank you anyway.

Comment on this tutorial and let us know how you got on -

%d bloggers like this: