Frogger Tutorial

From Scalable Game Design wiki
Jump to navigation Jump to search

The purpose of this tutorial is to build a Frogger-like game. By the end of this tutorial you will have created a playable game that resembles the following picture. Throughout this tutorial, if you are confused as to how your game should look, you can use this picture for guidance. If you have already done part one, you can go on to Frogger Tutorial 2

Frogger-like game described in the tutorial

Game Description

The game you will create in this tutorial is modeled after the classic 1980’s arcade game ‘Frogger.’ Sega originally described the game as follows:

You are a frog. Your task is simple: hop across a busy highway, dodging cars and trucks, until you get the to the edge of a river, where you must keep yourself from drowning by crossing safely to your grotto at the top of the screen by leaping across the backs of turtles and logs. But watch out for snakes and alligators! (Sega, 1980).

The frog starts at the bottom of the screen. The person playing the game uses the arrow keys to move the frog in one of 4 directions: up, down, left, and right. The object of the game is to direct the frog to the grotto. To do this, the frog must avoid cars while crossing a busy road and navigate a river full of hazards.

Follow the instructions below exactly being very careful not to miss any steps. In building this game you will quickly learn many programming and logic concepts and will eventually be able to create your own original games from your imagination!

Creating A New Project

Double click the AgentSheets icon to start the program.

Select File->New Project... to start a new AgentSheets project. This will bring up a file dialog to define what the name of the new project is and where to save it.


Name the project "Frogger" in the file dialog that comes up (if the name "Frogger" is taken, try to put a number behind it like "Frogger_2235") and click OK. A "Define Agent Size" dialog box should appear.
Choose the size of your agents. For the game we are creating, you don't need to change anything - the default size of 32x32 pixels will work, so just click OK again.
A window should appear in the top left; this is the Gallery Window.

Creating Agents

We will now create the Frog and Street agents.

Creating the Frog

Click "New Agent" button to create the Frog agent: At the bottom of the Gallery window click the "New Agent" button. Name the agent “Frog.” The Frog agent should appear in the gallery. We will now draw the Frog.

Click the "Edit Depiction" button to draw the Frog: Select the Frog agent in the Gallery and click the "Edit Depiction" button at the bottom of the window. The Depiction Editor should now open. In the Depiction Editor we will draw what our Frog will look like.

Hit the "Clear" button to clear default icon: Click the "Clear" button at the bottom of the window or use the Edit->Clear menu option in the Depiction Editor window. This will clear the default drawing in the window to give you a blank canvas to draw your frog.

Frog agent depiction

Select a color and the "Pencil" tool to draw your frog. Select the green color from the color palette at the top and the Pencil tool on the left and draw what you would like your frog character to look like. If you make a mistake you can use the Undo button, the Eraser tool on the left, or the clear button at the bottom to completely clear the drawing. You can also use the shape tools on the left to make circles or rectangles.

Click the "Done" button at the bottom of the window when you are finished. We have now created the Frog agent and drew how it looks like. If you are still not satisfied with how your frog looks, you can click on the "Edit Depiction" button again in the Gallery Window and modify the picture. Now, it's time to make more agents!

Creating the Street

Street agent depiction

Now let’s make the Street agent. Similar to how you created the Frog agent,

Click the "New Agent" button to create the Street agent. Name the Agent “Street.”

Open the Depiction Editor Window to draw your Street in the same way you drew the Frog. Make sure you draw a street that goes across from left to right.

We Now have Two Agents: The Frog and The Street! Great Job! Our next task is to make the game level. This is called a “Worksheet.”

Creating a Worksheet

The Worksheet is our game level or stage where we place our agents.

Empty Worksheet window

Select File->New Worksheet to create a new worksheet: This will create a new, empty worksheet. Resize the Worksheet Window to the size you want your level to be (by clicking and dragging the bottom right of the window). The empty worksheet is where we will create the level for our game. Our level should include the Street, the Frog, and (eventually) Cars or Trucks. Let’s first create the Street. The Street will be a series of lanes that run across the Worksheet window. We will do this by placing the Street agent on the worksheet.

