Creating a Timed Bridge
Creating a Timed Bridge
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.