UI Sway and Tilt not accurate

[Sharkiiea]

I was working on this UI Sway and Tilting that depends on the mouse movement, and when I tested it in Roblox (Not Studio) the sway movement was less than it is in Studio. How can I fix this? I even tried to make it so it gets the screen scale with workspace.CurrentCamera.ViewportSize, but it barely helped me.

This is how it looks in Studio:

And This is how it looks In-game:

This is the script:

--Services
local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local TweenService = game:GetService("TweenService")
--Camera
local Camera = workspace.CurrentCamera
--Directory
local Screen = script.Parent.Parent.Parent.Screen
--Values
local Scale = (Camera.ViewportSize.X/16 * Camera.ViewportSize.Y/9) / 6726
local DefaultPosition = Screen.Position
local DefaultRotation = Screen.Rotation
local Offset = DefaultPosition
local Rotation = DefaultRotation
local X, Y = 0, 0
--Module >
local Module = {}
--Functions >

local function Lerp(a, b, m)
	return a + (b - a) * m
end

--Main
function Module.new()
	RunService.RenderStepped:Connect(function(DeltaTime: number)
		local MouseDelta = UserInputService:GetMouseDelta()
		local Magnitude = math.clamp(Vector2.new(MouseDelta.X, MouseDelta.Y).Magnitude, 0, 1) * 3
		
		Rotation = Lerp(Rotation, math.clamp(MouseDelta.X, -1, 1) * Magnitude, DeltaTime * 5)
		
		Offset = UDim2.fromOffset(Lerp(X, MouseDelta.X * 10 * Scale * Camera.ViewportSize.X/16/78.3125, DeltaTime * 5), Lerp(Y, MouseDelta.Y * 10 * Scale * Camera.ViewportSize.X/9/85.8888, DeltaTime * 5))
		
		TweenService:Create(Screen, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out), {Position = DefaultPosition + Offset, Rotation = Rotation}):Play()
	end)
end

return Module

The object called Screen is just an invisible Frame with 1,1 size in scale (covers the entire screen)

NOTE: my UI system works with modules for priotritized loading and other details, so the script is a module

[dthecoolest]

Try using this lerp formula

Lerp to change CFrame angles inconsistent with FPS

Interesting, I’ve done some testing seems like its not the lerp formula that is actually wrong since it works for the linear movement. I believe it’s actually the mouse delta that is incorrect as it doesn’t regard state. I found this to be better: local dragging = workspace.Part dragging.CanQuery = false local mouse = game.Players.LocalPlayer:GetMouse() local UserInputService = game:GetService("UserInputService") local oldMousePos = mouse.Hit.Position local initialCFrame = dragging.CFrame…

[Sharkiiea]

I just did and the results are still the same.

[CFramedDev]

Maybe try multiplying the DeltaTime by 15 instead of 5?
It’s not certain but I know there’s a difference between the studio and Roblox player, Not really sure about that tho so don’t mark my words…

[Sharkiiea]

I just tried some things and found that it’s because of the FPS. It works the same with Studio if i change my FPS limit to 60. I just made some changes on the script now it also works the same on other FPS limits like 240. The only issue is that the UI now moves way too much

Here’s the script with the changes:

--Services
local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local TweenService = game:GetService("TweenService")
--Camera
local Camera = workspace.CurrentCamera
--Directory
local Screen = script.Parent.Parent.Parent.Screen
--Values
local DefaultPosition = Screen.Position
local DefaultRotation = Screen.Rotation
local ScreenOffset = DefaultPosition
local Rotation = DefaultRotation
local X, Y = 0, 0
--Module >
local Module = {}
--Functions >

local function Lerp(a, b, m)
	return a + (b - a) * m
end

local function GetFPSMultiplier(DeltaTime: number)
	local FPS = math.round(1/DeltaTime)
	return FPS/60
end

--Main
function Module.new()
	RunService.RenderStepped:Connect(function(DeltaTime: number)
		local MouseDelta = UserInputService:GetMouseDelta() * GetFPSMultiplier(DeltaTime)
		local Magnitude = math.clamp(Vector2.new(MouseDelta.X, MouseDelta.Y).Magnitude, 0, 1) * 3
		
		Rotation = Lerp(Rotation, math.clamp(MouseDelta.X, -1, 1) * Magnitude, DeltaTime * 5)
		
		ScreenOffset = UDim2.fromScale(Lerp(X, MouseDelta.X * 10, DeltaTime * 5), Lerp(Y, MouseDelta.Y * 10, DeltaTime * 5))
		
		TweenService:Create(Screen, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out), {Position = DefaultPosition + ScreenOffset, Rotation = Rotation}):Play()
	end)
end

return Module

[Sharkiiea]

I fixed it by converting the offset to scale, but there is still an issue where if you move your camera for a bit the ui just disappears.

--Services
local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local TweenService = game:GetService("TweenService")
--Camera
local Camera = workspace.CurrentCamera
--Directory
local Screen = script.Parent.Parent.Parent.Screen
--Values
local DefaultPosition = Screen.Position
local DefaultRotation = Screen.Rotation
local ScreenOffset = Screen.Position
local Rotation = Screen.Rotation
local X, Y = 0, 0
--Module >
local Module = {}
--Functions >

local function Lerp(a, b, m)
	return a + (b - a) * m
end

local function GetFPSMultiplier(DeltaTime: number)
	local FPS = math.round(1/DeltaTime)
	return FPS/60
end

local function OffsetToScale(Offset: UDim2)
	local ViewportSize = Camera.ViewportSize
	return UDim2.fromScale(Offset.X.Offset / ViewportSize.X, Offset.Y.Offset / ViewportSize.Y)
end

--Main
function Module.new()
	RunService.RenderStepped:Connect(function(DeltaTime: number)
		local MouseDelta = UserInputService:GetMouseDelta() * GetFPSMultiplier(DeltaTime)
		local Magnitude = math.clamp(Vector2.new(MouseDelta.X, MouseDelta.Y).Magnitude, 0, 1) * 3
		
		Rotation = Lerp(Rotation, math.clamp(MouseDelta.X, -1, 1) * Magnitude, DeltaTime * 5)
		
		ScreenOffset = OffsetToScale(UDim2.fromOffset(Lerp(X, MouseDelta.X * 10, DeltaTime * 5), Lerp(Y, MouseDelta.Y * 10, DeltaTime * 5)))
		
		TweenService:Create(Screen, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out), {Position = DefaultPosition + ScreenOffset, Rotation = Rotation}):Play()
	end)
end

return Module