Frogger Tutorial 2

From Scalable Game Design wiki
Jump to: navigation, search
Frogger-like game described in the tutorial

Recap

Our aim is to create the frogger game depicted at the top of this page. In the first part of the Tutorial we started creating Frogger. We Created the following Agents and Behaviors

Frog:

  • Moves Up, Down, Left, and Right in response to keyboard input.
  • Becomes Squished when a Truck collides with it.

Agent:Trucks

  • Moves to the right if there is Road directly to the right
  • Disappears if there is a Tunnel directly to the right

Agent:Tunnel Agent

  • Creates Trucks

Agent: Roads

  • No Behaviors

WorksheetRunButton.png
Play Test: Playing the game

If it's been awhile since you played the game you created in the first tutorial, run the Program and play the game to get a feel for how you left it. Once you are satisfied that everything is running normally, it's time to add more agents and finish the game!

What Do We Need To Add?

Compare the above picture to our current game--> what do we need to add to our game?

The Above Picture has the following agents

  • River
  • Logs -- We will have these move from left to right.
  • Log-Maker (The bridges to the left of the river create logs and the bridges to the right of the river erases logs. This is similar to how the Tunnels to the left and right created and erased trucks)
  • Turtles -- We will have these move from right to left.
  • Turtle-Maker (The Islands create and delete turtles)
  • Grotto (the flag at the top) so the Frog can beat the level

Let's summarize how we will incorporate these new agents into the level

Agent: River

  • The Frog must drown if it falls in the river.

Agent: Log

  • Float On Water. We'll have the logs float from left to right
  • Frog Must Be Able to hop on top of the Log
  • Logs Must Disappear when it reaches the end of the river

Agent: Log_Maker

  • Creates Logs if there is water to the right (Logs Float from Left to Right)

Agent: Turtle

  • Float On Water. Unlike the Logs, We'll have the Turtles float from right to left.
  • Frog Must Be Able to hop on top of the Turtle
  • Turtles Must Disappear when it reaches the end of the river

Agent: Turtle_Maker

  • Creates Turtles if there is water to the left (because we want our Turtles to go from right to left).

Agent: Frog :We must update the Frog Agent

  • Jump on top of and move with the Logs and the Turtles
  • The player loses if the frog falls in the water (the Frog Drowns)

Agent: Grotto

  • If the Frog gets to the grotto, the player wins!

The River Agent

RiverAgent.png

Create the River Agent: The River Agent will have no behaviors of its own-- it will just be a depiction. Other agents, like the Log and Turtles, will invoke the River for their own behaviors.

Place the River on the Worksheet: You can use the picture to right as a guide of what the river depiction can look like; You can use the picture at the top of this tutorial as a guide to where you can place the river.

Modifying the Frog Behavior The river agent itself has no behavior; however, if the frog is directly above the river, the frog must drown and the game must reset (this is similar to when the frog gets hit by a truck and the frog gets squished and the game resets). Therefore, we have to go back to the Frog Behaviors and add the following rule:

FrogRiverBehavior.png

In the above rule you can see that if the frog is directly above the river, the simulation resets and the frog gets erased. To let the player know that the frog is drowning you can add another depiction (similar to "squished frog"); however, in this example, we use the "Speech Action" (denoted by the mouth) that allows us to type in a phrase to be spoken by the computer (on windows machines the might not be heard but the text of the message is put on the bottom of the screen). We have the speech action speak the words "I cannot swim"-- this notifies the user that the frog should not jump in the water.


WorksheetRunButton.png
Play Test: Testing the Drowning behavior

Now let's quickly test our program to see what happens if the Frog Agent jumps in the River

  • Does the user get notified that they did something wrong (through sound or visually if you used created a drowning depiction?)-- If you are on a Windows machine the sound may not play but you should see text at the bottom of the screen.
  • Does the Simulation Reset?

If one of these does not work correctly, go back through the frog behaviors and see where you might have made a mistake.

Otherwise, Good Job! Now let's add the agents that float on the river and allow our Frog to cross!

The Log/Log Maker Agent + Behaviors

LogMaker.png

Create the Log Maker Agent: This Agent will create and delete the logs ( exactly similar to the Tunnel Agent we made in Frogger Tutorial Part 1 that created and deleted trucks ). Just create a Depiction for right now; in our example, we use a bridge.

Do not worry about programming the behaviors just yet; we will create the Log Agent first and then do the behaviors of the Log Maker and the Log Agent together.

We will now create the Log Agent.

Log Agent.png

Create the Log Agent : Again you can use the above picture (or the picture to the right) as a guide. Don't worry about the Log behaviors right now-- We will do the behaviors after we do the Log Maker behaviors

We will now program the Behaviors for the Log Maker Agent and the Log Agent.

Create Behaviors for the Log Maker Agent: Logs move from right to left; therefore, If there is river water to the right of the Log Maker, the Log Maker creates Logs. The rules for the Log Maker are as follows.

LogMakerBehaviors.png

Notice that every .6 seconds there is a 50% chance of a log being created. This is to make the game challenging-- if logs were always created then there would be less of a challenge for the frog to cross the river.

The Log Agent Behaviors

