Bare-Bones Platformer Game Using C# Code

This is my submission for the 2024-2025 Butwin Elias Best Award given by the Iseman Foundation. This project is a platformer style game coded in Visual Studios C#, that contains all of the essential elements needed to make a game of your own. This is not a full game with a story line and ending, but rather a tool to help others understand and create their own game in this style. You are encouraged to change and/or add as much as you want.

Throughout this Instructable, I will not only be showing the code to make this game, but also explaining it as thoroughly as I can to help you grasp a better understanding of what you are creating.

My goal by the end of this tutorial, is for others to have a solid grasp on basic coding principles and be able to create their own game.

Fortunately, as long as you have a computer, this project is relatively inexpensive. The few amount of materials that you do will need are mostly software based.

Hardware:

1. Computer- A computer with internet access is necessary for doing this entire project. The computer I used was a school issued HP ProBook. Whatever you use is fine as long as it has enough power to run the program. I recommend using a Windows based computer or desktop PC in order to make it easier to download Visual Studios.

Software:

1. Microsoft Visual C# 2010 Express- I am going to be honest here, Visual Studios C# is definitely not the best engine for creating games, especially at a higher level. However, it is free, and it does work. It is also perfectly fine for beginners who would like to learn about coding.

To start, you need to download Microsoft Visual C# 2010 Express. The app is free and as long as you are on a windows or google laptop, or a desktop computer, it should be easy to download.

Once the app is downloaded you can open it up. It should take you to the home screen as seen in the first image.

Once on the home screen, go to the upper left and click on "New Project", which is located under the app title in the top left. Refer to first image for guidance.

After clicking "New Project" a screen should pop up showing the different types of templates you can use. For this project, make sure you are selecting Windows Forms Application. You can then change the name of your project in the text box below.

After you are satisfied with the name you have chosen, click the "ok" in the bottom right corner.

This should then take you to your project, as seen in third image.

Now we can begin!

Now that we have opened our project, it is time to resize the form and change the background. Keep in mid that you are free to choose whatever form size or background you want, I am just demonstrating how it is done.

1. To start, you can close out the the "Solution Explorer" tap in the top right corner if it is there. We only need the "Properties" tab as of right now. (Image 1)
2. Now is time to change the size of the form. The size I used was 1678, 868. Choose whatever size best fits your desire for the game you want to make. To change the size, simply go to the properties tab on the right and select the "Size" property. The first number is the width (x value) and the second number is the height (y value), measured in pixels. (Image 2)
3. To change the background image, click on the "Background Image" property also on the properties tab. (Image 3)
4. A screen should pop up, select "Import" and then chose what image you would like from your files. (Image 4) *Keep in mind that the larger the file size of an image is, the slower the project will run.*
5. To fit your image to the form size, click on the "Background Image Layout" property and change it to "Stretch". (Image 5)

I have attached the image that I have used for the background. This image was made using AI to fit my desired theme for the game. Feel free to use it or find your own online.

Now begins the most tedious part of the project; sprites. In order to have fluid animation you need to have a lot of different images (sprites) that are played together like a flipbook.

As I keep saying, feel free to use the sprites that I used or your own.

Lets begin.

1. The sprites that I used came from https://craftpix.net/product/survivalist-sprite-sheet-pixel-art-pack/. To get this I saved the two images of the sprite sheets that were included on the website. The images are above (image 1 and image 2).
2. After saving these images, I converted them to JPGs so that they would fit the website that I will later use to remove the background on them. This is optional but makes things easy.
3. Once the images are saved, you can now remove the background on them in order to make them look nicer in game. The website I used to remove the backgrounds for the images is https://www.remove.bg/. It is free and super simple to use.
4. After you have removed the backgrounds of those sprite sheet images and saved them, it is time to cut them out. Head over to https://ezgif.com/ and select the "Crop" option from the top menu. You can now upload your image to the website.
5. Once one of the two sprite sheet images is uploaded, the tedious part begins. You must crop out every single one of the images on the sprite sheet. WHEN SAVING THE IMAGES, MAKE SURE TO NAME THEM IN PROPER ORDER. EX: WALK_1, WALK_2, WALK_3.... And so on. If not done this will result in much confusion later on. Also try to keep the size of the image you are cropping the same. Different size images can result in animation that is not smooth and very jittery.
6. Repeat this process for every image on BOTH sprite sheets. Trust me, I know it is very tedious.
7. One all the images are cut out, make a duplicate version of them facing the opposite direction. This is so that we have a left and right version of each movement.

Now that we have the images, it is time to add them into our game.

