Category:Frogger Tutorial

From Scalable Game Design wiki
Jump to: navigation, search

Agent Sheets

Building Frogger Tutorial

The purpose of Agent Sheets is to teach programming and logic. With Agent Sheets you learn these important concepts without writing any computer code. At the end of this tutorial you will have created an interactive game that is fun to play.

Screenshot from the Original Frogger Arcade Game

The game you will create in this tutorial is modeled after the classic 1980’s arcade game ‘Frogger.’

Frogger is an arcade game introduced in 1981. The object of the game is to direct frogs to their homes one by one. To do this, each frog must avoid cars while crossing a busy road . . . (Wikipedia) 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 aim is to get the frog to the top of the screen without getting squashed by the moving cars.

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!

Getting Started

To start a new AgentSheets project (New Project) go to file and select new project

Double click on the Agent Sheets icon to start the program. Click on the File drop down menu and select New Project

Name the File "Frogger" (if "Frogger" is taken try to put a number behind it like "Frogger_2235") and Click OK.
Another Dialog box should appear (it should say "Define Agent Size"). Don't change anything-- just Click OK again.

Creating Agents

A window should appear in the top left; this is the Gallery Window.
The lower of the two faces

Click on the Gallery Drop-down Menu at the top of the screen and select New Agent. Name the agent “Frog.” We will now make the Frog character.
The frog agent should now appear in the gallery. Double click on the lower of the two faces
The Depiction Editor should now open. In this window we draw what our frog will look like. In the Depiction Window hit the Clear button at the bottom of the screen or open the Edit Drop-down Menu and select clear. This should clear the drawing in the window.

Using the pencil tool on the left and selecting the green color at the top, draw what you would like your frog character to look like. If you make a mistake you can use the eraser tool to the left or the clear button at the bottom to clear the drawing. You can also use the shape tools to the left to make a circle or a rectangle.

Frog Drawing

Click the DONE button at the bottom of the window when you are finished. We have now created the Frog agent and figured out what the frog looks like. After you click DONE, If you are still not satisfied with how the frog looks you can click on the lower of the two faces in the Behavior Window and modify the picture. Now, it's time to make more agents!

Now Let’s make the Street. Similar to how you created the Frog agent, Click on the Gallery Drop-down Menu at the top of the screen and select New Agent. Name the Agent “Street.”
Again as we did with the Frog, Open the Depiction Window by clicking on the lower of the two faces. Clear the face drawing image and then draw a street that goes across from left to right. Click done when finished.

Drawing the Street Agent

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

Creating a Worksheet

The Worksheet. Click and Drag to Resize

Go to the File Drop-Down Menu and select New Worksheet. Resize the window to cover the rest of the screen not taken up by the Gallery window (by clicking and dragging the bottom right of the window).

Click on Street Agent

The empty Worksheet is where we will create the level for our game. Our Level should be made up of the Street, the Frog, and of course Cars. Let’s first create the Street. The Street will be a series of lanes that run across the Worksheet screen. We will do this by placing the Street agent on the worksheet.

Click on the Street agent in the Gallery window so that the Agent is selected.

Worksheet with street drawn inside

Now in the Worksheet window, you can 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 screen. 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 in the top left to clear parts of the picture.

Now Let’s place our Frog Agent on the Street. We use the same basic procedure we used to place the street in the worksheet window.

Click on the Frog in the Gallery window, Click on the Pencil tool in the Worksheet window, and then click anywhere in the Worksheet window where you want to place your frog. Once you click, your frog should appear. If you want to erase the frog, just use the eraser icon.

Programming The Frog: Giving Agents Behaviors

We now need to figure out what our Agents do while the game is running. If we look at the original description of the game we see that the Frog must move in the correct direction when given the Up, Down, Left, and Right command from the keyboard. Let’s add this.

Top Frog Picture

In the Gallery window double click on the top frog picture; This should bring up the Behavior window for the frog.

Frog Behavior Window

