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


Start Game Function –

This function will load up all of the default values for this game, lets take a closer look into what it does.


We start with positioning the background rectangles


First we are setting the background LEFT or X position to 0. This is the first background rectangle

Background2 rectangles LEFT or X position is being set to 1262 so right behind the first background. 1262 is the width of the rectangles if you remember from the XAML code. Everything is related from XAML to C#.

Now we set the position of the player

Player left position is being set to 110 pixels

Player top position is being set to 140 pixels.

When the game runs, the player should drop down to the platform and start running.

Set the position for the obstacle rectangle

Set the obstacle rectangles left position to 950 pixels so its off screen when the game starts

Set the obstacle rectangles top position to 310 pixels.

runSprite(1); this line is running the run sprite function with 1 meaning it will start the function and load the first frame of the running animation.

// set the obstacle sprite, load the image from the images folder

These two lines above is loading the obstacle.png file into the obstacle sprite image brush, and then we are linking the obstacle fill to the obstacle sprite.

jumping is set to false, game over is set to false because the game just started, score is set to 0 and score texts content is accessed to make sure we are updating it in the beginning of the game with a 0.

gameTimer.Start(); this line is starting the game timer.

Run Sprite Function

We are now in the run sprite function, this function will change the player image and show these sequence of images as a animation. Lets see how its done. The full run sprite function is below there are comment in the code feel free to take a look.

This function has one big switch statement inside of it. This switch statement changes the value of the player sprite image brush as the value of I changes. For example, let’s say we run this function and pass in 3

The switch statement will check if there is a case for 3 if so, we go and change the image source of the player sprite object to newRunner_03.gif. if this value was 4 it will get the newRunner_04.gif image and so on.

We are passing the double variable called I through this function and that’s was we are using to make sure we get the right image when its being displayed. End of each case we have a break; keyword. This keyword means if this case was found then we don’t need to check through rest of them we can break the operation here and return to normal the job is done. Out of the switch statement curly brackets we are stating player.Fill = playerSprite; this line as it was used for the background or the obstacle is simply loading the playerSprite texture from the image to the player rectangle fill colour. If your wondering how’s it going to animate like this then remember that spriteInt double variable we made earlier we will use that to pass the value in for I and then it will animate the player rectangle for us.

Go to Page 6 for Game engine event source code

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 -