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

7 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.

  3. kobubu says:

    Dude your tutorials get better.
    I love how you explain the things now.
    Thanks for everything you do to us!

  4. anti says:

    realy nice tutorial! big thanks =)
    but i have a problem. if i execute the code in vs it is realy slow and lags all the time but if i start the exe under win10 its totaly smooth. so it must be a vs display failure. Do you know a solution for me to solve this issur in vs? its maybe a dump loading property which make it slow. thanks. have a nice day..

  5. anti says:

    maybe its the dispatcher timer because if i try to make a stop watch the displayed counting lags too. it’s the same as i do a normal clock or a timer for a media file. the time is always correct but the displaying is uneven and laggy. i hope you can help me. thanks.

  6. Stela Kostova says:

    Hello, I was wondering whether this could be done in Win Forms?

  7. Anhar Ali says:

    Yes you can do similar games in windows form. You won’t get the transparency with the player image and background if you use picture-boxes. This is why I’ve used WPF for this tutorial, it’s a lot easier to have transparency with sprite animation.

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