1. First we are going to go to the toolbox on the left side of the screen. You may have to open it up by clicking "View" on the top left and then "Other Windows" and then "Toolbox". However, it should already by there. In your "toolbox" you will see many different things. We are going to select "PictureBox" and then click on our Form. A small box should appear. (Image 1)
2. Once you see the picture box, click on the small play button in the top right corner of it. (Image 2) From here you will import the image in the same way that we did for the background. Upload one of the sprite images and repeat this process until you have a picture box for each image. The most necessary sprites that we need to have now are the left and right walking sprites and left and right idle sprites.
3. Make sure that the back color of your images is Transparent. Change this by selecting the "Back Color" property. (Image 3)
4. Go to the "Size Mode" property of each picture box and make sure that it is changed to "Auto Size" or "Stretch Image". Try auto size first. If the image is two big for your liking or not the size you want, switch to Stretch Image, but keep in mind that you will have to manually input the size you want in order to keep the image from looking contorted if you choose this. I recommend using auto size.
5. It is very important to name your picture boxes. To do this go to the "Name" property of each picture box. (Image 5) When naming the picture boxes, I usually put "pb" (picture box) and then the name of the image. For example, the "Walk 1" image would be named pbWalk1. The left facing one would be named pbWalkLeft1. Because you cannot put spaces in the names, I use CamelCase (no spaces, but first letter in a word is capitalized) to keep things efficient.
6. Once you have all your sprites in the game make one extra picture box. This will be used as your character for the game. For this picture box, I just made it the image of one of the idle animations. It does not really matter as we will constantly be changing it. My picture box is also named pbMan.

Now, we have just done a lot of work. Lets take a second to briefly go over what you should have completed so far.

