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

Full Video Tutorial –

Images for this game –

Download the space shooter game tutorial image files here

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.

Click on to create the new project

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

<Window x:Class="space_shooter_game.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:space_shooter_game"
        mc:Ignorable="d"
    Title="Space Shooter Game" Height="615" Width="540">
    <Canvas Background="LightBlue" Name="MyCanvas" KeyDown="onKeyDown" KeyUp="onKeyUp" Focusable="True">

        <Rectangle Name="player" Height="50" Width="60" Fill="Yellow" Canvas.Left="222" Canvas.Top="495"/>

        <Label Name="scoreText" Content="Score: 0" FontSize="18" FontWeight="Bold" Foreground="White"/>
        <Label Name="damageText" Content="Damage: 0" FontSize="18" FontWeight="Bold" Canvas.Right="0" Foreground="White"/>

    </Canvas>
</Window>

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 –

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.

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.

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.