× Main Menu

WPF C# Tutorial – Create Parallax Scrolling Endless Runner Game in Visual Studio

Adding the images

First right clickson the NAME for this project i.e Endless Runner Game in the solutions explorer, hover over add and click on NEW FOLDER option

wpf c# parallax endless runner game tutorial how to add images to wpf project

Rename this new folder to images, now right click on the images folder, hover over ADD and click on Existing Item.

wpf c# parallax endless runner game tutorial selecting and adding images to this game

Browser to the folder where you extracted the ZIP file with all of the images inside of it, change the file type to Image Files in the browser dialog box. Highlight all of the pictures and click on ADD. Once you have done that all of the images should appear inside the solutions explorer.

Note – if you are concerned about when we are going to add the images to these shapes, do not worry just yet. All of those will be done through the C# script. We will dynamically add the images to these rectangles when the game is compiling. Follow along the tutorial for now and you will see how it’s done.

Adding Events

We need to add the events for the key down and key up functions we added to the XAML code earlier. Visual studio automatically adds these functions in the C# we just have to click. Let see how its done.

wpf c# parallax endless runner game tutorial adding events to this game

Right click on the Canvas_KeyDown keyword in the XAML window and click on Go to Definition this will add the event inside of the C# script. Do the same for the Canvas_KeyUp keyword. When you have done your C# script should look like the screen below.

wpf c# parallax endless runner game tutorial typing the events in c# programming language

Both of the events are now added to the game.

Go to Page 3 to start adding variables

2 responses to “WPF C# Tutorial – Create Parallax Scrolling Endless Runner Game in Visual Studio”

  1. Pascal F says:

    Very nice tutorial, I really appreciate it.

    But i got one question:

    How do i get a moving ground into the game? when i put an image with the same length as the background and also the nearly same code i fall through the ground.


  2. Anhar Ali says:

    Hi Pascal, glad you liked the tutorial, worked really hard on this one. For your question about moving the ground, you can use similar techniques as being used with the background scrolling animation , have two separate ground rectangles and move them the same way as the backgrounds are. Within the rectangles you can images as it’s texture so it looks like the ground is scrolling with the background.

    I think the reason your character is falling through it is because it’s not checking whether you have landed on the ground rectangle. See if that helps.

    Happy programming.

Comment on this tutorial and let us know how you got on -

%d bloggers like this: