Frogger - Adding the Frog - Revision history

Filmote at 10:31, 17 June 2024

2024-06-17T10:31:13Z

← Older revision		Revision as of 10:31, 17 June 2024
Line 23:		Line 23:
	* [[Frogger_-_Adding_a_Title_and_Game_Over_Screen\|adding a title and game over screen]]		* [[Frogger_-_Adding_a_Title_and_Game_Over_Screen\|adding a title and game over screen]]



			== Adding the Frog ==

	In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.		In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.

Filmote at 10:30, 17 June 2024

2024-06-17T10:30:46Z

@@ Line 1: / Line 1: @@
 Other sections in this tutorial:
@@ Line 99: / Line 110: @@
 Implementing the down functionality is almost identical with the 'y' value being increased to produce a downward motion. The code to handle the down button is almost identical however as the player is moving down the screen, the 'y' value of the <code>player</code> struct must increase.
@@ Line 104: / Line 123: @@
 <pre>
      if (arduboy.justPressed(RIGHT_BUTTON) && player.x < 120) {
@@ Line 116: / Line 130: @@
+     }
 </pre>
 If all is OK, we move the player 5 pixels in either direction.

Filmote at 12:24, 16 June 2024

2024-06-16T12:24:31Z

@@ Line 1: / Line 1: @@
 * [[Frogger_-_Getting Started|getting started]]
 * [[Frogger_-_Implementing_the_Cars|implementing the cars]]
@@ Line 120: / Line 122: @@
 In the next section, we will add collision detection and a cute little explosion graphic when you are hit be a vehicle.

Filmote at 12:17, 16 June 2024

2024-06-16T12:17:57Z

← Older revision		Revision as of 12:17, 16 June 2024
Line 1:		Line 1:
			* [[Frogger_-_Getting Started\|getting started]]
			* [[Frogger_-_Implementing_the_Cars\|implementing the cars]]
			* [[Frogger - Mixing up the Car Movements\|mixing up the car’s movements]]
			* 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]]


	In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.		In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.

Filmote at 10:41, 16 June 2024

2024-06-16T10:41:15Z

← Older revision		Revision as of 10:41, 16 June 2024
Line 1:		Line 1:
	~~== Adding the Frog ==~~

	In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.		In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.

Filmote at 09:58, 16 June 2024

2024-06-16T09:58:28Z

← Older revision		Revision as of 09:58, 16 June 2024
Line 37:		Line 37:

	}		}
	<pre>		</pre>

	Now we can look at capturing the button presses and translate those into frog movements.		Now we can look at capturing the button presses and translate those into frog movements.

Filmote: Created page with "== Adding the Frog == In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section. Near the top of the `Frogger.ino` file, you will see that we have added a struct, named `Frog`, to capture the location of the player’s frog as it moves..."

2024-06-16T09:58:07Z

Created page with "== Adding the Frog == In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section. Near the top of the <code>Frogger.ino</code> file, you will see that we have added a struct, named <code>Frog</code>, to capture the location of the player’s frog as it moves..."

New page

== Adding the Frog ==

In this section we will add the player (frog) and move it around the lower half of the screen in response to the player pressing the console buttons. In the spirit of keeping the sections (relatively!) short, we will leave the detection of collisions for the next section.

Near the top of the <code>Frogger.ino</code> file, you will see that we have added a struct, named <code>Frog</code>, to capture the location of the player’s frog as it moves around the screen.

<pre>
struct Frog {

uint8_t x;
uint8_t y;

void reset() {

x = 62;
y = 59;

}
};
</pre>

This structure is similar to that used for the cars in that it contains an x and y value but the obstacle type has been omitted as – funnily enough – a frog is always a frog. However, you may notice that the structure has a function imbedded in it that will reset the location of the frog to the middle of the lower road verge. This is one of the added capabilities of structures that I hinted at in the section [[Frogger_-_Implementing_the_Cars|Implementing the Cars]] earlier.

Just as we did before when defining the array of cars, we can define a variable of type <code>Frog</code> called <code>player</code>. We can also add a line to the bottom of the existing <code>resetGame()</code> function to reset the player at the start of the game.

<pre>
Frog player;
Obstacle cars[NUMBER_OF_CARS];

void resetGame() {

cars[0] = { 130, 32, ObstacleType::Car };
cars[1] = { 180, 32, ObstacleType::Truck };
...

player.reset();

}
<pre>

Now we can look at capturing the button presses and translate those into frog movements.

The Arduboy library provides a number of functions to detect whether a button has just been pressed or pressed and held down, named <code>justPressed()</code> and <code>pressed()</code> respectively. There are other functions to detect whether buttons have been released, are not being held and so forth. Further information can be found [https://mlxxxp.github.io/documents/Arduino/libraries/Arduboy2/Doxygen/html/index.html here].

To use the <code>justPressed()</code> function, a call must be made to <code>arduboy.pollButtons()</code> at the top of the main <code>loop()</code> to allow the library to determine what button have changed state in this frame compared to the previous state:

<pre>
void loop() {

if ( !arduboy.nextFrame() ) return;
arduboy.clear();
arduboy.pollButtons();
...
</pre>

Now we can detect the pressing of buttons and act accordingly. The sample code below detects the pressing of the Up button and reduces the player’s 'y' value (remember the top left-hand corner of the screen has the coordinates of 0, 0) making them move from the verge, through the three road lanes to the centre median strip.

<pre>
// Control the frog's movements ..

if (arduboy.justPressed(UP_BUTTON)) {

switch (player.y) {

case 59: player.y = 50; break;
case 50: player.y = 41; break;
case 41: player.y = 32; break;
case 32: player.y = 26; break;

}

}
</pre>

The code uses a <code>switch</code> – which is similar to a bunch of if statements. In the example above, the player’s existing 'y' value is tested and the matching case is executed. This code could be written like that below but IMHO it’s not as readable and now is as good a time as any to introduce it – you will see it in use in a more complex form later in the tutorial when we implement the submerging turtles!

<pre>
if (arduboy.justPressed(UP_BUTTON)) {

if (player.y == 59) { player.y = 50; }
else if (player.y == 50) { player.y = 41; }
else if (player.y == 41) { player.y = 32; }
else if (player.y == 32) { player.y = 26; }

}
</pre>

Implementing the down functionality is almost identical with the 'y' value being increased to produce a downward motion. The code to handle the down button is almost identical however as the player is moving down the screen, the 'y' value of the <code>player</code> struct must increase.

The left and right movement is handled by the code shown below. In addition to checking which button was pressed, we also check the frog’s existing 'x' position to ensure that the player is not already on the far left or right of the screen. The last thing we want is for the frog to move out of view!

<pre>
if (arduboy.justPressed(LEFT_BUTTON) && player.x > 0) {

player.x = player.x - 5;

}

if (arduboy.justPressed(RIGHT_BUTTON) && player.x < 120) {

player.x = player.x + 5;

}
</pre>

If all is OK, we move the player 5 pixels in either direction.

At this point, you can compile the game and upload it to your device. As you will find, you can move the frog around the lower half of the screen but there is nothing stopping you from running across the vehicles! Oh dear ..

In the next section, we will add collision detection and a cute little explosion graphic when you are hit be a vehicle.