Frogger Tutorial
From Gamewiki
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
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.
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
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.
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!
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.
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).
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.
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:
Click the “Apply” Button located at the bottom right of the Behavior Editor to make these changes take effect for the Frog agent.
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.
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.
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:
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).
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.
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:
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:
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.
Programming Truck collision with Frog
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.
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:
 |
|---|
|
Hit Run and see if everything works correctly. Check
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. |
