Creating a Timed Bridge

20 min

Creating a Timed Bridge

Person running across obstacle course with timed bridge

Learning Objectives Students will be able to:
  • Create a bridge that appears when a button is touched and disappears after a for loop has finished.
  • Display a timer using a Surface GUI to let players know how many seconds they have left to cross a bridge.
  • Use a boolean variable to check if a timer has started.
Prerequisites Students should:

For this bridge, players will touch a button to make a bridge walkable for a limited time before it disappears. To create a timer and show the remaining time to a player, you’ll use for loops.

Creating the Bridge and Timer

Create the Bridge Parts

  1. Find a place to build a bridge, like a river or a large gap in an obby.
  2. Create three parts like below named: TimerDisplay, Bridge, ButtonBridge.
  1. Select the bridge and in the Properties Window:
  • Change Transparency to 0.8
  • Scroll-down and uncheck CanCollide
  1. Anchor all three parts. If they’re not anchored, the bridge won’t work correctly.

Create a Surface GUI

When crossing the bridge, players will need to see how many seconds are left before the bridge disappears. One way to display images or text is by adding an object called a Surface GUI to a part. Surface GUIs can also be used to create in-game signs, custom health bars, and inventory systems.

  1. Select TimerDisplay and add a Surface GUI.
  1. In the SurfaceGui you just added, add a TextLabel.

Right now, you might not even be able to see the TextLabel, it’s really small and possibly on the wrong side of the timer display. So players can better see the timer, you’ll change the side the Surface GUI is attached to and make the Surface GUI larger.

Fix the Surface GUI

  1. Select the Surface GUI. In Properties, find the Face property and use the drop-down menu to change where the Surface GUI appears. Try each option until you find the side that faces players crossing the bridge.
  1. To make the SurfaceGUI larger; click the arrow left of CanvasSize to expand it, and change both X and Y to 100.

Resize the Text Label

The SurfaceGUI now covers the part, but the TextLabel is too big.

  1. Select the TextLabel.
  2. In the TextLabel properties, expand the Size section. Then, expand X and Y.
  1. For both X and Y, change Scale to 1 and Offset to 0. This makes the TextLabel the same size of the part’s face.
  1. Scroll-down, and check TextScaled. This automatically scales your text to the Surface GUI.
  1. Next to the Text property, delete the current text so the field is blank and nothing is displayed. You’ll be using a script to display the timer.

Setting up the Script

Now that the timer is in place, create a script to control the bridge and display the countdown number to players.

Create the Timer Script

  1. In Bridge, create a new script named TimedBridge.
  2. In TimedBridge, create two variables to store the bridge and button.
  1. Create two variables to store the timer part and it’s display.
  1. Create a number variable for the timer’s duration in seconds. While this script uses 5, adjust this as needed to give players enough time to get across the bridge.

Set Up Functions and Events

To use the bridge, you’ll need to create two functions. One function will make the bridge walkable and display the timer. The other function will listen for if a player touches the button that activates the bridge.

  1. Create a new function named startTimer() with a print statement inside. You’ll use the print statement to test your code.
  1. Code a function named buttonPressed() to check if a humanoid touches the button. Try to write the code on your own. Open the box below to check your work.

  1. To start the timer, in the if humanoid statement, call the startTimer() function.
  1. Under the end of buttonPressed(), connect the buttonPressed() function to the button’s Touched event.
  1. Run the game; you should see your test print statement in the Output Window whenever you touch the ButtonBridge.
Troubleshooting Tips

Issue: Error message saying: "... is not a valid member of workspace":

  • In the TimedBridge script, check that all parts are spelled exactly as they’re seen in the Explorer.

Issue: Can’t see your parts:

  • Make sure all three parts are Anchored.

Creating the Timer

Whenever players step on the bridge, startTimer() will make the bridge walkable and start the timer. Once the timer reaches 0, the bridge will become unwalkable, causing anyone who’s not fast enough to fall.

Make the Bridge Walkable

  1. To make the bridge walkable, in startTimer(), change the bridge’s transparency property to opaque and the CanCollide property to true.
  1. To create a timer that counts down,create a for loop with the following values:
  • Control variable: named count, set to timerDuration.
  • End: 0
  • Increment: -1
  1. To show the timer to players, change the text in timerText to display count by typing timerText.Text = count. Each time the for loop goes through an iteration, it’ll show players the next number in the timer.
  1. Use a wait function to make the for loop run only once a second.
Keep Code Indented

To make your code easier to read, check that your code is indented like the block above. To indent your code:

  • Tab to move a line forward.
  • Ctrl / Cmd + Tab to move a line back.

  1. Run the game. When you touch the button, the bridge should appear and the timer will start. Notice that if you move around on the button, the timer will keep restarting. This is because the for loop is being called each time you touch the button and starting the for loop from the beginning. This will be fixed in the next section.

Keep the Bridge from Restarting

To keep the timer from constantly restarting, you’ll need to add another variable that will control whether or not startTimer() is allowed to be called again. This variable will use a new type of value called a boolean. Booleans are written the same way as other variables, but instead of using numbers or strings, they can only be set to true or false.

In this situation, the script will use a boolean to check if the timer is currently running before starting it.

  1. At the top of your script under your variables, create a variable named timerActive and set it to false since nobody has pressed the button yet.
  1. To makes sure startTimer() only starts when timerActive is false, add a second condition to the if statement in buttonPressed().
  1. To keep startTimer() from restarting before the timer runs out, set the boolean timerActive to true.
  1. Playtest the game and make sure the timer doesn’t restart anymore. While the timer doesn’t restart, it also can’t be used more than once. To make the button reusable, you’ll reset the boolean in the next section.
Troubleshooting Tips

Issue: Timer changes numbers without counting down:

  • Check that you’ve added a second condition in buttonPressed's if statement.
  • Make sure at the beginning of startTimer() that you set timerActive to true.

Reset the Timer

To finish the script, you’ll change the boolean and bridge properties back to what they were at the start of the game so the bridge can be used more than once.

  1. In the startTimer() function, after the for loop, set the bridge back to its original properties by changing the bridge’s transparency to 0.8 and CanCollide to false.
  1. Right now the display text stays at 0. To make it blank again, change the timerText to an empty string.
  1. Since you’re now done with the timer, set the timerActive boolean to false. This will also allow the timer to restart next time the button is touched.
  1. Playtest and check to make sure the bridge can be used multiple times.

Finished Project Sample

Project File

Download the finished project here.

Finished Script