Adding Events

We will start adding our events for this now. We have two mouse related events linked to the canvas, one of is when we click on the dummy images and second one is for the mouse move. Both of the events will be added in similar way, follow along.

Right click on the keyword ShootDummy and click on Go to Definition. This will take you straight to the code view for this WPF project.

As you can Visual Studio has automatically added the event in C# for us. We need to go back to the XAML view again.

Right click on the Canvas Mouse Move keyword and click on go to definition. This will once again take you to the code view.

Here you have its visual studio has added the canvas mouse move event for this WPF project.

WPF C# Programming –

We need two separate timers for this game to work properly. 1 timer to spawn and clear the dummies from the screen and 1 timer to animate the ghost as it leaving this earth after being shot by a pixel. Its really tragic.

Under the using System.Windows.Shapes; line the following to get access to Timer class in C#.

Using System.Windows.Threading;

This line will import the Threading classes to this project we will have access to the dispatch timer which will do all of the heavy lifting for us in this game.

Let start by adding the variables –

There is a quiet a lot of them isn’t it, have look at the code view below for more accuracy.

        ImageBrush backgroundImage = new ImageBrush(); // Background image holder
        ImageBrush ghostSprite = new ImageBrush(); // ghost image holder
        ImageBrush aimImage = new ImageBrush(); // aim image holder

        DispatcherTimer DummyMoveTimer = new DispatcherTimer(); // timer to move dummy images
        DispatcherTimer showGhostTimer = new DispatcherTimer(); // timer for the ghost images

        int topCount = 0; // top location counter
        int bottomCount = 0; // bottom location counter

        int score; // keep score
        int miss; // keep misses

        List<int> topLocations; // top location lists
        List<int> bottomLocations; // bottom location lists

        List<Rectangle> removeThis = new List<Rectangle>(); //  garbage collector for this game

        Random rand = new Random(); // generate random numbers

After the 3 image brushes you will see the two timers. Both of these timers are crucial for this game as we need them both to spawn and clear images also to give players feedback on their actions by spawning and animating the ghost on the screen.Image Brush is a useful class that paints using images its perfect for us because we need to have lots of images painted for this app. For example we need the background, the sniper score aim image following the mouse, dummy characters showing on the screen and ghosts flying away. We are starting off with 3 Image brushes classes first one is for the background, second for the ghost and third for the aim. If you are wondering where are the dummies? You aren’t wrong we have intentionally missed them because they will be used slightly later on.

We have 4 integers here topCount and bottomCount are position integers. They will simply hold how many spawned on the top location and how many spawned on the bottom. Score and miss are obvious so you keep score in one and keep how many dummies we missed in the other.

Top locations and bottom locations are list that can only hold integer values. There will 3 spots for the top and 3 spots for the bottom. Both of the these will hold the location values in them and then we will randomly select one or the other to spawn the dummies on to. Clever right.

Remove this variable is a List but its only allowed to hold rectangles. We will be using lots and lots of rectangles in this game so we need one of these lists to act as the garbage collector and remove the ones not needed by the game so the game doesn’t start becoming laggy. We want a smooth game play. Lastly is the random class. We are creating a new instance of the random class called rand. This class will help us generate random numbers and you will see how important that becomes.

Add the highlighted lines inside of the main window function right under the initializeComponent(); line.

This.Cursor = Cursors.None; this line will hide the mouse cursor from the screen, so we can only see the aim score when playing the game.

Background image is being set up and applied to MyCanvas as its background. The scoreImage is a image tag in the XAML this is why we can simply refer to Source instead of ImageSource as we did for the background image that’s a instance of the image brush class same as ghost this is why ghost will also have the ghostSprite.ImageSource = then link to the image inside of it.

After the ghost sprite line, we see the 3 lines for the DummyMoveTimer we created earlier. In this section we are giving it a Tick event called DummyMoveTick, dummy move timer will have a random interval. If you look at the code closely, we have added the random number generator inside the TimeSpan.FromMilliseconds() function. This timer we will get a random number between 800 and 2000 so every time the game lots the speed of the dummy movement will be different. Lastly, we start the timer.

