Frogger - Getting Started: Difference between revisions

From Arduboy Wiki
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Overview ==
== Overview ==


In this tutorial we will build a version of the classic arcade game **Frogger**.  This game is complex enough that we can cover a lot of programming and gaming concepts yet simple enough that we will not lose interest along the way!
In this tutorial we will build a version of the classic arcade game '''Frogger'''.  This game is complex enough that we can cover a lot of programming and gaming concepts yet simple enough that we will not lose interest along the way!


In case you haven’t played the game in the last 20 years, allow me to recap the game play for you.  You are a frog (of course!) and must cross the three lanes of traffic – avoiding the cars and trucks - and then the cross the treacherous river by jumping between logs to the safe locations on the far side of the river.  You can also catch a ride on the turtles that swim in the river but beware as they are likely to submerge at any stage.
In case you haven’t played the game in the last 20 years, allow me to recap the game play for you.  You are a frog (of course!) and must cross the three lanes of traffic – avoiding the cars and trucks - and then the cross the treacherous river by jumping between logs to the safe locations on the far side of the river.  You can also catch a ride on the turtles that swim in the river but beware as they are likely to submerge at any stage.
Line 8: Line 8:




=== Getting Started ===
== Getting Started ==


Before starting this tutorial, it is recommended that … xxxxx
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.


In order to fully understand the code, it would be helpful if you have read a little about `enums` and `structures`.  The tutorial will gloss over the details of these so please if something doesn’t make sense then refer back to these definitions.
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 …'


The tutorial will be broken into nine steps:
* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Frogger.ino Frogger.ino]
* [https://github.com/filmote/Frogger_Tutorial/blob/main/2.%20Implementing%20the%20Cars/ExampleCode/Images.h Images.h]


* implementing the cars
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.
* mixing up the car’s movements
 
* adding the player’s frog
Other sections in this tutorial:
* adding collision detection and explosion graphics
 
* adding logs and turtles
* getting started
* adding turtle submerge logic
* [[Frogger_-_Implementing_the_Cars|implementing the cars]]
* adding home logic
* [[Frogger - Mixing up the Car Movements|mixing up the car’s movements]]
* adding score logic
* [[Frogger_-_Adding_the_Frog|adding the player’s frog]]
* adding a title and game over screen
* [[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]]


Frogger has two distinct modes of play – crossing the road then crossing the river.  In this section, we will implement the road and cars first as it is easier of the two modes and will allow us to build on the code to implement the river section later.  
Frogger has two distinct modes of play – crossing the road then crossing the river.  In this section, we will implement the road and cars first as it is easier of the two modes and will allow us to build on the code to implement the river section later.  


Review the code that has been loaded with this tutorial.  As you will see, there are only two files – `Frogger.ino` which contains the actual code and `Images.h` which includes the converted graphics referenced in the code.
Review the code that has been loaded with this tutorial.  As you will see, there are only two files – <code>Frogger.ino</code> which contains the actual code and <code>Images.h</code> which includes the converted graphics referenced in the code.


You should be familiar with the `.ino` file from the tutorials already completed.  It is the main program file and generally contains all of your custom code.  However, when writing programs you will need to use existing libraries to perform basic task such as rendering graphics and reading button presses.
You should be familiar with the <code>.ino</code> file from the tutorials already completed.  It is the main program file and generally contains all of your custom code.  However, when writing programs you will need to use existing libraries to perform basic task such as rendering graphics and reading button presses.
   
   
The top line of the `Frogger.ino` file shows how we include the common Arduboy2 library and any other libraries needed.  We can also refer to our own libraries or files in the same way – the two lines below show how we refer to the Arduboy standard library and our graphics file.  Before you ask, libraries shared across multiple programs – such as the Arduboy2 library – are delimited by angle braces whereas files unique to the program (and in the same directory or a subdirectory as the program) are delimited by quotation marks.
The top line of the <code>Frogger.ino</code> file shows how we include the common Arduboy2 library and any other libraries needed.  We can also refer to our own libraries or files in the same way – the two lines below show how we refer to the Arduboy standard library and our graphics file.  Before you ask, libraries shared across multiple programs – such as the Arduboy2 library – are delimited by angle braces whereas files unique to the program (and in the same directory or a subdirectory as the program) are delimited by quotation marks.


<syntaxhighlight lang="cpp">
<pre> #include <Arduboy2.h>
#include <Arduboy2.h>
#include "Images.h"</pre>
#include "Images.h"
As we progress through the stages of development, we will be simply adding additional code and graphics to these two files.  In a larger game, these files can be split apart into separate files to make it easy to organise and locate code however in a simple game like Frogger it is (almost!) manageable in two files.
</syntaxhighlight>


As we progress through the stages of development, we will be simply adding additional code and graphics to these two files.  In a larger game, these files can be split apart into separate files to make it easy to organise and locate code however in a simple game like Frogger it is (almost!) manageable in two files.
 
----
Next [[Frogger_-_Implementing_the_Cars|implementing the cars]]

Latest revision as of 11:04, 17 June 2024

Overview

In this tutorial we will build a version of the classic arcade game Frogger. This game is complex enough that we can cover a lot of programming and gaming concepts yet simple enough that we will not lose interest along the way!

In case you haven’t played the game in the last 20 years, allow me to recap the game play for you. You are a frog (of course!) and must cross the three lanes of traffic – avoiding the cars and trucks - and then the cross the treacherous river by jumping between logs to the safe locations on the far side of the river. You can also catch a ride on the turtles that swim in the river but beware as they are likely to submerge at any stage.

The mechanics in this game are quite simple and in this tutorial we will implement them progressively allowing you to review and test each logical step before proceeding to the next.


Getting Started

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 …'

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 has two distinct modes of play – crossing the road then crossing the river. In this section, we will implement the road and cars first as it is easier of the two modes and will allow us to build on the code to implement the river section later.

Review the code that has been loaded with this tutorial. As you will see, there are only two files – Frogger.ino which contains the actual code and Images.h which includes the converted graphics referenced in the code.

You should be familiar with the .ino file from the tutorials already completed. It is the main program file and generally contains all of your custom code. However, when writing programs you will need to use existing libraries to perform basic task such as rendering graphics and reading button presses.

The top line of the Frogger.ino file shows how we include the common Arduboy2 library and any other libraries needed. We can also refer to our own libraries or files in the same way – the two lines below show how we refer to the Arduboy standard library and our graphics file. Before you ask, libraries shared across multiple programs – such as the Arduboy2 library – are delimited by angle braces whereas files unique to the program (and in the same directory or a subdirectory as the program) are delimited by quotation marks.

 #include <Arduboy2.h>
 #include "Images.h"

As we progress through the stages of development, we will be simply adding additional code and graphics to these two files. In a larger game, these files can be split apart into separate files to make it easy to organise and locate code however in a simple game like Frogger it is (almost!) manageable in two files.



Next implementing the cars