Help with UI design

How come in studio my GUI looks like this:
good

But when I proceed to test it in studio, it looks like this:
bad

Can someone please help me fix this problem !

2 Likes

Screen size changes try using scale it will help.

2 Likes

I do use scale and it still does not work.

1 Like

do you have any scripts acting on it? if so then post the script

local player = game.Players.LocalPlayer
local Character = player.Character or player.CharacterAdded:Wait()

local Health = script.Parent:WaitForChild("Health")

-- Update the healthbar
game:GetService("RunService").RenderStepped:Connect(function()
	local Humanoid = Character:FindFirstChild("Humanoid")
	Health.Size = UDim2.new(Humanoid.Health/Humanoid.MaxHealth,0,1,0)
end)

Just a health bar script.

You could use the .HealthChanged function for this instead of Runservice.

1 Like

Is it using UIStroke or a regular border? I would try placing a black frame underneath which sticks out to look like a border and have the actual healthbar on top.

It does have a health bar on top look:
bar

1 Like

Sounds like a scaling issue, check this guide out:

I’ve tired but it doesn’t work.

local player = game.Players.LocalPlayer
local Character = player.Character or player.CharacterAdded:Wait()
local Humanoid = Character:FindFirstChild("Humanoid")

local Health = script.Parent:WaitForChild("Health")

-- Update the healthbar
Humanoid.HealthChanged:Connect(function()
	Health.Size = UDim2.new(Humanoid.Health/Humanoid.MaxHealth,0,1,0)
end)

Here’s the error:

Use WaitForChild() instead of FindFirstChild()

local Humanoid = Character:WaitForChild("Humanoid")

Are you trying to keep it in the same place even not in studio?

Suggestion:

1 - Make a StarterGui,
2 - Design/Customize,
4 - Put script in,
5 - Put IgnoreGuiInset to true,
6 - Enjoy.

For other tips:
https://developer.roblox.com/en-us/articles/Intro-to-GUIs

Thank you.

Use this instead:

Humanoid:GetPropertyChangedSignal("Health"):Connect(function()
	Health.Size = UDim2.new(Humanoid.Health/Humanoid.MaxHealth,0,1,0)
end)