Create Behaviors for the Log Agent: The Log Agent Moves from left to right. Therefore the Log Agent needs to move right when there is water to the right of it and erase itself when there is a Log Maker to the right of it. However, the log must also Transport the frog if the frog is on top of the log. So instead of using the move action, we use the transport action-- which works like move, except if there is an agent on top of the log, it 'comes along for the ride'. So the Log has to have the following behavior:

LogAgentBehaviorsWithTransport.png

  • The Log Erase Behavior The first rule erases the log if it encounters a Log Maker to the Right
  • The Log Transport Behavior In the second rule, the log transports itself and anything on top of it to the right, every .5 seconds, assuming there is water there. Therefore, if an agent is above the log, it moves along with the log.

Please note that with the above behavior, the Log agent can transport anything that lands on top of it, not only Frogs, so if you want a Log that is discriminating about what it transports, you need to specify that.


WorksheetRunButton.png
Play Test: Testing the Log and Log Maker

Now let's test our program to see how if the Log Agent works. In the Worksheet window, Place two Log Maker Agents across from each other on each side of the river. Use the picture at top if you need a guide as to where to place agents. Hit play

  • Do Logs get created?
  • Do the Logs Move across the river and disappear when they reach the Log Maker Agent?
  • Does the Frog Get Transported when it jumps on the log?

If they do Super Job! If not go back to the behaviors of the Log Agent and the Log Maker Agent and see where you might have made a mistake.

Turtle and Turtle Maker is Similar to The Log and the Log Maker

.Create the Turtle Maker Agent: This Agent will create and delete the turtles (similar to the Log Maker Agent we Just created). Just do the Depiction, in the above example we use palm trees on a sand island The Turtle and Turtle Maker works Exactly like the Log and Log Maker with the difference that the Turtles move Right to Left (as opposed to the Logs that moved Left to Right). So the Turtle Maker should create new Turtles to the Left.

The Turtle Maker Agent

TurtleMaker.png

Create the Turtle Maker Agent (pictured right).


We will do the behaviors below

The Turtle Agent

TurtleAgent.png

Create the Turtle Agent: Again you can use the picture to the side as a guide.

We will now program the Behaviors for the Turtle Maker Agent and the Turtle Agent.

Behaviors for the Turtle Maker Agent

What behaviors do we need to program for the Turtle Maker Agent and the Turtle Agent?

Program Turtle Maker Behaviors For the Turtle Maker Agent, similar to the Log Maker Agent we Just made, we want to create turtles every so often. So the Turtle Maker Agent Behaviors should resemble the following

TurtleMakerBehaviors.png

This rule is simple, Basically the Turtle Maker Agent Makes a Turtle to the Left every so often if there is River to the Left.

Behaviors for the Turtle Agent

Program Turtle Agent Behaviors What behaviors should the Turtle Agent have? The Turtle Agent must float on the river from Right to Left and disappear when it reaches the Turtle Maker Agent at the end of its path. Also if the Frog Jumps on the Turtle Agent, The Turtle must Transport the Frog from Right to Left. Let's try the following Behaviors for the Turtle (notice how similar they are to Behaviors we did for the Log)

TurtleTransportImage.png


WorksheetRunButton.png
Play Test: Testing the Turtle and Turtle Maker

Now let's test our program to see how if the Turtle Agent works. In the Worksheet window, Place two Turtle Maker Agents across from each other on each side of the river. Use the picture at top if you need guidance on where to place the agents. Hit play

  • Do Turtles get created?
  • Do the Turtles Move and disappear when they reach the Turtle Maker Agent?
  • Now, Control the frog and try to jump on a turtle, What happens? Does the Frog Move with the Turtle?

If something does not work correctly go back and see what behaviors you put in.

If Everything works correctly Amazing Work! You're Almost done!

Fill out the level If you haven't already, you can place an alternating rows of Log Makers and Frog Makers on the sides of the river (if you need a guide use the picture at the top of this tutorial). Once you're satisfied with the way your level looks, it's time to create the win state!

The Grotto

Grotto.png

The Final Thing we need to program is a win state. At the very top of the Level is a flag we refer to as "the Grotto" or the Frog's home. If the user is able to get the frog across the Road, and across the river the user will reach the Grotto and some sort of victory message will be shown (like "YOU WIN!" or something to that effect). To do this we first make the Grotto Agent; and then we put a final rule in the Frog Agent such that if a Frog is above the Grotto, some sort of victory message is played.

Make the Grotto and Place it on top of the Screen Use the top picture as a guide as to where to place the Grotto Agent. The Grotto will have no behaviors, just a depiction.


Now, if the Frogger is over the Grotto, we need to have a victory message. We do this by adding the following behavior to the Frog.

FrogGrottoBehavior.png

So if the Frog is over the Grotto, We play a victory message, and since the game is over, we stop the simulation.

WorksheetRunButton.png
Final Play Test

Now let's test our program One final time

  • Does a message get played or appear when the frog reaches the Grotto ?
  • Does everything else work like you expect it to?

Great Job! You have just Completed a full computer game! Feel free to go back through and make any improvements to your game or experiment with any ideas/agents/behaviors you may have. You can even add another level. Awesome work!