Module 11 · Roblox UI systems
Button activation, UI state, and feedback
Use Activated, explicit UI state, and optional motion that respects a learner preference.
What you will learn
- Use Activated for all-device primary input
- Keep UI state explicit
- Provide a reduced-motion path
- Activated
- A GuiButton event for primary activation across supported input methods.
- TweenService
- A Roblox service for interpolating supported properties over time.
Loading saved progress…
Understand
Read the idea and follow a worked example.
Why this matters
Coin Quest buttons should work with mouse, touch, or gamepad and should not depend on animation to communicate success.
The mental model
Activated represents the button command across devices. Update text and disabled state from explicit state, then add restrained motion as optional polish.
A reduced-motion preference should choose an immediate property update while preserving the same information.
New words and symbols
--!strict asks Studio to check your code for type mistakes. It is an instruction for the editor and produces no Output message.
Matching quotes such as "hello" surround a string: a piece of text. The quotation marks tell Luau where the text starts and ends.
local is read as “local”: it creates a name that is available only in the current code scope.
== is read as “equals equals”: it compares two values and produces a boolean.
if is read as “if”: it starts a decision by evaluating a condition.
then is read as “then”: it marks the body that can run when the condition is truthy.
else is read as “else”: it provides the fallback branch.
end is read as “end”: it closes a block such as a decision, loop, or function.
A tiny example
--!strictlocal TweenService = game:GetService("TweenService")local button = script.Parentassert(button:IsA("TextButton"), "Controller must be under a TextButton")local reduceMotion = button:GetAttribute("ReduceMotion") == truebutton.Activated:Connect(function() button.Text = "Requested" button.Active = false if reduceMotion then button.BackgroundTransparency = 0.2 else TweenService:Create(button, TweenInfo.new(0.15), { BackgroundTransparency = 0.2 }):Play() endend)Line by line
- 3
TweenService is requested explicitly.
- 5
The selected button is the target.
- 8
A visible setting chooses the motion path.
- 9
Activated supports primary input across devices.
- 10
Text communicates state without relying on color.
- 11
Active false prevents repeated requests.
- 12
Reduced motion receives an immediate update.
- 15
The optional tween is brief and nonessential.
Read the code aloud
Read one statement at a time: name the value being read, what the operation does, and where its result goes. Keep identifiers exactly as written so you can find them again in the code.
Pause at calls, conditions, and loops. Explain when the body runs before moving to the next statement; use the line notes above when a symbol is unfamiliar.
Execution trace
Start with the statements outside function bodies. A function definition creates a callable value; its body runs when a call, event, or scheduled task reaches it.
Trace the arguments at each call and the branch or loop inside that call. Return to the caller when the function returns. For an event, use the action named in Try it to trigger the callback.
Line 3: TweenService is requested explicitly.
Line 5: The selected button is the target.
Line 8: A visible setting chooses the motion path.
Line 9: Activated supports primary input across devices.
Line 10: Text communicates state without relying on color.
Line 11: Active false prevents repeated requests.
Line 12: Reduced motion receives an immediate update.
Line 15: The optional tween is brief and nonessential.
State before and after
Before running, identify the starting values and any existing Studio objects this example needs. List what you expect to change.
After your practice change, check this result: The command works through Activated and feedback remains understandable without animation.
Reading or printing a value leaves it unchanged. Look for assignments, calls that change state, and property updates to explain each change you observe.
Predict before running
What still communicates state when motion is reduced?
Try it
Mark each step after you have tried it.
Common mistake
MouseButton1Click narrows the mental model to one input. Activated is the suitable default for a primary Roblox GUI button command.
Checkpoint
Submit once you have considered every question. Retries are unlimited.
Recap
- Activated supports primary input across devices.
- UI state should be explicit.
- Motion is optional and information remains visible without it.
Next: Next, you will combine responsive layout with a server-validated shop request.
Studio Companion
Not connected
Connect once. Compatible challenges will prepare automatically as you reach them.