Use Pencil tool to place Streets in the Worksheet: Select the Street agent in the Gallery window by clicking on it. In the Worksheet window, use the Pencil tool to place lanes from left to right. If you want the lanes to cover a region, click on the filled “Draw Rectangle” tool (the rectangle which has textured middle) and make a Rectangle that covers a section of the screen you want the lanes to appear. This should create multiple “lanes” across the screen. If you make a mistake you can use the Clear button located in the bottom right to clear everything or the Eraser tool on the left to clear specific agents. Keep in mind that to complete the Frogger game, you will eventually have to make and put a river above the street lanes, so place the street towards the bottom of the worksheet, leaving space for the river (we will create the river in part 2 of this tutorial).

Place your Frog agent in the Worksheet: In a similar fashion, place one Frog in the Worksheet window. You only want to place a single Frog, since it will be cursor controlled. Make sure the agents are in the default starting position (e.g. the frog is in the start position at the bottom of the level). It is important that you do not draw over the Frog with the Street agent. This means if you place a Frog on the worksheet, do not draw the Street over it without erasing the Frog first.

This is a good time to save the worksheet!

IMPORTANT: Saving the Worksheet


While the Worksheet Window is selected, go to File->Save; DO NOT CHANGE THE DIRECTORY UNDER ANY CIRCUMSTANCES! IF YOU DO THIS THE PROGRAM WILL NOT WORK. Name the worksheet "Level 1" and hit Save. You can test if saving worked, by hitting the "Reset" button in the worksheet window: if the screen doesn't clear (meaning no agents disappeared), you have successfully saved the worksheet window. If the screen did clear, place the agents in the positions they originally were and try to save again following the directions above. If the screen still clears, Ask for Help.

Play Test: Running the Program

GOOD JOB! You have now created and saved the first version of the level. Now let's test our program by running it and trying to play the game to see if it works the way we think it should. In the worksheet window, hit the 'Run' button located at the bottom left. What happens?

  • Does the Frog do anything or does it just stay in one place?
  • Can you control the Frog movements? For example, if you hit the up arrow, does the Frog agent move up?

The answer is no. To give our Frog the ability to move, we have to give a "behavior" to our Frog agent. As you will see, behaviors allow us to make our agents act in certain ways.

Programming the Frog Movement

We now need to figure out what our agents do while the game is running. The Frog must move in the correct direction when given the Up, Down, Left, and Right command from the keyboard. Let’s add this.

Behavior Editor; "If" box on left and "Then" box on the right

Use the "Edit Behavior" button to open the Frog behavior editor: In the Gallery window select the Frog agent and click the "Edit Behavior" button located at the bottom of the Gallery window; This should bring up the Behavior Editor for the Frog, which at this point will contain no behaviors.

The kind of behaviors that we will give to our Agents are called rules. Rules are made up of an IF-THEN statement. For controlling the Frog using the cursor keys, one of the rules we need should be that “IF the Up key is hit, THEN the frog will move up.” Overall we should have 4 rules, one for each direction (Up, Down, Left, Right).

Double click the “If” box to get the Conditions Palette. Alternatively, go to Tools->Conditions Palette. This will open the Conditions window that contains all the available conditions (blue language pieces).

the key condition

Double click on the “Then” box to get the Actions Palette. Alternatively, go to Tools->Actions Palette. This will open the Actions window that contains all the available actions (red language pieces).

Add the "Key" condition to the Frog's behavior: Click on the “Key” label of the Key condition in the Conditions Palette and drag it into the “If” part of the rule in the Behavior Editor. Click on the letter within in the Key condition (the default is 'A') and it when it says “Press Any Key”, hit the "Up" arrow on the keyboard.

Move Action

If the up Arrow is pressed, then we want the Frog to move up one space.

Add the "Move" action to the Frog's behavior: Drag the “Move” action from the Actions Palette to the “Then” part of the rule in the Behavior Editor. Click the arrow in the “Move” command box and change the direction to "Up". When you’re all done the Behavior Editor for the Frog should look like the following:

The Frog Up Behavior: "If the Up Key is Pressed, Then Move Up"

Click the “Apply” Button located at the bottom right of the Behavior Editor to make these changes take effect for the Frog agent.

Play Test: Testing The Frog Movement

Now let's test our program by running it. In the worksheet window, hit the 'Run' button located at the bottom left and git the up arrow. What happens?

  • The frog should now move up. If your frog does not move up, go back through the instructions and try to figure out where you might have gone wrong.
  • If the frog does move up, are we done with the Frog movement? What other Frog movement behaviors are necessary?

