Change a UIGradient's offset depending on a value

Help and Feedback Scripting Support
#1

  1. What do you want to achieve? Keep it simple and clear!
    I’m making a game similar to Raise a Floppa. I want to use a UIGradient’s offset to change the “size” of the bar depending on how much hunger I have. The hunger value starts at 100 and slowly decreases to 0.

  2. What is the issue? Include screenshots / videos if possible!
    For example, in order to get an empty hunger bar using UIGradient, the X offset has to be -1. But that means that the value of 0 will have to turn into -1 and I can’t figure out that math.

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I’ve tried to turn the hunger value to a negative number and divide that by 100 to get a negative decimal. While it does show correctly when the hunger is at 50, a hunger value of 40 makes the UIGradient’s offset -0.4, which makes the bar fill up to around 60% of its size.

Code for the bar tweening, local script is placed inside of the hunger bar.

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

local statsFolder = player:WaitForChild("FriendStats")
local hungerVal = statsFolder:WaitForChild("Hunger")

local tweenService = game:GetService("TweenService")
local ti = TweenInfo.new(0.15, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)

local bar = script.Parent
local hungerText = bar.Parent.TextLabel
local uiGradient = bar:FindFirstChild("UIGradient")

hungerVal:GetPropertyChangedSignal("Value"):Connect(function()
	if hungerVal.Value <= 0 then
		bar.Visible = false
	else
		bar.Visible = true
	end

	local gradientTween = tweenService:Create(uiGradient, ti, {Offset = Vector2.new(-(hungerVal.Value / 100), 0)})
	gradientTween:Play()
	
	hungerText.Text = hungerVal.Value.. "%"
end)
#2

Try this:

Vector2.new(maxValue / value, 0) -- returns number between 0 - -1
#3

What would maxValue and value be?

#4

100 would be maxValue and hungerVal.Value the value

#5

Looks like the X offset is going up positively when I use this:

{Offset = Vector2.new(100 / hungerVal.Value, 0)})

The X offset on my UIGradient has to be from 0 to -1 in order to move how I’d like it (right to left)

#6

Maybe try this:

{Offset = -Vector2.new(hungerVal.Value / 100, 0)})

or

{Offset = -Vector2.new(100 / hungerVal.Value, 0)})
#7

Tried your first solution, which was pretty much the same as what I did before. The second solution is giving numbers smaller than -1

#8

Hey!
Maybe try this function to do that:

local function Normalize(x)
	return (x - 0.5) * 2
end

Source (External)

#9

Well, sorry I can’t help anymore :man_shrugging: Now I don’t know either

#10

Sorry, this didn’t seem to work either. My issues were kind of vague so I’ll explain some more examples.

The hunger value of 75 would have to turn into -0.25, and the hunger value of 25 would have to turn into -0.75.

The hunger value of 100 would have to turn into 0, and the hunger value of 0 would have to turn into -1.

The hunger value of 90 would have to turn into -0.1, and the hunger value of 10 would have to turn into -0.9

#11

an image of the examples or your goal would be helpful…

#12 
local gradientOffsetX = (hungerVal.Value / 100) - 1

local gradientOffset = Vector2.new(gradientOffsetX, 0)