In this tutorial we will show you how to make a space invaders game in visual studio using WPF and C# programming language. We have done a space invaders game tutorial in windows form before and this will be fun to understand how some of the syntaxes has changed and how the work flow works in WPF style app development or game development. The old space invaders game had an update with this tutorial we show you how to use different graphics and player images along with bullets coming towards the player and variable speed for the invaders. These little features make the game more challenging and interesting play also its far more interesting to make. This tutorial took a while to figure out on the how to spawn and intereact with objects on the scene but we’ve done it and hope you find it useful.

Lesson objectives –

1. Create a fun space invaders style game in WPF with C# programming
2. We will use nested loops in the timer objects to identify and instruct game objects
3. Create custom functions to enhance the efficiency of the program
4. Key board control along with moving left and right we can shoot bullets at enemies
5. Determine how to win or lose the game
6. Change enemy speed during run time
7. Shoot back at player object with random bullets to make the game more interesting and challenging
8. Use dispatcher timer to create the main game engine with all the rules and logic

Video Tutorial –

Download the space invaders WPF game images here

Start Visual Studio –

Make a new project name it space invaders and Click OK. Make sure you have C# and WPF App selected on the window.

This is the blank project so far, before we go into making changes to the XAML code lets add the images to this project.

Right click on the space invaders name in the solutions explorer and hover on add and click on new folder. Name this folder images and press enter

Right click no the images folder, hover on the add and click on exisiting item.

Make sure you have downloaded and EXTRACTED the zip file in the hard drive. Visual studio will not be able to open a zip file only folders. Go to the folder where the images are extracted and change the file type to image files. Now select all the images and click ADD.

#

Here all of the images are now added inside the images folder.

Make the following changes to the XAML file now.

We need to delete the GRID tag from inside the XAML code and add our CANVAS before that we need to add a few changes to the title tag.

<Window x:Class="space_invaders.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_invaders"
        mc:Ignorable="d"
        
        Title="Space Invaders by Moo ICT" Height="500" Width="800" FocusManager.FocusedElement="{Binding ElementName=myCanvas}">
    <Canvas Name="myCanvas" Background="Black" Focusable="True" KeyDown="Canvas_KeyisDown" KeyUp="Canvas_KeyIsUp">

        <Label Foreground="White" Name="enemiesLeft" FontSize="16" FontWeight="ExtraBold">Enemies Left:</Label>

        <Rectangle Name="player1" Fill="White" Height="65" Width="55" Canvas.Left="568" Canvas.Top="394" />
    </Canvas>
</Window>

Title=”Space Invaders by Moo ICT” Height=”500″ Width=”800″ FocusManager.FocusedElement=”{Binding ElementName=myCanvas}”>

In the title tag first, we added Space Invaders by Moo ICT, height and width remained the same. We added that focus manager tag inside of it because when the app is loaded, we want the app to mainly focus on the canvas.

<Canvas Name=”myCanvas” Background=”Black” Focusable=”True” KeyDown=”Canvas_KeyisDown” KeyUp=”Canvas_KeyIsUp”>

This is the canvas start tag, in this tag we have set the name property to myCanvas, give it a black background, add focusable to true to its always on when the game is loaded. We have two events linked to this canvas Key down and key up. As you have guessed both of these events will trigger when you press and release a key on the keyboard.

<Label Foreground=”White” Name=”enemiesLeft” FontSize=”16″ FontWeight=”ExtraBold”>Enemies Left:</Label>

This tag above will add a label to the canvas. Foreground colour changes the text colour so we are setting it to white. We set the name for this label to enemiesLeft so we can call it and change the text from C# script. Set font size to 16 and make it extra bold.

<Rectangle Name=”player1″ Fill=”White” Height=”65″ Width=”55″ Canvas.Left=”568″ Canvas.Top=”394″ />

This rectangle is the player object, name this rectangle player1, fill set to white, height is 65 and width is 55. Canvas left and canvas top relaxes to the x and y axis so set left to 568 and top to 394.

This is the look so far into the game, we don’t need to do anything else to the XAML code all of the rest will be added from the C# script for this game. Let’s get to it.

Go to page 2 to start adding events to this game.