Loading RoCreators…

Render progress from one state value | RoCreators

Draft preview · this lesson is still being technically validated. Browser experiments and reference material remain available; trusted completion is enabled after publication.

Render progress from one state value

v2 · Activity 3 of 4 · ui-state · rendering · 28 min Requires Roblox Studio

Chapter outline

Loading draft…

Mini-mission

Store the numeric done count as data. Text such as "2 / 3" is a representation, not the source of truth for arithmetic.

One render function updates the label and the bar from done and total. This prevents the two displays from drifting apart.

Your task

Add CompleteButton, Progress and Bar/Fill. Start done=0,total=3. Clicking adds one up to 3, then render the text and fill width. Additional clicks must not exceed completion.

Interface: Complete the documented Studio hierarchy and self-check the behavior outside the browser.

Input	Expected

See another example

local ratio = total > 0 and done / total or 0
label.Text = tostring(done) .. " / " .. tostring(total)
fill.Size = UDim2.fromScale(ratio, 1)

Both representations derive from the same state, with a zero-total guard.

Syntax in this activity

New syntax: ui-state, rendering

Earlier ideas used here

button-events
activated

Your explanation

Self-check rubric

Text and bar agree after every activation.
No overflow occurs on repeated clicks.
The interface is labeled as a local demonstration rather than authoritative quest proof.

Your explanation is a self-check. Exact wording is not automatically graded.

Self-checked Studio exercise. A saved checklist records your own review; no uploaded place file or screenshot is executed here.

Build this hierarchy

StarterGui/QuestStateGui (ScreenGui)
  CompleteButton (TextButton)
  Progress (TextLabel)
  Bar (Frame)
    Fill (Frame)
  QuestState (LocalScript)

Create the hierarchy. Size Bar to 240x20 and set Fill Position to 0,0.
Give controls distinct positions and readable labels; set the button at least 200x52.

StarterGui/QuestStateGui/QuestState.client.luau

Main guided reference implementation; use the hierarchy’s stated Script or ModuleScript type.

local gui = script.Parent
local button = gui:WaitForChild("CompleteButton")
local label = gui:WaitForChild("Progress")
local fill = gui:WaitForChild("Bar"):WaitForChild("Fill")
local done = 0
local total = 3
local function render()
    label.Text = tostring(done) .. " / " .. tostring(total) .. " objectives"
    fill.Size = UDim2.fromScale(total > 0 and done / total or 0, 1)
    button.Text = done == total and "Demo complete" or "Complete demo objective"
end
button.Activated:Connect(function() done = math.min(total, done + 1); render() end)
render()

Expected output

Label moves from 0 / 3 to 3 / 3.
Fill width moves from zero to the full Bar width.
More activations leave done at 3.

Studio assessment checklist

Text and bar agree after every activation.No overflow occurs on repeated clicks.The interface is labeled as a local demonstration rather than authoritative quest proof.

Multiplayer tests

Run a local server and at least one client; compare server and client context where the activity uses both.

Troubleshooting and production considerations

Fill width is relative to Bar; verify Fill’s parent.

Do not add to done in two independent callbacks.

This is a bounded learning lab. It has not been executed in an approved Roblox Studio environment by this website.

A checked checklist records your own review, not automated project competence or a community verification.

Explain more

Store the numeric done count as data. Text such as "2 / 3" is a representation, not the source of truth for arithmetic.

One render function updates the label and the bar from done and total. This prevents the two displays from drifting apart.

The button is a local interface demonstration. It does not prove real quest completion; a game should render server-confirmed objective state.

Reset starter

Replace this code with the starter? Download your draft to keep a copy.

Code

Studio source file

Font size Plain text

local done = 0
local total = 3
script.Parent.CompleteButton.Activated:Connect(function() done += 1 end)

Luau keyword highlighting · Ctrl/⌘ + Enter: Run · Esc: leave editorTab inserts indentation

Edit and run these files in Roblox Studio. This browser has no Roblox services, physics, or replication.

Your output will appear here.

Ready