Need help making GUI bar

[123marooxd123]

Hello, I have general knowledge about gui’s and mainly create simple ones (loading screens, fading, etc). For my current game i was trying to make a GUI IQ bar that would decrease when touching a “Decreaser” part and Increase when getting a “IQ” part using proximity prompt. My issue is that i have no clue how to go about this. I tried to understand gui’s that I found on the internet but it didn’t help. Any help is appreciated. Thank you for your time!

[010DevX101 (DevX)]

This would be similar to making a health bar.

[voozy_v]

Setup

When making something like a progress bar, there will usually be 2 frames stacked on each other. The first one is a background frame:

Next, you need to make a second Frame and parent it to the background frame, which I named “Bar” in this case. The inside Frame is what will actually move to display the progress, which I named “Progress”.

Notice how I also added a UIListLayout to the Bar frame. This is to make sure that the Progress frame stays to the left at all times despite being resized.

Preferrably, the size of the Progress should be using Scale on the X and Y

Hopefully you’re familiar with Scale and Offset, but simple terms Scale is like the percentage of how much space of the parent the Frame will take up, with 0 being 0% and 1 being 100%. So if you set the Scale of the X size to 1, the Progress frame will cover the entire length of the Bar frame.

You want to keep the Y scale 1 so that the Progress frame is the same height at the bar frame at all times. When it comes to scripts, editing the X scale modifies how far the Progress frame goes.

Scripting

I set up a leaderboard for the IQ with a Script in ServerScriptService, assuming that’s how you want to store it:

local function Create(instance, name, parent)
	local new = Instance.new(instance)
	new.Name = name
	new.Parent = parent
	return new
end

local function OnPlayerAdded(player)
	Create("NumberValue", "IQ", Create("Folder", "leaderstats", player))
end

local players = game:GetService("Players")
players.PlayerAdded:Connect(OnPlayerAdded)

Next, I added another Script to ServerScriptService that will handle the Increaser and Decreaser parts, with the Decreaser part using a ProximityPrompt:

local players = game:GetService("Players")

local decreaser = workspace.Decreaser
local increaser = workspace.Increaser

increaser.Touched:Connect(function(hit)
	local player = players:GetPlayerFromCharacter(hit.Parent)
	if not player then return end
	
	player.leaderstats.IQ.Value += 1
end)

decreaser.ProximityPrompt.Triggered:Connect(function(player)
	player.leaderstats.IQ.Value -= 10
end)

Now, we just need to listen for value changes on the IQ NumberValue on the client and resize the Progress frame accordingly. However, it’s inevitable that you’ll need a max value, in this case I made it 50.

This is a LocalScript parented to the Progress frame. I also made it display the IQ over the Max IQ in the text label

local max = 50

local players = game:GetService("Players")
local client = players.LocalPlayer

local leaderstats = client:WaitForChild("leaderstats")
local iq = leaderstats:WaitForChild("IQ")

local function UpdateBar()
	local x = iq.Value / max
	script.Parent.Size = UDim2.new(x, 0, 1, 0)
	
	script.Parent.Parent.Parent.Label.Text = `IQ: {iq.Value}/{max}`
end

iq:GetPropertyChangedSignal("Value"):Connect(UpdateBar) -- Update the bar when value changes
UpdateBar() -- Reset the bar when player joins

To make it smoother, you can use tweens:

local max = 50

local tweenService = game:GetService("TweenService")

local players = game:GetService("Players")
local client = players.LocalPlayer

local leaderstats = client:WaitForChild("leaderstats")
local iq = leaderstats:WaitForChild("IQ")

local function UpdateBar()
	local x = iq.Value / max
	tweenService:Create(
		script.Parent,
		TweenInfo.new(
			0.25,
			Enum.EasingStyle.Sine,
			Enum.EasingDirection.InOut
		),
		{Size = UDim2.new(x, 0, 1, 0)}
	):Play()
	
	script.Parent.Parent.Parent.Label.Text = `IQ: {iq.Value}/{max}`
end

iq:GetPropertyChangedSignal("Value"):Connect(UpdateBar) -- Update the bar when value changes
UpdateBar() -- Reset the bar when player joins

Final Result

Game Flie:
Baseplate.rbxl (64.9 KB)

Keep in mind that the XP can still go below 0 and above 50, but I trust you’re capable of making those limits.

Heopfully this helps!

[123marooxd123]

Wow! Thank you so much! I didn’t expect anyone to spend this much time explaining everything in detail!

[Sea_Pikl (ThyPikl)]

If you don’t like when the bar is at a low number and the UiCorner gets out of scale, you can use a UiGradient and change its offset based on the value. It is a lot easier!

[123marooxd123]

Hello, Thank you again for taking your time and creating the gui for me. Altough i have a question which is, how do i stop the bar from going into negative numbers and also how do i stop it from exceeding the set “50” value?. i tried to say

local function UpdateBar()
	local x = iq.Value / max
	if iq.Value == 50 then 
	return end
	tweenService:Create(
		script.Parent,
		TweenInfo.new(
			0.25,
			Enum.EasingStyle.Sine,
			Enum.EasingDirection.InOut
		),
		{Size = UDim2.new(x, 0, 1, 0)}
	):Play()

	
end

but that didn’t work );
this is the localscript that is inside the progress bar.
Thank you for your time

[voozy_v]

local function UpdateBar()
	local calc = iq.Value / max
	local x = calc > 1 and 1 or calc < 0 and 0 or calc
	tweenService:Create(
		script.Parent,
		TweenInfo.new(
			0.25,
			Enum.EasingStyle.Sine,
			Enum.EasingDirection.InOut
		),
		{Size = UDim2.new(x, 0, 1, 0)}
	):Play()
	
	script.Parent.Parent.Parent.Label.Text = `IQ: {iq.Value}/{max}`
end

[123marooxd123]

Thank you very much! that worked out perfectly