Frogger Tutorial 2 Msg Passing

From Scalable Game Design wiki
Jump to navigation Jump to 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 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.

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

Log Agent.png

Create the Log Agent : Again you can use the above picture as a guide.

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


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. So the Log Agent must have the Following Behaviors:


The Log Erase Behavior The following behavior erases the log if it encounters a Log Maker to the Right

LogEraseBehavior.png


The Log Move Behavior In the next behavior, the Log moves once every .5 seconds if there is water to the right of it (similar to the truck that moved once every .5 seconds if there was road to the right of it).

LogMoveBehavior.png



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?

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.

  • Now, Control the frog and try to jump on a Log, What happens? Does the Frog Move with the Log?

We need to figure out how to get the Frog to Move with Log!

Getting the Frog to Move with The Log

"Somehow the motion of the Frog is connected to the motion of the Log. But how?! In this video, we show how "messages" create an illusion of unison movement between the frog and log."

<flvplayer width="640" height="480" autoplay="false" hidecontrols="false">Froggertutorial.flv‎‎</flvplayer>


Add Log behavior to deal with the Frog So from the Log's standpoint, if it moves right while a frog is on top of it, it sends a message to the frog to move right. Adding The following rule to the Log Agent behaviors accomplishes this.

LogBehaviorForDealingWithFrog.png


So, In the Above Rule, if the Log sees river to the right of it AND is stacked immediately below a Frog Agent, it still moves to the right once every .5 seconds-- BUT IT ALSO "Makes" the agent to its left (which is the Frog) move Right too. Remember in the Movie the Log Moves and Then Tells the Frog to move immediately after. We put this rule BEFORE the other move right rule-- your log behavior rules should look exactly as follows

FinalLogBehaviors.png

The Make action calls a rule in the Frog Agent-- this means we have to modify the Frog Agent with a "move_right" method to accept this message and move right.

Frog Agent Behaviors Revisited: Add the following behavior to the Frog Agent

Add Frog Behavior to Move Open the Frog Behavior window and click the "New Method" button located at the bottom of the window. This will create the following method

NewMethodPicture.png

We want to change the name of the Method to "move_right" (which is the Message the Log sends to the Frog when it moves to the right). So, change the title of the method (it should be titled "method_1" or "method_18" etc. To "move_right"). Now if this method is called, we want the Frog to Move right. So in our actions, we make the Frog move to the right when this method is called. The final Frog behavior looks as follows

FrogLogInteractionsMoveRightMethod.png

Now Whenever the Log Moves Right, it tells the Frog to Move Right and thus both the Log Agent and Frog Agent Look Like They Are Moving Together!

WorksheetRunButton.png
Play Test: Testing Frog Log Interactions

Get the Frog to Jump on the Log Again

  • Does the Frog Move Left to Right with the Log?

If the Frog does not move with the log, go back and check the behaviors of the Log and the Frog. Among other things, make sure your "move_right" method is spelled correctly.

If Everything works Great Job! We will now Program the Frog Turtle Interactions which are very similar to the Frog Log Interactions.

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

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). Also the Frog Turtle Interaction is the Same as the Frog Log interaction except now the Turtle moves left and then sends a message to the Frog to move left.

The Turtle Maker Agent

TurtleMaker.png

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.

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

We will now create the Turtle Agent.

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.

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 Frog must also move along with the Turtle 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)


Behaviors for the Turtle Agent

TurtleBehaviors.png

These rules should make sense-- if the Turtle Sees a Turtle Maker Agent to the Left it should disappear since the Turtle is moving from Right to Left. The middle Rule states that if there's a Frog on top of the Turtle, After the Turtle moves Left, it'll give the Frog a "move_left" command (exactly the way that the Log gave the Frog the "move_right" command). The last Rule states that if there's river to the left of the turtle, it should move left.

Finally, Like we did with the Frog Log interactions, we have to update the Frog to move left when it gets the "move_left" message from the Turtle. This is done by adding the following method to the Frog behaviors (just like we did for the Frog Log interactions above).

FrogBehaviorForFrogTurtleInteractions.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!