Ghost timer tick follows similar properties we have given it a tick event called ghostAnimation, the interval will run every 20 milliseconds so this one will not get any random input and then we start the ghost timer. When typed ghostAnimation or DummyMoveTick visual studio will give you a red line under them because it cannot find the

The last two lines are the location numbers for the top position and bottom position. These positions will be used to spawn the dummies and they are not for the Y axis they are all for the X axis. We already know the Y location of the dummy images but it’s the X or Left location of them need to change. There are 3 doors on the drop and 3 doors on the bottom the Y position will be the same for all bottom ones and all top ones. Only the x position will change. If this is difficult to understand you will see it in action a little later.

Add the following events and function to the code. The first two events are the timer ones you have seen we types in before and the last one is show dummies a custom function we need to use to make this game work. The first two are events so they are pretty much standard to what visual studio uses with timers and third one is the one we made to use with this game. Let’s see how this will work for us

Show dummies function takes in 4 arguments which means the x, y, skin, and tag variables will be passed into this function and this function will set the position for the next dummy in the x and y, chose a skin for it and set a tag to say which location this dummy will be placed it. Instead of hard coding them in there we have take the route to make this code more efficient and readable.

See the source code so far below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


using System.Windows.Threading; // add this for the timer

namespace snipe_the_dummy
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ImageBrush backgroundImage = new ImageBrush(); // Background image holder
        ImageBrush ghostSprite = new ImageBrush(); // ghost image holder
        ImageBrush aimImage = new ImageBrush(); // aim image holder

        DispatcherTimer DummyMoveTimer = new DispatcherTimer(); // timer to move dummy images
        DispatcherTimer showGhostTimer = new DispatcherTimer(); // timer for the ghost images

        int topCount = 0; // top location counter
        int bottomCount = 0; // bottom location counter

        int score; // keep score
        int miss; // keep misses

        List<int> topLocations; // top location lists
        List<int> bottomLocations; // bottom location lists

        List<Rectangle> removeThis = new List<Rectangle>(); //  garbage collector for this game

        Random rand = new Random(); // generate random numbers

        public MainWindow()
        {
            InitializeComponent();

            this.Cursor = Cursors.None; // hide the mouse cursor

            //set up the background image by assigning the imagebrush to the canvas background
            backgroundImage.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/background.png"));
            MyCanvas.Background = backgroundImage;

            //setting up score aim image for the player
            scopeImage.Source = new BitmapImage(new Uri("pack://application:,,,/images/sniper-aim.png"));

            // setting up the ghost image
            ghostSprite.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/ghost.png"));

            //set up the dummy moving timer
            DummyMoveTimer.Tick += DummyMoveTick;
            DummyMoveTimer.Interval = TimeSpan.FromMilliseconds(rand.Next(800, 2000));
            DummyMoveTimer.Start();

            // set up the ghost animation timer
            showGhostTimer.Tick += ghostAnimation;
            showGhostTimer.Interval = TimeSpan.FromMilliseconds(20);
            showGhostTimer.Start();


            // add top location tos to the list these are in pixels
            topLocations = new List<int> { 23, 270, 540, 23, 270, 540 };

            // add bottom location to the list these are in pixels
            bottomLocations = new List<int> { 138, 128, 678, 138, 128, 678 };
        }

        private void ShootDummy(object sender, MouseButtonEventArgs e)
        {

        }

        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {

        }

        private void ghostAnimation(object sender, EventArgs e)
        {

        }

        private void DummyMoveTick(object sender, EventArgs e)
        {

        }

        private void ShowDummies(int x, int y, int skin, string tag)
        {


        }
    }
}

We have the variables set up and the main window function is loading all of the default settings we want for this game. If your code looks different than this, check where its different and correct it.

Now that we have the back bones of this project added and we are close to adding the interactivity required to make it work. Go to Page 3 to start coding the events and function