When you are done testing, you can hit the Reset button located in the bottom right of the Worksheet Window to restore your level (ie: put the Frog back at the default starting position).

Notice we’ve only programmed the up movement—we now need to program the rest of the directions. To do that, we have to add three more rules for the “Down”, “Left”, and “Right” directions. Since these behaviors are similar to the "Up" behavior, you can use the "Duplicate" button located at the bottom of the behavior window.

Duplicate the UP movement behavior for all other directions: In the Frog’s behavior editor select the “Up” rule (by clicking in the middle) and hit the Duplicate button 3 times. Now modify these new rules for “Down”, “Left”, and “Right.” (IF the DOWN button is pressed THEN the Frog moves DOWN etc.). When you’re done the Frog’s behavior editor should look like the following.

Complete Frog's movement behavior for all four directions

Play Test: Testing The Frog Movement Again

Take a few seconds to run your program once again and make sure you can move your Frog in all directions- Up, Down, Left, and Right.

  • If you can't, review the Frog agent's behaviors for possible mistakes and retest.
  • If it does work, AWESOME JOB!

Creating and Programming the Truck

We now have a Frog that can move forwards, backwards, left and right. From making the Frog we now gained the basic skills necessary for creating an agent and adding basic behaviors. We will now create a Truck that will drive on the Street.

Truck agent

Create and draw the Truck Agent: Create a new agent called Truck, the same way you created the Frog and the Street. As you did when you created the Frog, draw the picture you’d like to use to represent the truck.

Program Truck Movement: Now let's Add a Behavior to the truck that allows the truck to move from left to right. Open the Truck's behavior editor. We want our Truck to move to the right every so often, as long as their is road to the right. Drag the "See" condition and click on its depiction parameter to define that the Truck needs to see a Street and its direction parameter (arrow) to indicate that it needs to see the Street to its right. Add the "Once every" condition and type 0.5 to specify that the truck will move only every 0.5 seconds. Then, put the "move" action in the then part to complete the behavior. The behavior should look like the following:

Truck movement behavior: The truck moves to the right every 0.5 seconds as long as there is road in front of it.

Play Test: Testing the Truck Movement

Now let's test our program to see how the Truck agent works. In the Worksheet window, Place a few Truck agents on the street, save the worksheet, and hit the "Run" button.

  • Do the trucks move? If the trucks do not move, go back to the steps above and make sure you implemented the behavior as described. Also, in the worksheet, make sure there is a street to the right of the trucks. If the trucks do move, let the program run.
  • What happens with the trucks when they reach the end of the street? Do the trucks disappear?
  • Are more trucks created from the left? How are we going to get more trucks to appear?

We need to have trucks appear on the left, drive across the street, and disappear on the right. So far our trucks just drive across the street. We will now make a Tunnel agent that will create the trucks on the left of the street and erase the trucks on the right.

Creating and Programming the Tunnel

We need to make an agent that creates our truck on one side of the screen (because in Frogger, trucks appear on one side) and erases the truck on the other side (as the trucks "drive off" the screen). Think of this as a “tunnel” where the trucks originate from and disappear into.

Create the Tunnel Agent: Now, in the Gallery window, select New Agent again, name this agent Tunnel.

Draw Tunnel depiction: First, draw one tunnel depiction using the depiction editor (like you have for our previous agents).

Tunnel Agent

Create the second Tunnel depiction: The tunnel agent has 2 depictions-- one depiction for trucks coming out of the tunnel, and another depiction for the truck going into the tunnel (use the Tunnel picture to the right as a reference). An agent can have multiple depictions that can represent different agent states. After you have completed the first tunnel picture, you need to in the Gallery window choose the Tunnel agent and if you want to draw a depiction for the end tunnel from scratch, click the "New Depiction" button and edit the new depiction like before. However, you can easily rotate the original Tunnel depiction to use as the second depiction by selecting the Tunnel depiction, then using the Gallery->Duplicate Depiction->Flip Horizontal... menu option and naming your new depiction. Your Tunnel agent should now include both pictures.

Place Tunnel agents at the right and left end of the street: Using the pencil tool, place the appropriate tunnel agents at each end of the street lanes as shown below and make sure you save your worksheet.

Tunnels and Streets in the Worksheet

