In this tutorial we will make an endless runner game similar to the T Rex endless runner game we have done before. This game will have all the similar functionalities except it will have its own Sprite changing function, parallax scrolling background and it will be made in WPF format. This is an exciting new tutorial and we worked really hard to make it work hopefully you enjoy making it too.

Lesson Objectives –

• Create a parallax scrolling endless runner game in visual studio
• Use Rectangle objects and assign sprites to them to make the game look amazing
• Use two background objects to make a parallax scrolling background in the game
• Use a custom-made sprite swapping function to make the main character animate in the game
• Create a custom jump function
• Check for collision between the ground, player and obstacle objects during runtime
• Keep score in the game
• Use an array to move the obstacle properties in the game
• Reset the game with the default values to try again in the game

Video Tutorial for Endless Runner Game in WPF and C#

Images for this game

Download the images ZIP file here.

Make sure you extract the files, so you can import them to visual studio later on.

These are the images for this game, we have a main background image for the game and 8 different sprites for the player, each of the sprites are doing a specific animation for the player. The last sprite is the obstacle image. Each of the sprite is transparent. Since WPF supports transparency much better than windows form application, it’s much better to do more advanced game development programming for this game.

We will make a runSprite() function that will change the sprite as the game is running. This is why we have several different still images of the running image, once they are loaded in sequence, it will look like an animated image.

Written Tutorial – Starting the Project

Make a new project in visual studio, make sure it’s a WPF App (.NET Framework) template, in the next scene name the project Endless Runner Game.

Click on Create.

Below is the empty WPF form. This is the default view of the WPF .NET Framework template. The empty scene you see the design view of the app and the code in the bottom in the XAML code. We can add the elements we need for this game in the XAML code.

This is the default XAML code view for this game. We can make some changes to this window.

<Window x:Class="Endless_Runner_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:Endless_Runner_Game"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

We have made some changes to the XAML code below. Lets take a closer look.

<Window x:Class="Endless_Runner_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:Endless_Runner_Game"
        mc:Ignorable="d"
 Title="Endless Runner by Moo ICT" Height="450" Width="800">
    <Canvas Name="myCanvas" Focusable="True" KeyDown="Canvas_KeyDown" KeyUp="Canvas_KeyUp" Background="LightBlue">

        <Rectangle Name="background" Height="400" Width="1262" Fill="Orange" />
        <Rectangle Name="background2" Height="400" Width="1262" Fill="LightGreen" Canvas.Left="1262" />

        <Rectangle Name="ground" Height="32" Width="800" Fill="Black" Canvas.Top="387" Canvas.Left="0" />

        <Rectangle Name="player" Height="99" Width="67" Fill="Brown" Canvas.Top="151" Canvas.Left="110" />

        <Rectangle Name="obstacle" Height="178" Width="50" Fill="Red" Canvas.Top="320" Canvas.Left="721" />

        <Label Name="scoreText" FontSize="22" FontWeight="Bold" Content="Score: 0" />

    </Canvas>
</Window>

Title tag has been changed to “Endless Runner by MOOICT” make sure those are inside a double quotation mark. This will show up on the title bar of the app. By default this is set to MainWindow so we want to customize it a little before we can start on the game.

Delete the <GRID> tags and add the <Canvas> tags for this game. Grids not suitable for this type of so we can use Canvas.

Inside the canvas tag Name the tag myCanvas, this name will be used in the C# script to identify and make changes to the properties. Focusable keyword means if we want the main focus for this app to be the canvas, when its set to true this canvas will get priority when the game loads. Key down and Key up keyword is adding the events for when the keys are pressed and released on the keyboard. Set background to light blue.

Inside the Canvas tag it has 5 rectangles and 1 label. 2 of those rectangles are for the background, since we are making a parallax scrolling background this game, we need two of those. 1 of the rectangles is for the ground. 1 rectangle is the player and last one is the obstacle.

There are names for each rectangle so we can identify and change them around from the C# code. First background has a name of background and the other has the name background. First one height is 400 pixels and width is set to 1262. Second one has the same except it has a canvas.left meaning the x position of the background set to 1262. So, where the first background ends this background2 object will begin. The first background fill colour is orange and second background fill colour is light blue.

The ground rectangle has a width of 800 so it covers the whole window and height of 32 pixels. The fill colour is black. Ground rectangle top position in the canvas is 387 and left position is set to 0. Top refers to the Y position and left refers to the X position of any object inside the canvas.

The player rectangle has the name player inside the double quotation marks and height is set to 99 and width is set to 67 pixels. These numbers are based on sprites we created for this game. Set the full colour to brown and top position to 151 and left position to 110.

In the obstacles rectangle set height set to 178, width set to 50, fill set to red and set top position to 320 and left position to 721.

The label we added last in this canvas is to show the score in the game when we successfully jump over an obstacle. Inside the label tag it has a name scoreText, font size is set to 22, font weight is set to bold and content meaning the texts of the label shows Score: 0 inside the quotation marks.

Now we are done with the design view of this game. Your design view above the XAML window should look like this.

This window has been ZOOMED out slightly to show the whole thing, if you want to zoom out on yours then HOLD CTRL and use the mouse wheel to zoom out of the screen. If it doesn’t look like the screen shot above then double check the XAML code presented to make sure you are on the right track so far.

Click on the Page 2 to start adding images