WPF C# Tutorial – Create a fun Balloon popping game in visual studio
- Subject: WPF C# Tutorials
- Learning Time: 2 hours
In this tutorial we are going to make a fun and simple balloon popping game in visual studio with WPF C#. This game the similar to the other balloon pop windows form game was created earlier for the older version but we have improved this tutorial and made it for the new WPF forms using C# programming language. Rules of this game is simple spawn balloons off screen, animate them towards top of the screen and then players can click and pop them with a sound effect playing in the background. It does get challenging after you have popped 20 balloons and it will speed up the balloons so you need to act fast. Sounds fun, lets get started.
Lesson objectives –
- Create a simple balloon popping game in WPF forms using C# in Visual Studio
- Use keyboard and mouse click events in the same form
- Use timer and timer event to animate objects
- Randomly spawn objects to the screen and remove them when click on
- Use custom images and backgrounds for the WPF app
- Import MP3 files and play it inside the game when balloon gets popped
- Create a custom game reset function to play again when it ends
Load up Visual Studio and Create a new project called Balloon Pop Game.
Click ok to start the project. Make sure you have saved it somewhere you can find the project folder later on.
This is the default view of the project. Make some changes to the XAML code where highlighted in the screenshot.
Title="Moo ICT Balloon Pop Game" Height="600" Width="450" KeyDown="canvasKeyIsDown" ResizeMode="CanMinimize">
<Canvas Name="MyCanvas" Focusable="True" MouseLeftButtonDown="popBalloons" Background="White">
<Label Name="scoreLabel" FontSize="24" Content="Score: 0" Foreground="black" FontWeight="ExtraBold" Canvas.Top="527" />
In the title part add Moo ICT Balloon Pop Game or any name that you want to make sure its between the double quotation marks. Set the height to 600 and width to 450. Add a keydown event called Canvas Key Is Down and Resize mode should be set to can minimize. We don’t want to resize the window at all so we only want windows to be able to minimize it.
After the title we deleted the GRID tag and added toe Canvas Tag to it. Inside the canvas opening tag we have several properties.
First the canvas tag has a name MyCanvas, its set focusable to true, it has a mouse down event called pop balloons this event will trigger when we click on the balloons on the screen. After that we have set white background colour to the canvas.
Inside the canvas we have only 1 element which is the label. This label will show the score for this game. This label has a name scoreLabel, font size set to 24, content meaning the text inside of it is “Score: 0” font colour is black and font weight is extra bold and the position is the label is 527.
Lets add the events for this game
Right click on the canvas key is down keyword and click on the go to definition option. This will take you to the code view and add the canvas key is down event to the code.
See its been added by visual studio. Now we need to the same for the mouse click event.
Right clock on the pop balloons keyword and click on the go to definition option in the menu
The second event is now added too. Awesome let’s get to work. We need to several of our own event and functions.
See how we added 2 function and 1 event to the above. The start game and reset game are functions and the game engine is the event.
Let’s import the assets for this game
Right click on the balloon pop game in the solutions explorer, hover on add and click on new folder. Name this folder files and press enter to confirm.
Right click on files, hover on add and click on existing items.
Find the folder where you extracted the assets downloaded from MOOICT. Change the file type to all files, highlight all of the assets from inside the folder and click on Add.
All the game assets are now included with this project.
Go to Page 2 to start programming for this game