Have gui frame match a parts size and position on screen for different resolutions

I have a game and in order to make certain interactions work on mobile I used gui frames. In the resolutions close to the one I used when positioning the gui using the device emulation with an iphone 6, it looked good. But when changing to different devices it doesnt match as good.

Idk if maybe its something that can be fixed with scripting or if its just a scaling issue cuz ive tried tweaking it and using plugins to no avail.

Screenshot 2024-05-03 at 12.21.53
Screenshot 2024-05-04 at 12.06.36

Do you use scale or offset for the UI size & position? (Scale is the first number that defines a relative size, e.g. 0.5, 0 and offset is the size in pixels such as 0, 40)

u can use a plugin called Autoscale Lite on the plugin tab in roblox studios toolbox, then click openplugin, then click on add constraint, then click the plugin again then click on unit conversion, then click position scale and size scale then ur ui will look the same on all devices.

the frames are currently using scale

change them to offset and it should work as it’s scaling the sizes on the current screen size

Use UIAspectRatioConstraints to keep the frame the same AspectRatio no matter the resolution, it is calculated as width/height, so with scripting you can do it as:

local Gui = -- Your gui object.

local UiAspectRatioConstraint = Instance.new("UiAspectRatioConstraint")
UiAspectRatioConstraint.Parent = Gui
UiAspectRatioConstraint.AspectRatio = Gui.AbsoluteSize.X/Gui.AbsoluteSize.Y

Compared to what it was before it is better, but it is still off.

Screenshot 2024-05-07 at 10.30.21
Screenshot 2024-05-07 at 10.31.59

The images don’t seem to load. Try to reupload them.

Strange, hope it works this time.

Screenshot 2024-05-07 at 13.05.26

Screenshot 2024-05-07 at 13.06.17

Can you show us what code you are using? Probably just faulty code.

local UserInputService = game:GetService("UserInputService")

local Gui = script.Parent

if not UserInputService.TouchEnabled then --dw about this its just for visualizing
	Gui.Transparency = 1
else
	Gui.Transparency = 0.5
end

local UiAspectRatioConstraint = Instance.new("UIAspectRatioConstraint")
UiAspectRatioConstraint.Parent = Gui
UiAspectRatioConstraint.AspectRatio = Gui.AbsoluteSize.X / Gui.AbsoluteSize.Y

I mean the script that positions everything. Are you doing this manually??

Yeah, I said in the initial post that I originally positioned it using the iphone 6 device emulator template. Is there no way to make it adjust accordingly for other resolutions?

Oh, sorry I didn’t see that. Anyways, you should use this:

im not sure if im doing this right. It seems to just move the gui far away from the camera.

local Workspace = game:GetService("Workspace")

local Gui = script.Parent
local camera = Workspace.CurrentCamera

local position = camera:WorldToViewportPoint(Workspace:WaitForChild("NPC"):WaitForChild("Torso").Position)
print(position)
Gui.Position = UDim2.new(0, position.X, 0, position.Y)

It’s likely due to the gui being a child of another gui, try subtracting the parents AbsolutePosition with the guis position.

local Workspace = game:GetService("Workspace")

local Gui = script.Parent
local camera = Workspace.CurrentCamera

local position = camera:WorldToViewportPoint(Workspace:WaitForChild("NPC"):WaitForChild("Torso").Position)
position = Vector2.new(position.X,position.Y) - Gui.Parent.AbsolutePosition
Gui.Position = UDim2.new(0, position.X, 0, position.Y)

The result still seems to be the same with the Gui still being out of view of the camera. Also the Gui is only the child of a ScreenGui.

I see, try to enable IgnoreGuiInset and see if that would work with your original script.

yeah it’s making no difference idk maybe i’m going about this wrong.

I’ve been thinking if maybe I could do this another way.

What if I add 3 parts to 3 corners of the NPCs torso and use them as points. To which I then get the screen distance between those points both horizontally and vertically and use that to size the Gui Frame and then somehow get the center of the torsos front face so I can position the frame in the center of that.

No idea how to do any of that though…