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

Adding the Threading Namespace – 

wpf c# parallax endless runner game tutorial adding the threading namespace to this game

Add the highlighted line to the script on the top under the last USING.SYSTEM.WINDOWS.SHAPES; line this will import the namespace called Threading we need that because we are going to use a CLASS called DispatcherTimer and that will be main timer object for this game.

The green text after the line that says // add this for the timer, is a comment. They will show up as a green text inside of the code view. These texts don’t get compiled when the game runs but its important to do these for good practice and also to keep your sanity. As you become better at programming you will forget what you wrote sometimes and its purpose so its helpful to have a comment next to it so it helps remember what it was for. Also, if you are doing projects such as this for educational purposes a lot of your marks will depend on appropriately commenting and indenting the codes.

Adding the Variables –

We need a lot of variables for this game to work. Iron man once said “I can’t do the math if I don’t have all of the variables” – Avengers Movie. It is true. You need to know what you need for a project before you can start implementing the proper functionalities. See the scree shot of the code below. It shows all of the variables we need for this game. Add them all right before the public MainWindow() line, these are what called global variables meaning they can be accessed from any function in this game. If we have a variable inside of a function then that can only be accessed from that specific function hence it called local variable. These global variables we need to because we have lots of things running and calculating at the same when the game will run. Once again you see all of the green texts, they are all comments. Make sure you put them down in your code as well because its good practice and a very good habit to have especially when you are working in team with others.

wpf c# parallax endless runner game tutorial adding all of the variables for this game

First, we are making a new DispatcherTimer called game timer. As mentioned earlier it will be used as the main game timer and we needed that Threading namespace to have access to this DispatcherTimer.

The three Rect classes we are declaring are player hit box, ground hit box and obstacle hit box. These three will be used to check if the player is colliding with either the ground or the obstacle.

Bool is short for Boolean, it’s a data type that contains only true or false value. Jumping variable is a Boolean, by default these are set to false. We can change it to true when the player jumps in the game and it lands on the ground we will set to false.

Int force and int speed are integer variables. Integers can hold whole numbers only. We need both of them to set the speed for the obstacle and check how high the player can jump using the force integer.

Random rand = new Random(); this line is creating a new instance of the random class. We will use this random class to generate number numbers. It helps bring a sort of unpredictability to the game so its more fun to play it.

Double spriteInt = 0; we are making a double datatype variable called sprite int (I know it’s hilarious). The double data type is different than int because it holds numbers but very large numbers and it also hold decimal point numbers which integers don’t do. This double variable will be used to animate the player sprite for this game.

ImageBrush is a class that displays images as textures for rectangles and other shapes inside of WPF. We have lots of rectangles and except the ground one all of them need to have a image as the background, so we have 3 image brush classes here called player sprite, background sprite and obstacle sprite. Each of them will be assigned later on to their initial images.

Int[] obstaclePosition = {320, 310, 300, 305, 315}; This line here is an example of a integer ARRAY. Meaning we have multiple integers inside of one integer group. When we put int and use a square bracket next to it we are telling the IDE we want an array here then we name the array in this case obstacle position and then we use the curly brackets to put the values we want in them. This array will be used to change the Y position of the obstacle. So when the game is running it wont be the same height each time, it will change between these numbers and we will use the random number class to randomly select one each time the player successfully jumps over one.

The last integer is called score. This will keep score of how many the player jumped over. This integer will also be linked to the score text label we made in the XAML window.

        // create a new instance of the dispatcher timer class called gametimer
        DispatcherTimer gameTimer = new DispatcherTimer();

        // create three new Rect class instance called player hit box and ground hit box and obstacle hit box
        Rect playerHitBox;
        Rect groundHitBox;
        Rect obstacleHitBox;

        // create a new boolean called jumping, by default this will set to false
        bool jumping;
        // make a new integer called force and set the value to 20
        int force = 20;
        // make another integer called speed and set the value to 5
        int speed = 5;
        // create a new instance of the random class called rand
        Random rand = new Random();
        // game over boolean
        bool gameover = false;
        // make a sprite int double variable, this will be used to swap the sprites for player
        double spriteInt = 0;

        // make three image brush instances called player sprite, background sprite and obstacle sprite
        ImageBrush playerSprite = new ImageBrush();
        ImageBrush backgroundSprite = new ImageBrush();
        ImageBrush obstacleSprite = new ImageBrush();

        //integer array which we will use to change the obstacle position on screen
        int[] obstaclePosition = { 320, 310, 300, 305, 315 };
        // empty integer called score
        int score = 0;

 

Double check your code with the ones from above and make sure you don’t have any spelling errors in them. C# don’t do spell checks but it is case sensitive so make sure you have exactly the same as the code above.

Adding Start Game, Run Sprite and Game Engine function

We need to add 3 empty function, well 2 empty function and one empty EVENT. The 2 functions we will add are the start game function. This function will contain the default values for the all variables and it handy because we can easily run this function later on when we want the player to restart the game. Run sprite function will be responsible for animating the main player character. Games engine is the event that will be linked to the game timer, this event is the main logic for this game and it will control everything form animations, collision, score and others.

Type the functions as you see on the screen. Make sure that there are no spelling errors. Don’t forget the curly brackets end of each function. They tell the program when to start taking instructions and when to end.

        private void StartGame()
        {

        }

        private void runSprite(double i)
        {

        }

        private void gameEngine(object sender, EventArgs e)
        {

        }

 

The run sprite function takes a Double variable inside the brackets called i. When we run this function, we need add a number for the function to run it properly. When we call this function we need to state runSprite(.5) or runSprite( with another double variable here ). Some functions take in arguments and some don’t, when ever you are programming a game always look for the most efficient way to do things, there are always room to make things better.

Go to Page 4 to start with the main window function




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.

    Pascal

  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.