How to make a Windows Store game with C# and XAML, part 3

This guest blog post is the final post of a 3-part series written by Windows developer Jani Nevalainen. Please see the original 3rd post on Jani’s blog here, and refer to Part 1 here and Part 2 here.

Moving the ship
When we’re doing a universal app, we have to take in account that there are several possible ways for users to control the game. Phones and tablets have touch screens, but on desktop most of us still prefer to use a keyboard to play games.

For doing the movements, we need to be aware of the screen dimensions. Add these member variables to App.xaml.cs class:

The method moves the ship the amount specified in the calling function (in pixels), and checks that it doesn’t go over the boundaries from left or right.

Next we’ll capture the keyboard in case the user is playing with a desktop machine. Let’s create the event handler for key events. Open GamePage.xaml.cs constructor, and add the following after InitializeComponent():

Star field background
We had one type of particle engine on the start screen, but I think we need something of a more traditional kind to create sense of moving for the ship. First we need to add one using –statement to the top of the file:

Now if you run the game, you see how stars are falling in different speeds from the top of the screen, creating sense of depth and speed.

Adding enemies
What would a shoot’em up be without any enemies to shoot? Next we’ll add some enemies to the screen to get some action to the screen.

Let’s create a new UserControl, and call it Bobo by right clicking the Shared project, and Add, New Item, User Control. You could give it some nice bitmap images, but for this exercise I’m using XAML to draw the creature. Open Bobo.xaml and copy/paste the following on top the XAML:

You can adjust the game difficulty by increasing maxEnemies at a later level of the game for example.

We have everything set for our enemies to appear on the screen. We need to just add them to the GamePage.xaml.cs. First edit the Loaded –lambda on constructor to include the following at the bottom of it:

Now we just have to make sure our game loop gets called, so we open the constructor, and add as very last line, after the Loading –lambda has closed, the following line:

CompositionTarget.Rendering += GameLoop;

Go ahead, try the project now, and you should see the star field moving, ship should respond to the keyboard and enemies should move randomly from top to down.

Open fire!
Now our little game seems to be a bit boring, enemies come and sail through your ship and you can’t shoot. We need to add collision detection and possibility to shoot the enemies to make it a bit more interesting. Let’s start with shooting! Add the following member variables to GamePage.xaml.cs:

The code above checks that the player is still alive, and if yes, creates a new ellipse as a bullet and adds it to the bullet list, so we can later easily check if any of the bullets hit anything on the screen. At this point we have static bullets in the screen, so logical step is to add moving functionality to the game by adding this:

The code above moves the bullet 10 pixels upwards until it goes off the screen. At that point it is removed from the bullet list. Let’s add the HitTest method to see if our bullets actually hit anything:

To move the bullets, add this to the GameLoop -method, over the // TODO – move bullets text:

for (int i = 0; i < bullets.Count; i++)
{
MoveBullet(bullets[i]);
}

At this point, you’re ready to shoot some aliens from outer space! But it kind of gets boring as there’s no way you can die yet, as we’re not testing if the aliens hit you. Let’s add few more things and it starts to come together. First we need the famous game over notification. Add this member variable to GamePage.xaml.cs:

Finally we need to add to the GameLoop call to the CrashTest, overwriting the // TODO – collision test with call to our method: CrashTest();

If you try the game, you soon realize that if the enemies crash to your ship, that’s the end of you! This is the end of part three of Universal Games for Windows. On the next post we’ll continue to improve the game by adding universal high score system, levels, navigation and other relevant things to finish up the game.

Join the conversation

While I can’t say, I understand every bit of it as this is my first time looking at animations, it’s pretty impressive to see how simple it is to put a very basic game together especially regarding animation, crash detection, etc… Very interesting and easy to follow articles!! One thing I’ve noticed is that while using the touch screen, moving the rocket is very smooth but it’s nowhere near as smooth when using the keyboard. I’ve increase the keyboard move to 10 which makes it a little bit better/smoother, but it’s still nowhere near the movement you get from using the touchscreen buttons. Any reason as to why and ideas on how to fix this? Looking forward to the follow up articles. Thanks.

First of all I would like to thank you for this tutorial, as this is the first XAML C# game tutorial I have found. However I have bumped into a ‘NullReferenceException’ which was ‘untangled by user code’ in the line “MiddleArea.Width = new GridLength(12, GridUnitType.Star);” in Gamepage.xaml.cs (in the #if WINDOWS_PHONE_APP statement). Do you know how I could fix this please?