The kind of behaviors that we will give to our Agents are called If-Then statements. For controlling the Frog our If-Then statement is “If the Up key is hit, Then the frog will move up.” Overall we should have 4 If-Then statements, one for each direction (Up, Down, Left, Right).

Double click on the “If” box. This will open the If Conditions Box (it should be blue).

the "If" conditions box

Click and drag the “Key” box by clicking on the “Key” label and dragging it into the “if” part of the Behavior window. Click on the letter within in the Key box (it should be default 'A') and it should say “Press Any Key.” Hit the Up Arrow on the Keyboard. We also need to decide how fast the frog can move. The way we set this is by allowing the Frog to move a once every so often. Grab the “Once Every” label and drag it into the “if” part of the Behavior window under the “Key.” Change the number in this box from 1 to 0.2. This allows the frog to move up once every 0.2 seconds (or, to put it another way, you can move the frog 5 times every second).

Now If the up Arrow is hit, Then we want the Frog to move up one space. So double click on the “Then” part of the Behavior window to open the Then Conditions Box (it should be red).

the "Then" conditions box

Drag the “Move” command to the “Then” part of the Behavior window. Click on the arrow in the “Move” command box and change the direction to Up. When you’re all done the Behavior window should look like the following

The Frog Up Behavior

If it does click the “Apply” Button located at the bottom right of the Behavior window.

Testing the Program

Switch to the worksheet and click the green Run button (located on the bottom left). Hit the up arrow—the frog should move up. If your frog does not move up—go back through the instructions and rereading where you think you might have gone wrong. Notice we’ve only programmed the up movement—we now need to program the rest of the directions. Before we move on go to the FILE Dropdown menu and click Save. You can hit the Reset button located in the bottom right to restore your level (ie: put the frog back at the default starting position).

File Drop Down Menu Save

Back To Programming The Frog

We have to add three more rules for the “Down”, “Left”, and “Right” directions. Go to the Frog’s Behavior window and hit the “New Rule” button located at the bottom left three times. Similar to how the “Up” Behavior was added, Add behaviors 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 window should look like the following.

Frogger directional behaviors

Programming the Rest (Truck, Truck movement, Collision with Frog, and Erasing the Truck)

Programming the Rest (Truck, Truck movement, Collision with Frog, and Erasing the Truck)

We now have a frog that can move forwards, backwards, left and right. From making the Frog we now have enough information to make the rest of the game! Let’s first start out by explicitly stating the rest of the things we need to make a Frogger game. --First, we need to create a truck on one side of the screen, have it travel to the other side of the screen and then disappear. --Next, we need to make it so that if the frog and the truck intersect, the frog dies.

Making The Truck

As you did when we created the Frog and the Street, Go to the Gallery window, click on the Gallery Drop-down Menu at the top of the screen and select New Agent and name this agent Truck.

Truck agent

As you did when you created the Frog, draw the picture you’d like to use to represent the truck by opening the Depiction window (Open the DEPICTION WINDOW by clicking on the lower of the two faces in the Gallery window). Draw what you would want your truck to look like. We are going to animate the truck going from left to right so have the front of the truck pointing right →.

Making an Agent that Create and Erase the Truck

Tunnel Agent

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 and disappear into. Now, in the Gallery window, select New Agent again, name this agent Tunnel and draw its depiction.

Collision with Frog Behavior

Adding A Depiction to the Frog Agent

Finally, when the frog gets hit by the truck, we need to have an agent that represents the squished frog. The squished frog isn't a new agent-- it's just a squished version of our original frog agent. To do this we'll create a new picture for the frog agent that represents the frog after it's been hit by a truck. In the Gallery Window select the frog agent. Then go to the Gallery drop down menu and select new depiction and name it "squished frog." Draw the depiction of the squished frog.

Frog Agent with Dead Frog Depiction

Giving the

Now we have to give these agents correct behaviors. Populate the behaviors as shown in the following picture

Creating The Level

External links

Pages in category "Frogger Tutorial"

The following 7 pages are in this category, out of 7 total.