UI Scaling Breaks on diffrent devices

[X70PA (aids)]

I’m trying to fix the scaling issue with my gui

• I’m trying to make a UI consistent across platforms
• Might be a scripting issue/ Most likely
• My progress bar wont scale correctly

I’ve tried using plugins such as AutoScale Nightly
(worst mistake/Ruined most of my guis)

Though i know most of my buttons are a bit off don’t put mind to it since ills fix it later with an Ui overhaul. But here are some pictures of what’s happening:

What it’s supposed to look like

[In Studio]

What it looks like

[Mobile]

[Xbox] (Might just disable Xbox play since UI is so messed up for them)

The main issue is the progress bar, It won’t scale correctly and i think it might be the script causing the issue

local player = game.Players.LocalPlayer
local leaderboard = player:WaitForChild("leaderstats")
local indc = script.Parent.Indicator
local bar = script.Parent.Bar
local maxStages = 120
while wait() do
	local currentValue = leaderboard.Stage.Value
	local targetSize = UDim2.new(0.96 * currentValue / maxStages, 0, 0, 34)
	game.TweenService:Create(bar, TweenInfo.new(0.5), { Size = targetSize }):Play()
	indc.Text = "Stage: " .. currentValue
end

Not sure if this is needed but this is the properties of the UI

If anyone can help with this issue that would be very appreciated

If a solution is using autoscale please send a well made tutorial or a well created post about how to use it.
My experience with using for a few years isn’t the best, always having issues with it ruining my UIs, Though I still use as somewhat seen in the screenshots

Any Help with this issue would be great.

I’m new to posting on DevForms so sorry if this is badly setup or poorly written and misinformed in anyway.
I’m not even sure if i posted in the correct location but i guess I’ll find out.

[Pyrenol (Pyre)]

@X70PA

local targetSize = UDim2.new(0.96 * currentValue / maxStages, 0, 0, 34)

You see that the Y scale is 0 and the offset is 34 in your UDim2.new parameter ... 0, 34)? That’s what’s causing your progress bar to be differently sized all the time with different devices/viewports. Instead, you might want to use:

local targetSize = UDim2.new(0.96 * currentValue / maxStages, 0, bar.Size.Y.Scale , 0)

this makes sure that the progress bar still changes with different devices.

Also, another important thing you might need to remember is that Autoscalers can be a great tool if you know when and what to use it for, since auto-scaling is not the singular magical tool that’ll solve all your GUI scaling problems.

Scaling Issues on Guis

Autoscale, contrary to popular belief, doesn’t actually scale the UI correctly for all devices. The name is quite deceiving. Although it does what the name says (convert from offset to scale, scale to offset, and make the aspect ratio the same), it doesn’t actually fix all your problems. People who tell you to use only scale probably don’t know how useful offset actually is (in fact, if you use any modern os, such as mac and windows, you’d see that there are many UI elements that use offset, i.e…

You might want to read this if you want to understand more on scaling UI for different devices better

Tips to Position and Scale UI

You’ve probably seen many threads about, “How do I fit this on PC and Mobile?”, “How do I make UI scale evenly across all devices?”. Well, if you have these problems, you’ve come to the right place. Here I will show and explain some concepts for fixing those problems. But first, let me explain a few concepts: What is Scale and what is Offset? Scale is a measurement that Roblox uses to determine a percentage from one distance to another. Let’s say the screen size was 1000px wide, having a scal…

Hope this helps