UI Position Tweening on Ultrawide Resolutions Problem

[KadenKAPOP]

For context, I have a 2 separate UIs, one that displays a player’s units, and another that slides out from underneath when hovering over a unit to display its information.

The tweening works on most aspect ratios, but when it comes to overly long resolutions, the tween shoots all the way out to the right. I am using a scale factor of adding its primary position (centered in the middle of the screen) to a UDim2.new(0.38, 0, 0, 0). AnchorPoints are set to 0.5, and everything has a ratio constraint and their sizes and positions by scale. It might be a bit of a nitpick, but I want to make sure everything looks fluid.

I genuinely couldn’t find a specific post that addresses my specific problem, and if anyone could help, that would be greatly appreciated! I’m still learning how to do all of this GUI stuff. Thanks!

1920x1080 (and any similar aspect ratio)

780x360 Xiaomi Redmi Note 9

Ultrawide 3840x1080

[DudeW0rld (Guest_4666)]

Can you also provide the code used for tweening?

[KadenKAPOP]

local TS = game:GetService("TweenService")

local remoteVariables = require(game.ReplicatedStorage.Modules:WaitForChild("RemoteVariables"))

local player = game.Players.LocalPlayer

local inventoryFrame = script.Parent.Frames:WaitForChild("InventoryFrame")

-- ------------------------------
-- Unit Display Information
-- ------------------------------

local unitInformationDisplayFrame = script.Parent.Frames:WaitForChild("UnitDisplayInformationFrame")

local timer = 0.2
local uiButtonTweenInfo = TweenInfo.new(timer, Enum.EasingStyle.Circular)
local startTS = TS:Create(unitInformationDisplayFrame, uiButtonTweenInfo, {Position = inventoryFrame.Position + UDim2.new(0.38, 0, 0, 0)})
local leaveTS =TS:Create(unitInformationDisplayFrame, uiButtonTweenInfo, {Position = inventoryFrame.Position})

local function BindButtonToFunction(btn)
	btn.MouseEnter:Connect(displayUnitInformation)
	btn.MouseLeave:Connect(removeUnitInformation)
end

connectionEvent.Event:Connect(function()
	for _, v in pairs(player.PlayerGui.CoreGUI.Frames.InventoryFrame.InventoryScroll:GetChildren()) do
		if v:IsA("ViewportFrame") or v:IsA("Frame") then
			BindButtonToFunction(v:FindFirstChild("FrameInteractable"))
		end
	end
end)

function displayUnitInformation()
	if not leaveTS.Completed then leaveTS.Completed:Wait() end
	if not remoteVariables.GetTweenPlayingState() then startTS:Play() end
end
function removeUnitInformation()
	if not startTS.Completed then startTS:Cancel() end
	leaveTS:Play()
end

[DudeW0rld (Guest_4666)]

Alright, I would put my UIs like this:

We will have one main frame (in this case, Menu) and other things UIs put inside the main frame to attach it to the main frame (in this case, Sidebar)

And you only need to place one UIConstraint in the main frame and it will size everything correctly.

This also help position things relative to the main frame

[KadenKAPOP]

Should I still use the Scale property when tweening the UI?

[DudeW0rld (Guest_4666)]

Well, for simplicity, I suggest you find two Scaled positions for the sidebar: one for when showing, and one more for hiding it. Then you can use those two positions to Tween the sidebar.

[KadenKAPOP]

Ah, so would that be better than just taking its initial position and adding a UDim2 to it? Or is that still a viable option to use?

[DudeW0rld (Guest_4666)]

You don’t have to think hard because you can find the two desired positions for your sidebar from dragging it around in your roblox studio

[KadenKAPOP]

Alright I’ll try this. It’ll probably break some of my code in other scripts but I can just fix those up. Thank you so much!

[DudeW0rld (Guest_4666)]

No problem (cahracters limit jqoiewhqwoehqweqw)

It’s simple,

local showPosition = -- Your scaled UI position here
local hidePosition = -- Your scaled UI position here

-- Make tween from showPos to hidePos
-- Make tween from hidePos to showPos
-- jaiohjeiwqehqw...