Help with UI design

[Fraudsstar]

How come in studio my GUI looks like this:

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

Can someone please help me fix this problem !

[golden_843 (Display_Name)]

Screen size changes try using scale it will help.

[Fraudsstar]

I do use scale and it still does not work.

[Glaasman1]

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

[Fraudsstar]

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.

[Fxllen_Developer (Fxllen)]

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

[Raylo350]

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.

[Fraudsstar]

It does have a health bar on top look:

[Raylo350]

Sounds like a scaling issue, check this guide out:

UI Design Starter Guide

In this guide I will be showing you some good practices for graphical user interface (GUI) design, as well as how to make GUIs in Roblox. Ultimately what you should do is up to you; I might have good advice, but there will always be exceptions. Design is a flexible discipline. Feel free to mess around or do things that are “wrong”. Just remember that you want to provide a good experience for your players, and a confusing or annoying UI will not help you in that goal. I have reached the maximum…

[Fraudsstar]

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:

[KdudeDev (Kdude)]

Use WaitForChild() instead of FindFirstChild()

local Humanoid = Character:WaitForChild("Humanoid")

[tysyaka (Mystic)]

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.

[Katrist]

Use this instead:

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