In this tutorial we will be creating a fun yet slightly complicated for beginner’s game called Sniper the Dummies. This will be sniper score shooter game where you have the sniper scope as your main aim and when different dummy characters come up you shoot them and once shot the dummies ghost will float away from the screen. This may seem a bit much but this tutorial will showcase the transparency capabilities of WPF and its more fun to have a ghost float away than the image simply changing positions. This game uses lots of little tricks that will hopefully you give a great insight into creating fun and engaging apps for yourself. In this game we will be mouse over, mouse click, timer events and our custom function that will pass through values and make the game more efficient. So, let’s get started on it. Download the images for this tutorial below and make sure you have unzipped the files to a folder ready to use. You cannot import image files into visual studio when they are compressed inside the zip compressed files. So extract them to a location where you can find it later and follow along with the tutorial.

Lesson objectives –

• Create a sniper shooter game in Visual Studio using WPF C#
• Use CANVAS in WPF to make a point and click game
• Use Mouse Over, Mouse Click, Timer Tick and Custom Functions to make this game
• Use various data types such Int, String, Boolean and more
• Use for each loop to add and remove objects from the canvas
• Dynamically add objects during run time and animate them
• Keep score and misses of the game
• Use customer functions with arguments passed over to make the code efficient

Video Tutorial –

Download Snipe the Dummies Image Assets for this game here

This game will made in Visual Studio 2017 but you can any version to follow along. To begin the game lets first make a new project. Name this project “snipe the dummy”. Make sure you have WPF C# select as the project type and click OK.

This is the default look of the project we just created. Let’s make some changes to the XAML code in bottom of the screen. Red outlined part of the screen below.

Below are the changes we made to the XAML window. Its explained after the code view.

<Window x:Class="snipe_the_dummy.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:snipe_the_dummy"
        mc:Ignorable="d"
        Title="MainWindow" ResizeMode="CanMinimize" Height="450" Width="800" FocusManager.FocusedElement="{Binding ElementName=MyCanvas}">

    <Canvas Name="MyCanvas" Focusable="True" MouseLeftButtonDown="ShootDummy" MouseMove="Canvas_MouseMove" Background="LightBlue">

        <Image Name="scopeImage" Height="60" Width="60" Canvas.Left="301" Canvas.Top="275" IsHitTestVisible="False" Panel.ZIndex="999"/>
        <Label Name="scoreText" Content="Score: " FontSize="14" Foreground="Black" Canvas.Left="660" Canvas.Top="65"/>
        <Label Name="missText" Content="Miss: " FontSize="14" Foreground="Black" Canvas.Left="660" Canvas.Top="20"/>

    </Canvas>
</Window>

First the bold lines inside the title tag

Title=”MainWindow” ResizeMode=”CanMinimize” Height=”450″ Width=”800″ FocusManager.FocusedElement=”{Binding ElementName=MyCanvas}”>

First Resize mode can minimize means that this window will not be able to maximize. We don’t want the players to change the height and width of this window so we will only allow them to minimize the window. Focus Manager option basically keeps the Canvas in the main focus the app is loaded.

Next deleted the <GRID> </GRID> tags as we need to work with CANVAS tags. Grids are good but they do not allow the flexibility of a game and CANVAS has a great control structures for a game that we are making.

Inside of the canvas tag we have several options active lets take a look at them

<Canvas Name=”MyCanvas” Focusable=”True” MouseLeftButtonDown=”ShootDummy” MouseMove=”Canvas_MouseMove” Background=”LightBlue”>

This canvas has a name MyCanvas and its focusable when loaded. Mouse button down event will be used for when we shoot the enemy and mouse move event will be used to have the sniper scope image follow the canvas. We are also setting the background to light blue. You can change this to any colour you want but since we need to have a click registered to this canvas we need to have a background attached otherwise visual studio will not register the clicks.

<Image Name=”scopeImage” Height=”60″ Width=”60″ Canvas.Left=”301″ Canvas.Top=”275″ IsHitTestVisible=”False” Panel.ZIndex=”999″/>

This is the image we will have follow the mouse cursor across this canvas. This has a name scoreImage we will reference that in the code later, its height is 60 pixels and width is 60 pixels. Canvas LEFT and Canvas TOP are its X and Y position. This part is important make sure that you have isHitTestVisible set to false. Because we the image will follow the mouse and we need the mouse to click on other objects it wont register clicks on any other object if this one is only one layer down from the mouse. By disabling its hit test visibility the mouse then can click through this object. It will have served it purpose by following the mouse without getting in way of the game play. Panel.ZIndex means the layering of the object we set the score to 999 because we want it to be on top of everything. WE don’t want the score to go behind the other dummy images or ghost images on the screen. Take a look the at the app now.

Importing the Images –

Make you have downloaded the images for this game from above. Extract the files to a folder somewhere and follow the instructions below on how to import images into visual studio.

Right Click on the name of the project inside the solutions explorer “snipe the dummy” hover over Add -> Click on New Folder. This will add a new folder to the Solutions explorer. Rename this folder to “images”. Now to add our pictures inside of this folder we have to import them through visual studio. Right click no the images folder now

Hover to Add and Click on Existing Item. This will open the dialog box you see below.

First change the file type selection below to Image Files and navigate to the folder where all of the images are. There should be 7 images all together. 4 dummies, 1 ghost, 1 background and 1 score image.

There you go all of the game assets have been imported to the project. Note – Save the project as frequently as you can.

Go to Page 2 to start adding events for this game.