Creating a Timed Bridge
Creating a Timed Bridge
Students will be able to:
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
- Find a place to build a bridge, like a river or a large gap in an obby.
- Create three parts like below named: TimerDisplay, Bridge, ButtonBridge.
- Select the bridge and in the Properties Window:
- Change Transparency to 0.8
- Scroll-down and uncheck CanCollide
- 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.
- Select TimerDisplay and add a Surface GUI.
- 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
- 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.
- To make the SurfaceGUI larger; click the arrow left of CanvasSize to expand it, and change both X and Y to
Resize the Text Label
The SurfaceGUI now covers the part, but the TextLabel is too big.
- Select the TextLabel.
- In the TextLabel properties, expand the Size section. Then, expand X and Y.
- For both X and Y, change Scale to
1and Offset to
0. This makes the TextLabel the same size of the part’s face.
- Scroll-down, and check TextScaled. This automatically scales your text to the Surface GUI.
- 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
- In Bridge, create a new script named TimedBridge.
- In TimedBridge, create two variables to store the bridge and button.
- Create two variables to store the timer part and it’s display.
- 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.
- Create a new function named
startTimer()with a print statement inside. You’ll use the print statement to test your code.
- 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.
- To start the timer, in the
if humanoidstatement, call the
- Under the end of
buttonPressed(), connect the
buttonPressed()function to the button’s Touched event.
- Run the game; you should see your test print statement in the Output Window whenever you touch the ButtonBridge.
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
- To make the bridge walkable, in
startTimer(), change the bridge’s transparency property to opaque and the CanCollide property to
- To create a timer that counts down,create a for loop with the following values:
- Control variable: named
count, set to
- End: 0
- Increment: -1
- To show the timer to players, change the text in
timerText.Text = count. Each time the for loop goes through an iteration, it’ll show players the next number in the timer.
- 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.
- 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.
- At the top of your script under your variables, create a variable named
timerActiveand set it to
falsesince nobody has pressed the button yet.
- To makes sure
startTimer()only starts when
timerActiveis false, add a second condition to the if statement in
- To keep
startTimer()from restarting before the timer runs out, set the boolean
- 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.
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
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.
- In the
startTimer()function, after the for loop, set the bridge back to its original properties by changing the bridge’s transparency to
0.8and CanCollide to
- Right now the display text stays at 0. To make it blank again, change the
timerTextto an empty string.
- Since you’re now done with the timer, set the
false. This will also allow the timer to restart next time the button is touched.
- Playtest and check to make sure the bridge can be used multiple times.
Finished Project Sample
Download the finished project here.