i recently made this ui for practicing my scripting and need it to scale properly across all devices—computer, mobile, and console.
even though all elements are set to scale instead of offset, and i’ve used all the necessary plugins (autoscale lite & ui-tools), it still barely works. in fact, it often makes things worse.
here’s the original — keep in mind, all the ui is meant to look exactly like this, and this is where i originally scaled the ui from (fyi, im using a mac if that adds anything)
here’s how it looks on mobile. as you can see, the text shrinks noticeably even though it’s supposed to scale (yes, scaleText is enabled). the same issue applies to the button text—it looks way smaller than intended and doesn’t hold its proportions.
here’s the console version, and honestly, it’s where things fall apart the most. the text becomes way too small to read comfortably, the image layout looks completely different from the computer version, and the buttons are a whole different mess. it just doesn’t hold up visually or functionally across the screen.
i’m honestly terrible at scaling ui, and i’ve been trying every tip and trick people recommend. but at this point, offset mode is starting to seem like a better option. please let me know what i’m doing wrong—i really want to fix this. other games have beautifully scaled interfaces, and i just can’t figure out why mine doesn’t.
thanks in advance!
Add UiAspectRatioConstraint to your frame that holds all other UI
In plugin AutoScale Lite has already build in feature called unit conversion.
Also i see you didn’t Enable TextScale in all TextLabels,TextButtons that is problem too
Enable TextScaled in label that says "Hey there,you seem new here, would you like to get "etc…
Tag Buttons that has text “No,Ive been here before” , “Yes,Please !” with tag “PxScale”
insert this local script inside of frame that holds elements:
Note script will apply only if you start the game it won’t apply directly in studio!
task.wait(2) -- Adjust as you need
local CollectionService = game:GetService("CollectionService")
local PXScale = CollectionService:GetTagged("PxScale")
local frame = script.Parent
local Elements = {
TextBox = true,
TextLabel = true,
TextButton = true,
}
local function updateTextSizes(Table)
local textLabels = {} -- Store all text labels
local minSize = math.huge -- Start with a large value to find the smallest max text size
for _, child in ipairs(Table) do
if child:IsA("TextLabel") then
table.insert(textLabels, child)
end
end
for _, label in ipairs(textLabels) do
local size = 100 -- Start with a large size and decrease if needed
repeat
label.TextSize = size
size = size - 1
until label.TextFits or size <= 1
minSize = math.min(minSize, label.TextSize)
end
-- Apply the smallest max size to all labels to balance them
for _, label in ipairs(textLabels) do
label.TextSize = minSize
end
end
local SelectedGuiElements = {}
for _,Element in pairs(PXScale) do
if Elements[Element.ClassName] and Element:IsDescendantOf(frame) then
table.insert(SelectedGuiElements,Element)
end
end
updateTextSizes(SelectedGuiElements)