We must now define the Tunnel behavior. Basically we want to create the behaviors such that the Tunnel periodically creates Trucks on the street.

Add Truck-generation behavior to Tunnel agent: Open the Behavior Editor for the Tunnel Agent and create a rule that looks like the following:

The Tunnel 'Create Truck' Behavior

Explanation: We want the Tunnel to create a Truck to its right, but only if there is street there. Otherwise, if there is, say another car, it shouldn't create one, because the Trucks will then pile up on top of each other. We also want our trucks to be created in a 'non-uniform' fashion, meaning we don't want the trucks to be created in such a way that the user can easily figure out the pattern of how often the trucks are created. So the behavior states "If there is street directly to the right of the Tunnel Agent, Then create a Truck once every 0.6 seconds." It also says that "this behavior has a 25% chance of happening." So every 0.6 seconds there's a 25% chance that the tunnel will create a truck agent on the street to the right.

Revisiting the Truck: Making Trucks Disappear at the End of the Road

Now that we have the Tunnel at the end of the road, we need to tell the Truck to erase itself when it gets there.

Add Truck Erase Behavior: Open the Truck's behavior editor and add a new rule by using the "New Rule" button at the bottom of the window. Then, add conditions and actions to have the Truck erase itself when it reaches the end tunnel. The complete behavior of the Truck with its two rules will look as follows:

The complete Truck behavior - erasing itself at the end of the tunnel and moving as long as there is street ahead of it

Explanation: If there is a tunnel to the right of the truck, the Truck should disappear by erasing itself (note that the "dot" in the direction parameter refers to the agent itself). So if there is a tunnel to the right of the Truck we have the Truck agent erased. Otherwise, if there is a street directly to the right of the Truck, the Truck will move to the right once every 0.5 seconds.

Play Test: Truck and Tunnel Behaviors

Now let's test our program to see how the Truck and Tunnel agents work. In the Worksheet window hit the run button.

  • Do the Tunnels on the left (at the beginning of the street) create Trucks?
  • Do the Trucks disappear when they reach the Tunnels on the right (at the end of the street)?

If one of these does not work, go back to the Truck and Tunnel behaviors and see if the behaviors are programmed correctly. If both of these work correctly play around with the game. Move the frog into the street and see if you can make it across. Try to have the frog get hit by a truck.

  • What happens? What's wrong?

Programming Truck collision with Frog

Frog Agent with Squished Frog Depiction

We're almost done but we're missing one extremely important behavior: the behavior that deals with the collision between the truck and the frog!

Add Squished-Frog depiction: Before we add the Frog-Truck collision behavior, we need to add a depiction that represents the squished frog to use when the when the frog gets hit by the truck. Please note that the squished frog isn't a new agent; it's just a squished version of our original frog agent. In the Gallery Window select the Frog agent. At the bottom of the Gallery Window click the "New Depiction" button and name it "squished frog." Then, select the new depiction, and edit it to represent a squished frog.

Add Frog-Truck Collision in the Frog's behavior: Finally, we need to add another rule to the Frog. If our Frog encounters a Truck to it's left, it needs to become a squished frog (basically if the frog is in front of the moving truck it gets squished). To accomplish this, we add the following new rule to the Frog agent behavior.

Frog Agent with Squished Frog Depiction

Explanation: If the Frog Sees a truck directly to it's left, then we first play the "honk" sound. Then we change the Frog's appearance to look like the squished frog. We wait for 0.5 seconds (so that the player has enough time to see the squished frog and realize that the frog collided with a truck). Then, we erase our Frog agent and Reset the game so that the player can try again!

Finishing Up

Now Let's Go back to the Worksheet --Let's do one final play test to see if we programmed everything correctly. Here is a picture of what your level might look like:

The Worksheet with Tunnels, Trucks, and the Frog.

Play Test: Game Checklist

Hit Run and see if everything works correctly. Check

  • Does the frog move all directions?
  • Do the trucks get created and erased?
  • Does the Frog-Truck collision work correctly?

If your answer to one of these is no, go back to the related section and see what you might have done wrong.

Otherwise, if everything works correctly GOOD JOB! You have created part 1 of your first game! You can now go back and make any changes you want to make (like redrawing an agent, adding other behaviors etc.), or you can go on to Frogger Tutorial 2 which involves adding a river, turtles, and logs as well as a goal at the top of the screen.

External links