I would like to make this GUI fuel bar be scaled depending on a value (10500 being the max), but I don’t quite know where to start or what to do.
I am using the GUI Scale to resize the GUI.
Value location: game.ReplicatedStorage.Generators.Fuel.Values.MainGensFuel
(Integer value)
Any help would be greatly appreciated, and please say if I need to add anything to the post!
Is the bar the UI element that needs to have its size adjusted?
The bar has a frame inside it
So you want the bar to scale based on you value but you want the image to not scale?
I would like the used frame to be scaled to cover the background (MainFuel frame)
Sorry for not including that in the post
I think this would help:
Used.Size = UDim2.new(1, 0, fuel / MainGensFuel.Value, 0)
What’s the difference between “fuel” and “MainGensFuel”?
My bad. I thought that was the max. The formula is just to divide the fuel by the max. You can also do this for a health bar. Sorry for the confusion.
It seems to have it inverted of sorts?
It should be the opposite way around.
Value of 8000:
I don’t fully know how to say it but the used frame should be the size of the unused part of the frame
I’ll do a few more tests and see if I can explain it a little more.
EDIT: A fuel gauge as a reference:
The code I currently have in the script (slightly modified for tweening):
local TweenService = game:GetService("TweenService")
local info = TweenInfo.new(0.25, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
local fuelVal = game.ReplicatedStorage.Generators.Fuel.Values.MainGensFuel
local maxFuel = fuelVal:GetAttribute("Max")
fuelVal.Changed:Connect(function()
TweenService:Create(script.Parent.Used, info, {Size = UDim2.new(1, 0, fuelVal.Value / maxFuel, 0)}):Play()
end)
You want to set the Y position of the “Used” element to 1, along with the Y value for the anchor point. This will just align it to the bottom.
With the following code (and the frame position to the bottom) I got this result:
local TweenService = game:GetService("TweenService")
local info = TweenInfo.new(0.25, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
local fuelVal = game.ReplicatedStorage.Generators.Fuel.Values.MainGensFuel
local maxFuel = fuelVal:GetAttribute("Max")
fuelVal.Changed:Connect(function()
TweenService:Create(script.Parent.Used, info, {Size = UDim2.new(1, 0, -(fuelVal.Value / maxFuel), 0)}):Play()
end)
Should I switch the Used & Background frames if attempting to make it look like this?
I’m not sure. Mine worked how intended when I set the anchor point and position to 1 on the Y values. Did you also change the Anchor Point to (0, 1)? I’m guessing you did since you specified that the frame position is to the bottom).
That didn’t help, the closest one I had was this:
The only issue was it was wrong of sorts.
I want the bar to go top down, but correctly, with the one above, it seems like it is doing the opposite (the used frame is the ‘size’ of the not used frame.
With a value of 8000 it was way too scaled for the used frame.
8000 should be something close this:
Sorry for the long delay, it was too late for me to continue yesterday!
Sorry it took a while for me to respond. A simple workaround is to just change the rotation of the element “MainFuel” by 180. This will make it scale in the right direction and you can just flip the UIGradient’s rotation by 180 as well. This way it properly it shows up right.
I have the file for you if you want to try.
{removed}
I rotated the frame and UI gradient, and it worked the same as earlier
In the file it is the current version
Everything @Cracygh said like changing the anchor point and creating a ratio of current and max fuel should’ve worked. Can you send the file you’re talking about?
I’ve since changed things back, to something else, etc (e.g. undoing frame/uigradient changes).
Here’s the file:
fuel bars w replicated storage.rbxm (8.1 KB)
All you had to do was basically change the anchor point. I made small changes in the script but it works now.
FixedVersion.rbxm (7.9 KB)
Just wondering, is it not possible to have it like this?
Edit: if not the file will be fine
Swap your anchor point in the Used frame to (0.5, 0) and position to {0.5,0}, {0,0}