1. Form with background (optional)
2. Left and right walking and idle sprites should be added into the game through picture boxes. (There should be a lot of picture boxes. You can go ahead and move all of these picture boxes off of the screen and on the side, as they do not need to be in view.
3. A picture box for your character with preferably an idle animation image in it, just to serve as a placeholder. I named this picture box pbMan. Remember you can name it whatever you like. (Image 1)

Our last step before we can get into the code, and a super easy one. All we have to do is make a ground.

To do this I took a screenshot of the actual ground that is on the background image, put it into a picture box, and just aligned it with the background. (Images 1-3) I named this picture box pbGround.

Once aligned, right click on pbGround and click "Send to Back". (Image 4)

The reason we are making this ground is so that we have something for the player (pbMan) to collide with when he jumps. More on this later on....

Now begins the coding!

*To make things easier, when I write code it will be in bold.*

We are going to start with basic idle animation. An idle animation is an animation that is running when your character is doing nothing. This is not necessary, but i do recommend it to make your game better.

To start we are going to go into the code tab. (Image 1) If it is not already at the top of your screen you can click on "view" then "code".

Once you are viewing the code, we can begin.

1. Directly under public Form1() you will see two curly brackets containing InitializeComponent();. go directly under the bottom curly bracket and begin typing. You can see this code in (Image 2). This is where we will be making our variables. Start by typing the following:

int idleright;

int idleleft;

An int is short for integer, which is a whole number.

1. Go back on to your designer tab where your form is and go over to the tool box. Scroll down until you see "timer". Select the timer and click anywhere on your form. A new tab on the bottom of the screen should appear and you should see a box that says "timer1".
2. Repeat this process one more time so that you have two timers. Click on the timers and name them timerIdleLeft and timerIdleRight.
3. Now, you may notice that timers do not have many properties. We are going to set Enabled to false on both of these timers and set the Interval to 200. (Image 3)
4. A timer's interval is how often it ticks in milliseconds. So if there are 1000 milliseconds in a second, then a timer with an interval of 1000 will tick every second.
5. Once you have changed the interval if each timer, double click on timerIdleRight. This should take you to your code tab and put you under the code for your timer. Now we are going to type the following code: (feel free to just copy and paste)

if (timerIdleRight.Enabled)

{

idleright++;

if (idleright == 1)

{

pbMan.Image = pbIdle1.Image;

}

else if (idleright == 2)

{

pbMan.Image = pbIdle2.Image;

}

else if (idleright == 3)

{

pbMan.Image = pbIdle3.Image;

}

else if (idleright == 4)

{

pbMan.Image = pbIdle4.Image;

}

else if (idleright == 5)

{

pbMan.Image = pbIdle5.Image;

}

else

{

pbMan.Image = pbIdle6.Image;

idleright = 0;

}

}

Once you have that written out (Image 4), lets take a second to explain what that means.

1. So, we start with an if statement. So we are saying if timerIdleRight is enabled, then run the code beneath it. It is important to make sure that your curly brackets are in the right place as it can mess up your project.
2. The idleright++; essentially means that we are adding to the variable idleright, every time the timer ticks.
3. Now begins the nesting (putting an if statement inside of another if statement).
4. The second if statement is saying that if idleright == 1 then switch pbMan's image to pbIdle1.
5. This cycle is repeated and idleright is reset at the end to make a continuous loop. (keep in mind that if you have a different number of idle sprites, just make sure to reset the value of idleright on the last image.)

This code is 100% functional. If you experience any errors below on the error list, read over the error, then double check to make sure you have the code copied exactly. Remember that if you chose to change the names of your sprites, you will have to change that in the code as well.

Now we can go back to the designer tab, and double click on timerIdleLeft. The code is practically the same, just with the left images and a different variable.

Code for timerIdleLeft: (can also be viewed in image 5)

if (timerIdleLeft.Enabled)

{

idleleft++;

if (idleleft == 1)

{

pbMan.Image = pbIdleLeft1.Image;

}

else if (idleleft == 2)

{

pbMan.Image = pbIdleLeft2.Image;

}

else if (idleleft == 3)

{

pbMan.Image = pbIdleLeft3.Image;

}

else if (idleleft == 4)

{

pbMan.Image = pbIdleLeft4.Image;

}

else if (idleleft == 5)

{

pbMan.Image = pbIdleLeft5.Image;

}

else

{

pbMan.Image = pbIdleLeft6.Image;

idleleft = 0;

}

}

Once you have the code copied for both of your timers, it's time to move on to movement animation!

This is pretty much the same as the last step, and should not be too difficult.

Start with adding two new timers into your game: timerWalkLeft and timerWalkRight.

Again, make sure that Enabled is false and set the interval to 150 for the both of them.

Now, lets head over to the code and make two new int variables directly under the idle ones that we made earlier.

int walkleft;

int walkright;

Go back to your designer tab now and double click on timerWalkRight.

Under this we are going to write the following code (can be seen in Image 1):

if (timerWalkRight.Enabled)

{

walkright++;

if (walkright == 1)

{

pbMan.Image = pbWalk1.Image;

}

else if (walkright == 2)

{

pbMan.Image = pbWalk2.Image;

}

else if (walkright == 3)

{

pbMan.Image = pbWalk3.Image;

}

else if (walkright == 4)

{

pbMan.Image = pbWalk4.Image;

}

else if (walkright == 5)

{

pbMan.Image = pbWalk5.Image;

}

else if (walkright == 6)

{

pbMan.Image = pbWalk6.Image;

}

else

{

pbMan.Image = pbWalk7.Image;

walkright = 0;

}

}

Now that we have the animation for walking right, lets double click on timerWalkLeft and copy the following code (can also be seen in image 2):

if (timerWalkLeft.Enabled)

{

walkleft++;

if (walkleft == 1)

{

pbMan.Image = pbWalkLeft1.Image;

}

else if (walkleft == 2)

{

pbMan.Image = pbWalkLeft2.Image;

}

else if (walkleft == 3)

{

pbMan.Image = pbWalkLeft3.Image;

}

else if (walkleft == 4)

{

pbMan.Image = pbWalkLeft4.Image;

}

else if (walkleft == 5)

{

pbMan.Image = pbWalkLeft5.Image;

}

else if (walkleft == 6)

{

pbMan.Image = pbWalkLeft6.Image;

}

else

{

pbMan.Image = pbWalkLeft7.Image;

walkleft = 0;

}

}

We have all of our animation now, so it is time to tie it all together with keyboard input.

Now for the most anticipated step, movement!

This step is going to be a little difficult so try to follow the directions as best as you can. I will be explaining things so that you have a better understanding of how to code your own game later on.

To start we are going to go the designer tab. Click anywhere on your form so that the properties for it appear on the properties tab.

Go to the top of the properties tab on the right and click on the small lightning bolt (image 1) which should show you a page called Events.

Once you see that, find the box that says KeyDown and double click on the empty box next to it. (image 2)

You should now be taken to your code page.

This is where you will begin typing your movement code.

Copy the following code (can be seen in image 3):

if (e.KeyCode == Keys.Right || e.KeyCode == Keys.D)

{

timerIdleLeft.Enabled = false;

timerIdleRight.Enabled = false;

timerWalkLeft.Enabled = false;

timerWalkRight.Enabled = true;

pbMan.Left += 3;

}

if (e.KeyCode == Keys.Left || e.KeyCode == Keys.A)

{

timerWalkRight.Enabled = false;

timerIdleLeft.Enabled = false;

timerIdleRight.Enabled = false;

timerWalkLeft.Enabled = true;

pbMan.Left -= 3;

}

What we're doing here is basically saying, if the right arrow key or D is pressed, then we move right, our right animation timer is enabled, and everything else is shut of. The same thing is done when we move left.

To polish this off we are going to go back into the form1 events that we went to earlier by clicking the lighting bolt.

Once on the events, double click on the empty box next to the box that says KeyUp. (Image 4)

This should again take you to a new line in your code where you will write the following: (Image 5)

if (e.KeyCode == Keys.Right || e.KeyCode == Keys.D)

{

timerWalkRight.Enabled = false;

timerWalkLeft.Enabled = false;

timerIdleLeft.Enabled = false;

timerIdleRight.Enabled = true;

}

if (e.KeyCode == Keys.Left || e.KeyCode == Keys.A)

{

timerWalkRight.Enabled = false;

timerWalkLeft.Enabled = false;

timerIdleRight.Enabled = false;

timerIdleLeft.Enabled = true;

}

What this is doing is basically saying that if you are not pressing the buttons to go right or left, then your character will begin to idle in the direction that you were just facing.

If you would like to run your game now, simply click on the green arrow in the top left of the screen. (Image 6) Try moving around in different directions and take note of the animation.

You can download and watch the attached video below to get an idea of where you should be.

No that we can move left and right, it is time to make our character jump.

To do this we are going to start by making two new timers named timerJump and timerGravity. We will set the interval of these two timers to 100 and set Enabled to true.

Lets head over to the code and make three new variables under where the rest of the int variables are. The variables we are going to make will be:

int gravityspeed;

int jumpspeed = 11;

bool grounded = true;

Now you may be wondering what a "bool" is. A bool is essentially just a variable that allows for true or false values. Nothing fancy.

Once you have your variables down, go to where you wrote the movement code under the KeyDown property. Right under that code you are going to write the following (Image 1):

if (e.KeyCode == Keys.Up || e.KeyCode == Keys.W)

{

if (grounded)

{

grounded = false;

gravityspeed = 0;

}

}

Now double click on timerJump and copy the following code (Image 3):

if (!grounded)

{

pbMan.Top -= jumpspeed;

}

Now you can double click on timerGravity where you will write the following code (Image 2):

if (!grounded)

{

gravityspeed++;

pbMan.Top += gravityspeed;

if (pbMan.Bounds.IntersectsWith(pbGround.Bounds))

{

grounded = true;

pbMan.Top = pbGround.Top - pbMan.Height;

}

}

Feel free to modify the jump speed or timer interval fit your own needs.

This may be a little confusing and complex, so lets take a second to go over the code here.

1. KeyCode code - This code is is saying that when the computer receives input that you are jumping, and you are touching the ground, it sets grounded to false (because you will be off the ground) and sets gravity speed to 0 because you are not yet falling.
2. timerJump code - The "!" represents the opposite of what is written after it, so when we write "!grounded", it is a shorter way to write that we are not grounded. So this code under timerJump is telling the computer that if we are not touching the ground, then we ascend upward at the rate of our jump speed.
3. timerGravity code - This code is again saying that as long as we are not touching the ground, our character will begin to fall at an increasing speed until he intersects, or collides with the ground. When we collide, it sets grounded equal to true.

We now have movement code, animations, and jumping code. Almost done.

This step will not be a full walkthrough like the rest of the steps. I will instead be showing you different ways to add obstacles into you game and the code to get your player to react with them.

Harmful Obstacles

1. To make something that your character has to jump over or avoid, we are going to start with making a timer. I named the timer timerSpike and set the interval to 1. Make sure that you set Enabled to true.
2. After we have the timer, add a picture box onto your form. I named it pbSpike. Your picture could be anything. I set mine to a spike. Make sure that it is small enough for your character to jump over.
3. Once you have your timer and picture box, double click on the timer and copy the following code beneath it. (see image 1)

if (pbMan.Bounds.IntersectsWith(pbSpike.Bounds))

{

pbMan.Left = 39;

}

This code is saying that if pbMan intersects with the spike, then his location will be set back to the beginning of the level.

*Keep in mind that locations will vary depending on the size that you chose for your form.*

Fortunately, changing levels is very simple code. It really just comes down to if pbMan is at a certain point, then he will be moved back to the starting point and whatever is on the new level will be made visible and whatever was on the old level will be mad invisible.

There is no exact way to do this as this project is essentially a tool to help you create your own game. However, I have included the basics of what you need to do below. Unlike the rest of the steps, this code should not be copied exactly, it is meant to be expanded upon.

if (pbMan.Left >= 1000)

{

pbMan.Left = 39;

pbLevelTwoSpike.Visible = false;

pbLevelThreeSpike.Visible = true;

}

This is just how to reset your level once your character passes a certain point.

Throughout this Instructable, I have explained the key factors necessary for making a platformer game on Visual Studios C#. Throughout this we have gone over setting up your form, movement, animation, level changing, collision code, and more.

If you have followed all these instructions, you will have no trouble making your own game by adding on to this project.

Thank you for taking your time to read this.

Have fun coding!