Need help with UI

Hello,

I have a script that makes it so a surface gui is parented to my currentcamera which lets me have the effect of having a 3d ui.

The issue - when I change the fov it also scales with it, can anyone help me make it so it remains static?

Picture:

Script:

local runService = game:GetService("RunService")
local workspace = game:GetService("Workspace")

local partUI = workspace:FindFirstChild("MovementUI")
local camera = workspace.CurrentCamera

partUI.CanCollide = false
partUI.CanTouch = false
partUI.CanQuery = false

partUI.SurfaceGui.AlwaysOnTop = true

local rotationAngleY = 55
local rotationAngleX = 5
local rotationAngleZ = 0

local positionY = 6
local positionX = -5
local positionZ = -11.5

local function updatePartPositionAndRotation()
	
	local cameraCFrame = camera.CFrame
	local offset = cameraCFrame:VectorToWorldSpace(Vector3.new(positionX, positionY, positionZ))
	
	partUI.Position = cameraCFrame.p + offset

	local rotationRadiansY = math.rad(rotationAngleY)
	local rotationRadiansX = math.rad(rotationAngleX)
	local rotationRadiansZ = math.rad(rotationAngleZ)
	
	local rotationCFrame = CFrame.Angles(rotationRadiansX, rotationRadiansY, rotationRadiansZ)
	
	partUI.CFrame = CFrame.lookAt(partUI.Position, cameraCFrame.p, cameraCFrame.UpVector) * rotationCFrame
end

runService.RenderStepped:Connect(updatePartPositionAndRotation)

Hey! Sorry to hear about your problems with displaying 3D UI! As a UI designer, I’d be glad to help you!
This was a long journey of vector math, dot and cross products, and vertex transformations.
There is in fact very complicated math behind this, but I decided to code it up for you. (with partial help from other sources)
Props to you if you can understand the code, but I tried to make this as easy to understand as possible by commenting everything.

I took my existing 3D GUI module that I was just using to display a static SurfaceGui in front of the camera, with no rotation.
I then tried applying rotation to it, but the angle would be distorted with the Camera’s FOV.
So, to fix this, I decided I would have to use a vertex transformation that scales the X and Y axes with the FOV distortion.
It works perfectly! Have a look:

The only caveat is that for some reason it only works if you have one of the axes be rotated. So, for example, a rotation of 0, 40, 0 would work (which is what I’m showing in the video), however a rotation of 10, 40, 0 wouldn’t work properly. It would distort as the camera changes FOV. I guess trying to do a vertex transformation and then reconstructing the CFrame is impossible when multiple axes are involved.

If you want to grab the code and modify it to your liking, I’ve made an uncopylocked game for you that you can edit in Studio:

The script is located in the StarterGui. Happy building, and good luck with your game!

Dude, I really appreciate this you have no idea! I wasn’t expecting anyone to actually do this because this seemed like an annoying task to do, HOLY you’re a life SAVER!!!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.