View source for Frogger - Mixing up the Car Movements

== Tutorial Instructions ==

This tutorial is designed to be completed in order and builds on the code from the previous sections. However, you can jump to any section and download the completed code to that point and continue from that section onwards.

The tutorial utilises two files which can be downloaded using the following links. To download the files, right click on the filename and select 'Save Link As &#x2026;'

* [https://github.com/filmote/Frogger_Tutorial/blob/main/3.%20Mixing%20up%20the%20Car's%20Movements/ExampleCode/Frogger.ino Frogger.ino]
* [https://github.com/filmote/Frogger_Tutorial/blob/main/3.%20Mixing%20up%20the%20Car's%20Movements/ExampleCode/Images.h Images.h]

Throughout the tutorials, you will be prompted to complete sections of code utilising the knowledge you have just gained. If you are unable to complete the code you can simply download the starting code presented at the start of the next section as it will contain a valid solution.

Other sections in this tutorial:

* [[Frogger_-_Getting Started|getting started]]
* [[Frogger_-_Implementing_the_Cars|implementing the cars]]
* mixing up the car’s movements
* [[Frogger_-_Adding_the_Frog|adding the player’s frog]]
* [[Frogger_-_Collision_Detection_and_Explosion_Graphics|adding collision detection and explosion graphics]]
* [[Frogger_-_Adding_Logs_and_Turtles|adding logs and turtles]]
* [[Frogger_-_Turtle_Submerge_Logic|adding turtle submerge logic]]
* [[Frogger_-_Adding_Home_Logic|adding home logic]]
* [[Frogger_-_Adding_Score_Logic|adding score logic]]
* [[Frogger_-_Adding_a_Title_and_Game_Over_Screen|adding a title and game over screen]]



== Mixing up the Car Movements ==

In order to vary the speed of the car movements and to randomly change the gap between them, we need to rework some of the code we just completed.  What?

Previously the cars in a single lane of the road could be considered individually – one the car had moved off the side of the screen, we could simply place it on the right-hand side knowing that it would never clash or overlap the other car in the same lane.

Now, when we move a car to the right-hand side of the screen we need to know where the other car in the same lane is so we can randomly place the car behind the other one yet make sure they do not overlap.  The <code>launchCar()</code> function below facilitates that by accepting two parameters – the car to be launched (<code>car1</code>) and the other car in the same lane (<code>car2</code>) – and then calculating a random placement based on the second car’s existing location.

The first portion of the if statement checks the other cars position and if it is on the far-right of the screen or even beyond the right boundary of the screen, then it calculates a new starting point for the car being re-launched that is between '20' and '70' pixels '''further right than the other car'''.

If the other car is somewhere in the middle of the screen, the remainder of the if statement will assign an `x` value to the car being re-launched somewhere between `130` and `180` pixels right ensuring it starts off-screen but not too far behind the other vehicle.

<pre>
void launchCar(Obstacle &car1, Obstacle &car2) {

    if (car2.x > 110) {
        car1.x = random(car2.x + 20, car2.x + 70);
    }
    else {
        car1.x = random(130, 180);
    }

}
</pre>

One other little detail that should be pointed out in this function is the use of the ampersand (&) in front of the <code>car1</code> and <code>car2</code> parameters in the function declaration.  When passing values in C++, the values are copied by default and any changes to their values within the function would not affect the original variable.  The copy of the variable’s information is discarded on completion of the function.

Adding the ampersand in front of the variable names within a function tells the C++ compiler that you want to pass a reference to the original variable rather than a copy of its value.  By passing a reference, you can then modify the variable and have those values be reflected outside of the function in the original variable.  In our case, we want to change the value of car1’s 'x' value therefore we need a reference to it.  

But I hear you ask ''why have an ampersand on <code>car2</code> if we are not changing it?''  Good question as the function would work exactly the same way with or without the ampersand.  Using a reference for an object or structure, rather than a copy, actually saves memory at runtime as the compiler does not need to copy the data but can just reuse the same memory locations.  On a device with minimal memory, this can become really important.  For now, remove the ampersand from the <code>car2</code> variable and test the code to satisfy yourself that it works either way.

<div  style="width: 600px; padding: 15px; border: 1px solid; background-color: ligthgrey; box-shadow: 10px 10px 5px grey;">
<span style="font-size: 160%">Your Turn</span>

When relaunching a vehicle, we can change its type randomly to mix that up a bit. Valid vehicle values are <code>ObstacleTypes::Car</code> to <code>ObstacleTypes::Van</code> which equate to 0, 1 and 2. Add a random type to the bottom of the <code>launchCar()</code> function.

</div>


Now that we have a function to relaunch a car based on the location of its lane sharing pair, we need to change the existing logic to move them in pairs.  Again, a simple function can assist .. voila!

<pre>
void moveCars(Obstacle &car1, Obstacle &car2, int8_t increment) {

    car1.x = car1.x + increment;
    if (car1.x <- 20) { launchCar(car1, car2); }

    car2.x = car2.x + increment;
    if (car2.x <- 20) { launchCar(car2, car1); }

}
</pre>

In addition to the references to the cars being moved, this parameter accepts a third parameter which indicates how many pixels to move the car – more on that soon.  What you will notice in the code above is that we move the first car and test to see if it needs relaunching before moving the second car and then testing to see if it too needs relaunching.  The two calls to the <code>launchCar()</code> function specifies the car that has just been moved followed by the other car – after moving car1 the parameters to <code>launchCar()</code> are <code>car1</code> followed by <code>car2</code> whereas after moving <code>car2</code> the <code>launchCar()</code> parameters are reversed.

Finally, we can use a timing trick to make the cars move at different speed.  In the beginner’s tutorial, you would have seen how the Arduboy library regulates the speed of a game using a specified frame rate.  Under the covers, the library keeps the number of frames it has completed and exposes this in a variable called `frameCount`.

We can use the `frameCount` variable to alter the speed of the different cars.  Although the `frameCount` value simply grows and grows (until in eventually wraps around to zero again), we can use the modulus function to determine if it is an odd or even number as shown below and move the cars by different amounts.

In the function below, the pairs of cars with index 2 and 3 are moved one pixel every frame of the game to produce a ‘medium’ speed.  The cars with an index of 4 and 5 are moved one pixel only when the `frameCount` is even (ie when the value mod two returns a value of zero) producing a ‘slow’ speed which is half that of cars 2 and 3.  Finally, cars 0 and 1 are moved 1 pixel every even frame and 2 pixels every odd frame producing a fast speed that is one-and-a-half times faster than cars 2 and 3.

<pre>
void loop() {

    ...

    // Update the cars positions ..

    if (arduboy.frameCount % 2 == 0) {

        moveCars(cars[0], cars[1], -1);
        moveCars(cars[4], cars[5], -1);

    }
    else {

        moveCars(cars[0], cars[1], -2);

    }

    moveCars(cars[2], cars[3], -1);

    drawScreen();
    arduboy.display();

}
</pre>

So, compile the code and see the results!  As expected, the cars move at different speeds and the gaps between them vary randomly.  It’s starting to look like a game already.

It was worth labouring over the details in this section as we will use the same logic when we complete the log and turtle movements later.

In the next section we will look at adding the frog and implementing some simple movements.



----
Prev [[Frogger_-_Implementing_the_Cars|implementing the cars]], Next [[Frogger_-_Adding_the_Frog|adding the player’s frog]]