UI descendants scaling problems

Help and Feedback Art Design Support
,
#1

Hello. I am right now making an UI for my game. I’m using the Autoscale Lite plugin. However, there’s a problem: it works perfectly on the main frame - converts the size and position to scale. However, when I try to do that with any of the frame’s children, they just go out of the screen. I think that it’s trying to scale them according to the screen size, not the parent frame size. How should I deal with this issue? Should I use another plugin? Any help is appreciated!

#2

Have you read this article about how to use AutoScale Lite. It should work perfectly fine if you have not done any mistakes of some sort. If this does not work for you try and use Offset for better results.

#3

I’ve read this article and found no solution to the issue. I also cannot use the offset since it won’t scale properly on smaller screens.

#4

Keep position as offset and size in scale. You should look at the multitude of youtube videos explaining how to scale Ui before starting.

#5

This will help.

#6

Also can you show me the problem in a picture?

#7

Here are the pictures. As you can see, the UI looks nice in the 1980x1080 screen but in the other one it just goes away.

UI2
UI21615×606 198 KB
UI1
UI11618×605 199 KB

#8

The thing I’m having problem with is converting the smaller frames’ size and position to Scale. The plugin doesn’t seem to help me here.

Of course I can just try to do it all manually but I’d like to see if there is a faster way.

#9

Have you added a UIAspectRatioConstraint just like it says in this tutorial?
You previously said you have read this article and I find it hard to believe.

#10

That’s not a very good idea. For right-aligned UI, positioning it by offset will just have it not show up at all for mobile users, and it’ll look terrible on most devices

@GalaxMystic: I’m not sure how a UI constraint that affects the size would help with it being positioned wrong.

In regards to the main thread, this looks like a bug with the plugin’s AutoScaleLibrary. You could try manually forking it and changing the ToScalePos function. Right now, this is what it looks like:

ToScalePos 
function AutoScaleLibrary.ToScalePos()
	for _, v in ipairs(game.Selection:Get()) do
		if v:isA("GuiObject") and not v:IsA("ScreenGui") and not v:IsA("Folder") and not v:IsA("StarterGui")  then
			game:GetService( 'RunService' ).RenderStepped:Wait()
			local Viewport_Size
			
			if v:FindFirstAncestorWhichIsA("GuiObject") then
				Viewport_Size = v:FindFirstAncestorWhichIsA("GuiObject").AbsoluteSize
			else
				Viewport_Size = workspace.CurrentCamera.ViewportSize
			end
			
			local LB_Pos = v.AbsolutePosition
			v.Position = UDim2.new(LB_Pos.X/Viewport_Size.X,0,LB_Pos.Y/Viewport_Size.Y, 0)
		end
	end
	
	CustomPrint("Converted to Scale Pos", script.Parent:WaitForChild("CustomPrint"))
	ChangeHistoryService:SetWaypoint("Converted UI element to Scale Position")
end

As you can probably tell, the plugin doesn’t take into account the GuiObject ancestor’s Position, only its size. This shouldn’t be too hard to fix, though. Here’s a patch that I tried:

function AutoScaleLibrary.ToScalePos()
	for _, v in ipairs(game.Selection:Get()) do
		if v:isA("GuiObject") and not v:IsA("ScreenGui") and not v:IsA("Folder") and not v:IsA("StarterGui")  then
			game:GetService( 'RunService' ).RenderStepped:Wait()
			local guiObjectAncestor = v:FindFirstAncestorWhichIsA("GuiObject")
			local Viewport_Size = guiObjectAncestor and guiObjectAncestor.AbsoluteSize or workspace.CurrentCamera.ViewportSize -- ternary gang
			local ancestorPosition = guiObjectAncestor and guiObjectAncestor.AbsolutePosition or Vector2.new(0, 0)

			local LB_Pos = v.AbsolutePosition - ancestorPosition
			v.Position = UDim2.new(LB_Pos.X/Viewport_Size.X,0,LB_Pos.Y/Viewport_Size.Y, 0)
		end
	end
	
	CustomPrint("Converted to Scale Pos", script.Parent:WaitForChild("CustomPrint"))
	ChangeHistoryService:SetWaypoint("Converted UI element to Scale Position")
end

… and it worked with my basic tests. Here’s the modified .rbxm I used, but it’s literally just that one change, so you could fork it yourself if you wanted to.
Plugin.rbxm (70.1 KB)

4 Likes
#11

Yes, but I couldn’t see any changes.

That’s my point. I’m trying to convert it all to scale.

Anyway, I’m almost done scaling this UI. I’ll write here if I still meet any problems. Thanks for all the help!

1 Like
#12

Yeah, that’s why I was telling ZacBytes it wasn’t a good solution to your problem. My edit to the autoscale plugin should scale it fine, no need to do it by hand.

2 Likes
#13

So I’m supposed to create a local plugin with this code, right?

1 Like
#14

Yeah, you can just copy my .rbxm into %localappdata%/Roblox/Plugins or you can edit the main plugin manually by dragging its .rbxm into Studio, changing the one function, and using Save as Local Plugin.

2 Likes
#15

Is the plugin supposed to be in the Plugins Folder? Because it’s empty.

#16

The Plugins folder is for locally installed plugins, while installed plugins will be under /Roblox/YOUR_USER_ID/InstalledPlugins/PLUGIN_ID.

2 Likes
#17

Alright, I found it. However, the folder with the plugin id is empty. What am I supposed to do now?

#18

Did you disable or uninstall the plugin? That’s incredibly odd. Try reinstalling it, or make sure your path looks something like this:
image

2 Likes
#19

Nevermind, I was looking in the wrong folder :slightly_smiling_face: I will try your solution, thank you!

1 Like
#20

Thanks! I’ll take a look at the patch later and maybe add it in AutoScale

1 Like