× Main Menu

WPF C# Tutorial – Create a space battle shooter game in Visual Studio

In this tutorial we will make a similar game to the fighter jet shooting game tutorial we did in windows form application but this one is in SPAAACCEEE, also its made in the new WPF format. This tutorial uses the space shooter redux package from Kenny Assets website (https://www.kenney.nl/assets/space-shooter-redux). You should definitely check it out as there are lots of useful game assets available there, we will provide some of the sprite from this package that’s being used in this tutorial below. This will be a fun tutorial to do because we are in space shooting alien space shits I mean if that’s not fun I don’t know what is. Let’s take a look at the learning objectives for more details–

Learning Objectives

  1. Create a space battle shooter game in visual studio with WPF and C# programming language
  2. Spawn enemy ships in the game and move them towards the player
  3. Move player left and right only inside the game boundary using the keyboard
  4. Use image brush to show pictures as backgrounds, enemy and player
  5. Use star background and repeat them in the canvas using C# programming
  6. Keep score and damage in an integer
  7. Check for collision between the player & enemy, enemy & bullet real time
  8. Dynamically add and remove objects from the Canvas

Images for this game –

Download the space shooter game tutorial image files here

wpf c# space shooter tutorial game image file thumbnails

These are the game sprites we will use to make this game. From 1 – 5 PNG files are the enemy space ships, player image labelled and purple.PNG image will be used as the repeated background image for this game. PNG files has really good transparency so it helps using them for the game so it looks better without over shadowing the background.

Create the new project WPF C# Project in Visual Studio. Make sure its under the .NET Framework

In this tutorial it using Visual Studio 2017 version, you can use any version of your choice and it will work the same way.

wpf c# space shooter project screen

Click on to create the new project

wpf c# space shooter default screen

This is the empty screen of the project. The top blank screen is the preview window and the bottom codes you see are XAML code for this window. We can add the components we need for this game inside the XAML window.

Make the following changes to the XAML window in the bottom

 

Changes made to the XAML

TITLE – inside the title tag change the name to Space Shooter Game, this will show up on the title of the window. Change the height to 615 and width to 540

We’ve deleted the GRID tag from the default XAML code and inserted the CAVAS tag. CANVAS is better at rendering and moving objects than a GRID so we generally use CANVAS for a when we want to make a game in WPF C# projects.

This canvas tags its own tags inside of it, background is set to light blue, name is set to “MyCanvas” key down and key up are events that will be coded in C# later on for key down we wrote OnKeyDown and for key up we wrote OnKeyUp. Last tag is the focusable its set to true. This tag will allow us to solely focus on the Canvas when the app is loaded.

Everything this game will have will be inside of the Canvas Tag.

So far, we have one rectangle and 2 labels inside the Canvas.

Rectangle is the player character it has a name “player”, height 50 and width 60 pixels, background colour is set to yellow, left position is 222 and top position is 495.

After that we have two labels, one will be used to keep score of the game and the second will be used to keep track of how much damage is being done to the player.

Add the images to the project –

wpf c# space shooter add a new folder to project solutions

Right click on the project name in the solutions explorer, hover over add and click on new folder icon. This will add a new folder to the project. Name this folder images.

wpf c# space shooter tutorial add images to the folder

Right click on the images folder, hover over add and click on existing item. This will open the dialog box below to select the images from an existing folder.

wpf c# space shooter tutorial select images from the browser c# wpf space shooter tutorial images added to the images folder in the solutions explorer

Browse to the folder where you extracted all of the images from the link in tutorial. Change the file type to Image files next to the file name section, this will show all of the images in that folder. Select all the files and click on add. Once done you will see all of the files now added inside of the images folder.

Note- it’s not necessary to add images folder and add the images inside of it, but as a beginner programmer it’s good to have this practice then it will make your projects organised and easy to follow. As a professional programmer these things may seem normal but it’s good to get into practice of organising your project files and codes appropriately.

Go to the next page to start adding events for this game.




2 responses to “WPF C# Tutorial – Create a space battle shooter game in Visual Studio”

  1. Daniel Rymes says:

    Having difficulties with URI definition. The original version failed during the build. Code compiled fine after replacing with relative version: new Uri(@"../images/player.png", UriKind.Relative). However, app is breaking, because it can’t find the image in …\bin\Debug\images\purple.png.

    Wondering if the issue could be related to URI syntax of if something’s wrong with the build process (e.g. missing/wrong item csproj). Any fix suggestions?

  2. Anhar Ali says:

    Hi Daniel, you made the images folder inside the debug folder. This folder needs to be in the main application directory. In page 1 of the tutorial it shows how to make the folder inside the solutions explorer, and then you can import the images into it.

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

%d bloggers like this: