How can I keep a surface gui in the same position on the screen at all times?

Hello, I’m currently trying to experiment with using a surface GUI for my UI


Because I’m trying to get this effect that most fighting games have (when the big guy jumps the UI is behind him)
edit: clip might be a bit loud sorry!

Is this possible to do on Roblox? And if so how? I tried to reuse some code that I use for my camera which keeps a part centered between 2 players, but as you can see from the first clip the result isn’t exactly what I need.

Here’s the code for it. It’s being run every frame.

local function CalculateAveragePosition()
	local Total = Vector3.new()
	for _,HRP in pairs(HRPS) do    
		Total += HRP.Position
	end

	return Total / #HRPS
end

local function test()
	local UIPart = workspace.UI
	--warn(CalculateAveragePosition())
	local tween  = Utils:Tween(UIPart,{Position = Vector3.new(CalculateAveragePosition().X,16,-58)},0,"Sine","Out")
	--local tween  = Utils:Tween(UIPart,{Position = CalculateAveragePosition()},0,"Sine","Out")
	tween:Play()
end

Why are you trying to use a SurfaceGui over a ScreenGui

Because in most fighting games the characters are shown in front of the UI (as shown in the second video) and I was trying to recreate this effect by using a surfacegui since using a screengui the UI would be in front of the player.

I’ve never make anything like this, but I came up with this:
Video here

It only works on one side because it moves only on the X-axis.

workspace.CurrentCamera:GetPropertyChangedSignal("CFrame"):Connect(function()
	workspace.Health1.Position = workspace.CurrentCamera.CFrame.Position + Vector3.new(0,0,20)
	workspace.Health2.Position = workspace.CurrentCamera.CFrame.Position + Vector3.new(-16,6,20)
end)

Parent the SurfaceGui instances to stationary transparent BasePart instances such that they don’t track across the screen due to being parented to the moving character models.