UevKF8zjRV_WEtpJsXhr
We use cookies on this site to enhance your user experience

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.
local bridge = script.Parent
local button = game.Workspace.ButtonBridge
  1. Create two variables to store the timer part and it’s display.
-- Gets the part for the display
local timerPart = game.Workspace.TimerDisplay
-- Gets the TextLabel that will display the timer
local timerText = timerPart.SurfaceGui.TextLabel
  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.
local bridge = script.Parent
local button = game.Workspace.ButtonBridge
 
local timerPart = game.Workspace.TimerDisplay
local timerText = timerPart.SurfaceGui.TextLabel
 
local timerDuration = 5

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.
local timerDuration = 5

local function startTimer()
    print("Countdown started")
end
  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.
local bridge = script.Parent
local button = game.Workspace.ButtonBridge

local timerPart = game.Workspace.TimerDisplay
local timerText = timerPart.SurfaceGui.TextLabel

local timerDuration = 5

local function startTimer()
    print("Countdown started")
end


local function buttonPressed(partTouched)
	local character = partTouched.Parent
	local humanoid = character:FindFirstChildWhichIsA("Humanoid")
	
	if humanoid then
		
	end
end

  1. To start the timer, in the if humanoid statement, call the startTimer() function.
local function buttonPressed(otherPart)
	local character = otherPart.Parent
	local humanoid = character:FindFirstChildWhichIsA("Humanoid")
	if humanoid then
		startTimer()
	end
end
  1. Under the end of buttonPressed(), connect the buttonPressed() function to the button’s Touched event.
local function buttonPressed(otherPart)
	local character = otherPart.Parent
	local humanoid = character:FindFirstChildWhichIsA("Humanoid")
	if humanoid then
		startTimer()
	end
 
end
 
button.Touched:Connect(buttonPressed)
  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.
local function startTimer()
	-- Make the bridge visible and walkable
	bridge.Transparency = 0
	bridge.CanCollide = true
end
  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
local function startTimer()
	-- Make the bridge visible and walkable
	bridge.Transparency = 0
	bridge.CanCollide = true
 
	for count = timerDuration, 0, -1 do
    
	end
 
end
  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.
local function startTimer()
	-- Make the bridge visible and walkable
	bridge.Transparency = 0
	bridge.CanCollide = true
	
	for count = timerDuration, 0, -1 do
		timerText.Text = count
	end
    
end
  1. Use a wait function to make the for loop run only once a second.

local function startTimer()

-- Make the bridge visable and walkable

bridge.Transparency = 0

bridge.CanCollide = true

for count = timerDuration, 0, -1 do

timerText.Text = count

wait(1)

end

end

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.
local timerDuration = 5
local timerActive = false
 
local function startTimer()
  1. To makes sure startTimer() only starts when timerActive is false, add a second condition to the if statement in buttonPressed().
local function buttonPressed(otherPart)
	local character = otherPart.Parent
	local humanoid = character:FindFirstChildWhichIsA("Humanoid")
	if humanoid and timerActive == false then
		startTimer()
	end
 
end
  1. To keep startTimer() from restarting before the timer runs out, set the boolean timerActive to true.
local function startTimer()
	timerActive = true
	bridge.Transparency = 0
	bridge.CanCollide = 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.
local function startTimer()
    print("Countdown started")
	timerActive = true
	bridge.Transparency = 0
	bridge.CanCollide = true

	-- For loop that counts down from timerDuration
	for count = timerDuration, 0, -1 do
		timerText.Text = count
		wait(1)
	end

	-- Make the bridge not walkable
	bridge.Transparency = 0.8
	bridge.CanCollide = false

end
  1. Right now the display text stays at 0. To make it blank again, change the timerText to an empty string.

bridge.Transparency = 0.8

bridge.CanCollide = false

timerText.Text = ""

  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.
bridge.Transparency = 0.8
bridge.CanCollide = false
timerText.Text = ""
timerActive = false
  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

local bridge = script.Parent
-- Gets the button as it's typed in the Explorer
local button = game.Workspace.ButtonBridge

-- Gets the part for the display
local timerPart = game.Workspace.TimerDisplay
-- Gets the Text that will display the timer
local timerText = timerPart.SurfaceGui.TextLabel

-- How long players have to cross the bridge
local timerDuration = 5
local timerStarted= false

local function startTimer()
    print("Countdown started")
	timerActive = true
	bridge.Transparency = 0
	bridge.CanCollide = true

	-- For loop that counts down from timerDuration
	for count = timerDuration, 0, -1 do
		timerText.Text = count
		wait(1)
	end

	-- Make the bridge not walkable
	bridge.Transparency = 0.8
	bridge.CanCollide = false
	timerText.Text = ""
	timerActive = false

end

local function buttonPressed (partTouched)
	local character = partTouched.Parent
	local humanoid = character:FindFirstChildWhichIsA("Humanoid")
	print("part touched")
	
	if humanoid and timerActive == false then
		print("starting timer")
		startTimer()
	end
end

button.Touched:Connect(buttonPressed)