UI moving to a weird place when attempting to resize it with a script

I am trying to get a hunger bar tick slowly down

My issue is that whenever I start the game the bar would always move to a position I do not want it in (reference of the bar while testing it vs the bar in studio)
image
image

local Hunger = game:GetService("Players").LocalPlayer:WaitForChild("Hunger")
local Bar = script.Parent.Bar
local Text = script.Parent.Number



while Hunger.Value>0 do
	wait()
	Bar.Size = UDim2.new(0,75,0,(-Hunger.Value / 100 * 200))
	Text.Text = Hunger.Value.."%"
	if Hunger.Value <= 20 then
		Bar.BackgroundColor3 = Color3.fromRGB(170, 0, 0)
	end
end

Can you show us the position of the bar? Like its value in properties.

Ok I’ve got something working. Try this:

local plr = game.Players.LocalPlayer
local Bar = script.Parent.Bar
local Text = script.Parent.Number

local Hunger = plr:WaitForChild("leaderstats"):WaitForChild("Hunger")

local HungerEvent = game:GetService("ReplicatedStorage"):WaitForChild("updateHunger")

local Ts = game:GetService("TweenService")
local info = TweenInfo.new(0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)

HungerEvent.OnClientEvent:Connect(function()
	Bar.Size = UDim2.fromScale(1, Hunger.Value / 100)
	
	Text.Text = Hunger.Value .. "%"
end)

Hunger.Changed:Connect(function(newVal)
	Ts:Create(Bar, info, {Size = UDim2.fromScale(1, newVal / 100)}):Play()
	Text.Text = newVal .. "%"
end)

The issue was you weren’t updating the client when the player joined the game, so the bar would just be at that position. So when the player join it will fire the client, and when the hunger value is changed it will update. I forgot to send the server code so let me do that real quick:

game.Players.PlayerAdded:Connect(function(plr)
	local ls = Instance.new("Folder", plr)
	ls.Name = "leaderstats"
	
	local Hunger = Instance.new("IntValue", ls)
	Hunger.Name = "Hunger"
	Hunger.Value = 50
	
	game:GetService("ReplicatedStorage"):WaitForChild("updateHunger"):FireClient(plr)
end)

So… does it work? If you encounter any issues just reply.

Hello and sorry for the late reply… I did what you told me to and I ended up getting this result instead

image

Yep, make sure you check if the Position / Size of the Gui isn’t set on the offset because it can ruin your Gui’s Size or Position when you try and switch between both.

for better assistance:

-- These Random numbers are Examples...
X = 50, -- The First Int is the Actual position
Y = 0
X_Offset = 100 -- The Second Int is the Offset of its actual position
Y_Offset = 0

-- So Here is how you can deternine which is which:
 X , X_Offset , Y , Y_Offset

Hello and thank you for the reply
When you said to not set the Position or Size on the offset I changed the size change to the Y scale instead of the Y offset . But however I got this result. (Code i used)

local Hunger = game:GetService("Players").LocalPlayer:WaitForChild("Hunger")
local Bar = script.Parent.Bar
local Text = script.Parent.Number



while Hunger.Value>0 do
	wait()
	Bar.Size = UDim2.new(0,75,(-Hunger.Value / 100 * 200),295)
	Text.Text = Hunger.Value.."%"
	if Hunger.Value <= 20 then
		Bar.BackgroundColor3 = Color3.fromRGB(170, 0, 0)
	end
end

Try doing the negitive (or Positive) of the Position, so if you have a number like 10, do -10

i believe if you have / Division, you do * Multiplication?

Try them separately, in case they don’t work.

Sorry for the trouble, but can you elaborate more please?
I’ve tried setting the position of the bar to negatives and the bar completely disappears when testing and in studio
image
image

I didn’t know what you meant for " i believe if you have / Division, you do * Multiplication?" as I’m pretty sure I already have that unless you mean something else

Can you show a video if it Disappearing?

Edit:
also i believe you need to use TweenSize: instead of just size so

Bar:TweenSize(UDim2.new(0,75,(-Hunger.Value / 100 * 200),295)) -- or whatever

and for Hunger.Value, change it to Hunger.Value if its going upwards, or change the divison to Multiplication

Here’s a video of the bar disappearing after changing it’s Position values to negatives

thats because you are changing its position on studio, try 1,0,1,0 for the frame to get the full size of the background frame

Edit: i did Size, not position, change the position to 0,0,0,0 and then move it towards the backgroundframe

In studio, set the position to 0, 0, 0, 0 and the size to 1, 0, 0.5, 0. What is the max value for the hunger? Does the Hunger object represent a percentage already? Since you’re setting the bar’s height on the Y axis, you’re gonna want to set its size on the Y scale to the currenthunger/maxhunger. Current hunger divided by its max will give you a percentage, which you can use for the scale since it also takes a percentage. So if your current hunger is 50% of the max, the bar will cover 50% of the its parent.

local Hunger = game:GetService("Players").LocalPlayer:WaitForChild("Hunger")
local Bar = script.Parent.Bar
local Text = script.Parent.Number



while Hunger.Value>0 do
	wait()
	Bar.Size = UDim2.new(1, 0, Hunger.Value/200, 0)
	Text.Text = Hunger.Value.."%"
	if Hunger.Value <= 20 then
		Bar.BackgroundColor3 = Color3.fromRGB(170, 0, 0)
	end
end

I am assuming here that Hunger.Value is not already a percentage (0 through 1) and that 200 is the max hunger value.

I explained some part of it in this post, however i think you got it.

since his Ui was going up, try changing the Hunger.Value from Negative to Positive so it can go down?
test both if you like.

Im not fluent in german so i cant translate this

Can you send me the GUI so i can check it Quick

I thing the Problem is with wrong Anchor Point and Position.

I set the position to 0, 0, 0, 0 and the size to 1, 0, 0.5, 0 in Studio and changed up some code. The Hunger object is an IntValue stored in player and the percentage is the player’s hunger.I didn’t know why I had 200 as a value as I tried mimicking this from a different script and didn’t know that changing only the Y axis was currentvalue/maxvalue. After setting this up, I got this result
image

here’s a .rbxm file of the gui if you need anything else lmk
hungerbar.rbxm (5.9 KB)

This is because your bar isn’t parented to that black bar right to the side. Change its parent to the black bar.

image

I am assuming “bar” is the orange bar and that “frame” is the black frame. After doing this change local Bar = script.Parent.Bar to local Bar = script.Parent.Frame.Bar