How to Make a Mario Style Side Scrolling Game in Windows Form and C# in Visual Studio
ฝัง
- เผยแพร่เมื่อ 25 ม.ค. 2025
- Download images here - www.mooict.com...
The written tutorial is also online on the MOO ICT website, you can check it out to learn more about the game development process. You can check the code there too. We will cover everything for the game in this video.
Welcome to this new tutorial from MOO ICT, I am very excited to show you my new project and this one was quiet an accomplishment from my point of view, because it took me forever to figure it out all the while trying to keep the core concept as simple as possible for beginner programmers. In this project we will make a side scrolling platform game similar to mario and sonic but not to those legendary scales.
In this project you will learn how to make a simple side scrolling game using windows and C# programming only using Visual Studio and the system default components.
We will make this game using picture boxes, label and timer. We will make out functions inside the C# and make the level move left and right with the character.
To demonstrate this method, this game requires the player to go the end of the level to collect and key and then come back to the beginning of the level and open a door to complete the game, during the game play you can jump on platforms, collect various coins. There are also pitfalls, if you fall off the platforms then you will end the game, luckily we will code a game restart function inside of it too so when that happens you can start the game again and try to complete it.
I hope this small project comes handy for your own, happy programming and moo out.
Download the project here github.com/mooict/Side-Scrolling-Platform-game-in-Windows-Form
thanks you
Thanks!
32:23 Spicy nope PictureBox.. :D Thank you for the video!
Thank you for the tutorial. loved it
Amazing Lesson Thanks Brother
My pleasure!
i have a problem. at 26:44 everytime i move my character the coins is still following me. any help for that? thanks
Hi, do the coins have their tags set up in the properties?
@@mooict yeah, im sorry it's not the only coin that following me. even the the platform is following me when i moving . at 26:44
@@mooict i copy correctly your code but i don't know what is the solution to this problem.
@@mooict pls help
The idea is platforms, coins background should move on the opposite direction to the player. If you have tagged all the elements properly then you might want to check MoveGameElements function and make sure the + and - is in the right spot as the tutorial
ur the goat bro
Hi, could you please help me? The background isn't moving just like 21:51 even though I followed your steps.
I know this was 2 months ago but I had the same problem. The fact is that his website and videos are both different in small ways. You have changed the forms background to the image, what you need to do is make a picture box and put the background into that. Make it the right size etc and then right click it and send it to the back. No need to delete all the other images to add it.
You could set force to 0 when player bounds intersects with bounds of platform and else force is setting to 8 it would remove glitching maybe.
It didn’t work like that for me unfortunately. The timer ticks kept glitching the picture boxes. There is another way force redraw of the form components to stop it from glitching as much.
@@mooict Don't use picture boxes - draw directly into the form and stuff like this wont happen. Also, enable double buffering in the form properties to prevent flickering.
@@sirgouki6207 Yea I agree, I have been moving more towards the paint events and drawing the graphics directly to the form now. You can do a lot more this way and have way more control of the components than just using picture boxes. 👍
I would like to follow along with this tutorial for a project for college. How would I go about changing the background and sprite image?
You can find all of the images on the website. Simply create your own images with the same size as these and you will have re-skinned this game. Although if it's for an assignment I would suggest you add your own functions and features to this tutorial so it won't be plagiarised directly and it will be something that you would have created.
@@mooict Awesome, thanks for the heads up. Could you maybe help describe different functionalities I should look into? Maybe a certain color coin could trigger a power-up or trigger a sound playback format? I'm only week 1 into my programming class at full sail. Thanks for all the help!
I suppose you can mix and match some of the tutorials together. There are couple of tutorials I've done where you have enemies in the games so take what you need from them and you can add them to the final game. It will be a fun challenge for you to do and may be the final one may even surprise you.
I would like to upload the game online. Is it possible to do so? Is it developed for a .net or .net core platform?
My background doesn't go back to the start it just keeps going to the right, how do I fix it?
Great! Thank you!
good stuff i know iam late but please how can you make some spikes or stuff that will result in taking life away
Plz could you do some tutorials on getting started with unity. They don't have to be too complex because really I'm just using games development as a way to learn programming in general and am not necessarily going to go into the gaming field but I think it would be good to at least give unity a go. Also some mobile app development stuff would be useful.
I will try definitely. There are some great channels like brackeys that do nice and simple unity tutorials.
How to download the archive of this project?
@Moo ICT
I got a big problem on placing Picture box above Picture Box here... When I add a Picture box as Background and then add new Picture box as Player over it, then empty area of Player Picture box will shown blank color instead of showing the background... So it's like I can't stack Picture box over Picture box (That will make it looks bad), Ima using PNG picture with erased background for the Player that I hope the picture box behind Player will shown up...
(Ugh idk how to explain it, my English is bad...)
Hi Sultan, unfortunately the picture box doesn't support transparency natively you have the do a slight work around to get it working. This is why I am using square platform and square player. I will cover how to work with transparent images in the future.
@@mooict Thank you ~~~ You answered my Question so clear... I thought that My Visual Studies version isn't Up To Date or My device doesn't support for it... Thanks dude...
I have a problem, I hope you can answer me because I need it, the problem is that, when I run the program, the monitor (player) crashes, and I checked the code again and found no errors, what could it be? please answer
I have uploaded this source code GitHub did you get a chance to see the project from there? Hopefully that could help to see what’s causing the crash.
Done it. Thanks.
Im new to visual studio and i was told to copy a game tutorial to learn C# but when i made the project, there was no form that automatically appeared
Can someone please help me, my toolbox also has nothing in it and idk what to do 😢
Did you make a Windows Forms Project in visual studio? Double check the project type and then you will see the form pop up when the project is created.
txtScore does not work for me and has a redline underneath saying does not exist did I miss something?
Yea you need to name the label to txtScore in the properties window
Moo ICT ah thx gonna rewatch it to find it tbf pal you're helping me get through this coding quite easily appericate the timely response to
No problem Luke, happy programming 👍
I have a question. I hope you can understand my english :) when I press on the jump button which is space it jumps little or too much according to time I'm pressing on space button.
Therefore character goes too high or too low It's hard to adjust it. as I see from your videos you don't have this problem. same problem also happened on flappy bird game that you made.
I checked my codes and everything seems same as yours. I hope you see my comment and help me with that .
Me too. same issue as you.
@@jetarinpattanajirarutchago5606 hit me back if you find an answer bro. For the last 5 application I made it is still same. I believe it is because we're using c# form it is not a game engine I thing that is why tihs problem occurs.
im also having same problem need to submit my coursework in next 2 hrs
will be glad if anyone can tell the solution quickly
With last Visual Studio 2019 (ver 16.10.2) i noticed the coords are changed from "," to ";" (so its not more 640,520 but now 640;520)
And you choose for easy game reset way with
Form1 newWindow = new Form1();
newWindow.Show();
this.Hide();
causes very different result: new window popped up, old window didn't hide - and - the MessageBox where i fell off showed up again. This causes forever loop with endless MessageBox messages and more windows are opened. I cannot get out the mess and so i must force close whole process. The function this.Hide(); seems not work.
Also function CloseGame has no result: there is nothing linked in the game. It was not clearly told in the tutorial.
It means this tutorial end not very well with latest Visual Studio 2019. (it's now 1 year later from video)
I recommend check the problem with last Studio and might need updated tutorial. Also, video code is different from text in your mooict website. That is actually not so great with different, it can confuse little new students why video is going different.
Try match tutorial on website with this video, please. They are now not very equal, there are some codes added and RestartGame is missing on website.
Hi, Yes indeed the website needs updating. I have included this tutorial on github with the video version. hopefully you can use that on your project.
Absolutely brilliant tutorial. i have had a single problem which is that all my objects are shifted to the left when i run the application so they dont line up with their placement in design view. not a clue what caused it. if anyone can offer any assistance it would be greatly appreciated.
for some reason, every time I start the program it just automatically flashes a black screen and goes back to the code
Hi ,
The width size become 1386 from 2000 . I try to type 2000.480 but after I typed 2000.480 it becomes 1386.480.
In this case what should I do ??
Is it the width of the form or the picture box
@@mooict it's the widht of the form.
In few words, i can't make it that much bigger that show all the the background . What I should do in this case ??
@@anamulchowdhury8005 it must be your screen resolution
I had the same issue 😢
Why my Visual Studio 2022 app the form just stuck at 1900. ? 🥺
hey, do you know how to step through code in visual studio while also inputting key presses? I'm trying to debug my code but cant seem to input anything like key presses while the code is being stepped through except f11 which I'm using to step through the program
door and key doesn't exist in the current context... What can i do ?
I think you didn't name those picture boxes to door and key. Check the names of them in the properties window.
Is there a way to prevent going through the platform?
You need to perform collision detection against the sides and bottoms of the platforms, and stop the player's speed in the appropriate direction to prevent phasing through objects like that. Code to do so would be too complex to type out in TH-cam's crappy comments section, but you can use the code (it may need minor changes but it should nearly be 1:1) that is used in the Game Maker tutorials for making a Zelda clone by CodeWorkshop, even though the language is different the way its accomplished in C# is nearly identical.
Note: I say collision detection against the sides and bottom, but you actually just need collision detection against the entire rectangle the platforms exist in, and to handle it properly, which the code I mentioned will do. I suspect this tutorial is just using an if against the top of the rectangles, something like "if(player.y > platform.y)" as opposed to what a normal game would be doing.
hey im not really sure i understand what the variable "force" does, could you help please? thanks
Its length of the jump, as long as we have value in force player will move up with the jump and when it's below 0 jumping will be set to false.
hi do you have a plain text version of the code from your website? I'm asking as id like to be able to search for specific things in the code, such as "PictureBox" to see how many times it appears and where it appears, but i try to do that on your website and it doesn't work. thanks
I'm working on making them text friendly, will be updating soon.
Moo ICT thank you :))
Hey, When I run it the form is shrinked and my game elements( platform, key and door) are not where I put them. I had the same problem with the breakout game, altough I set the size in the properties. Do you have any ideas what is the problem?
I'm not sure what can cause this problem. You can make a new project and see if it does the same thing.
is the player actually moving? theres a variable called playerspeed, but earlier in the tutorial you said that the player doesnt move and only the background moves to meet the player. thanks
Hi yes, the player moves slightly forward and backwards in the game. This is why we using the playerSpeed integer. Once the player makes to the edge on the right or left then the background moves. This gives the game a little more depth to it's usability.
@@mooict ahhhh thanks
hi, could you do the side scrolling with the form instead of with the image as background? thanks, u are the best :D
It's not possible to side scroll the form. It's the base of the game you can only scroll components inside of it.
@@mooict you could make a panel and it will scroll and put in there some platforms and items that you want to scroll except player and score text and then that panel has background image and size the same size as the bi and then transparency may work :)
you could make a panel and it will scroll and put in there some platforms and items that you want to scroll except player and score text and then that panel has background image and size the same size as the bi and then transparency may work :) try it maybe it works I'm just imagining shshshhhhshshsh
That seems like a neat idea 💡 haven’t tried it yet, I will tho thanks 😊
@@mooict You can use GDI+ on the form itself, it has been possible since at least Visual Studio Community 2017.
hey, so when you jump at the bottom of the platform, the game teleports you to the top of the platform. Is there a way to fix this?
That's actually what the code is doing at the moment. It's using the intersect with method to check if the player hits another picture box called platform then it will place the player on top of the platform.
Yes, but because of that, if the player hits the bottom of the picture box he will teleport to the top of it. The player should bounce back if he hits the bottom of the picture box, not go through it.
Hi I haven't figured out how to do that with a platform game such as this in Windows form yet but you can check out the WPF PAC Man game tutorial that uses wall collision where the player stops when it touches the wall.
@@florissmulders3973 I don't know if you're still interested but basically what you need to do is that in the line of code that makes the player stand on the ground, you need to make it so it only works if you're touching the top part of the platform. I know my explanation is a bit weird but if you're still up to it I could show you in detail how it's done
nice tutorial. wall collision sucks a little tho
The score label no longer works properly. The label scrolls with the rest of the level. This is from the source code I downloaded from github btw. I copied the code into my own project and the same issue occurred
Hi, you can comment out or delete the txtScore.Parent line inside of the Form1() constructor to make it stick to the top right corner of the screen. See the example blow.
public Form1()
{
InitializeComponent();
//txtScore.Parent = background;
}
This will fix the problem of the label scrolling with rest of the level. I've also updated the GitHub Repo with the changes. Thanks for letting me know. :)
Bro it keeps flickering for me plsss helpp everything works but the screen keeps flickering
The flickering is part of the game in this tutorial. I will be releasing a fix for it soon on the channel stay tuned 👍🏽
I did this project but my player keeps falling through the platform. I am thinking somehting is wrong with the code?
Check the timer event code again. Inside of the timer event it's checking if the player has landed on a platform and so on.
@@mooict Thank you I will check it
@@mooict How to download the archive of this project?
bro only problem with your videos is very less sound otherwise very nice videos i like them
Why aren't you using Monogame or Unity?
I love working in unity, but also like to make these games the non conventional way it's fun to do and I think it helps with teaching some of the component programming in C#.
How about using a Game Engine?
I whole heartedly support using a games engine like Godot, or unity or even game maker. The aim for this project was to make it ourselves from scratch without using game engines to learn how to control components using C# in Windows forms.
x variable shows some error
What's the error?
hello thanks you pls help me :( no grafick
One criticism about this video is that your voice is very low and sometimes you are mumbling. NOTE: My Headphone volume is maxed.
Insane
thx
thanks
how would you publish this on google app store? or would you need to convert it to xamarin?
goRight == true ?
That seem illegal
How do you mean?
how to make it like that by using VB programming language?
can you send me the code?
The door keeps on moving along the player although it's a picturebox and I've followed your video tutorial. Please see the following pictures of "MainTimerEvent" and "MoveGamesElement": ibb.co/Jt8p2Kh
and ibb.co/k8vLcR4
Did you put a door tag on the door picture box?
@@mooict yes, on the tag as well as the name.
@@mooict Any idea?
@@TVMaryam the code posted on there is correct. I can't seem to figure out what could be wrong here. Can you check if there is any space left in the door picture boxes name or tag?
5.01 how u strach wtf ???????????????????
supreme :)
That white boarder on the coins tho. 🤢🤢🤢
Having a scroll able picturebox as they background doesn't allow for transparency at all. One way to remedy this would be to change the back colour of the coins to dark blue so it kind of matches up with the background.
Okay please get to the coding aspects right away; I came to learn the code not see the map set up.
Transparent background for the coins
public Form1()
{
InitializeComponent();
foreach (Control x in this.Controls)
{
if (x is PictureBox && (string)x.Tag == "Coin")
{
BackGround.Controls.Add(x);
x.BackColor = Color.Transparent;
}
}
}