Translating the ScreenUI onto the Camera's Frustum at X distance

[edenojack]

I am attempting to duplicate the Player’s ScreenGui onto a plane with a SurfaceGui X distance from the camera.
The plane has the same AbsoluteSize as the ScreenGui, with the topbars inset taken into consideration.

This is how we should look - Black text being part of the ScreenGui, and Yellow being part of the SurfaceGui.

So we work at position 0,0. Great! However, once we move the position of our text object;

Uh oh! Suddenly we aren’t in the same position anymore!
Ideally this would only deal with centered UI elements, but I’d like to know if there was a way of using non-centered ones too.

tl;dr I’m trying to clone a ScreenGUI to a SurfaceGUI at the distance X, while maintaining near-perfect replication on size/position so they’re indistinguishable.

Here is my code

local Player    = game.Players.LocalPlayer
local Camera    = game.Workspace.CurrentCamera

local RunService = game:GetService("RunService")

local GUISERV = game:GetService("GuiService")
local TOPBARINSET = GUISERV:GetGuiInset().Y

local FrustumPart = Instance.new("Part")
FrustumPart.Name = "AAAA1"
FrustumPart.Anchored = true
FrustumPart.CanCollide = false
FrustumPart.Transparency = .3
FrustumPart.Size = Vector3.new(.1, .1, 0)
FrustumPart.Parent = workspace

local FrustumCloning = Instance.new("ScreenGui")
FrustumCloning.Parent = Player.PlayerGui

local SurfaceClone = Instance.new("SurfaceGui")
SurfaceClone.SizingMode = "FixedSize"
SurfaceClone.Parent = FrustumPart
SurfaceClone.Face = "Back"

local ScreenActual = Instance.new("Frame")
ScreenActual.Parent = SurfaceClone
ScreenActual.Position = UDim2.new(0, 0, 0, TOPBARINSET/2)
ScreenActual.BackgroundTransparency = 1
ScreenActual.Size = UDim2.new(1, 0, 1, 0)

local Texty = Instance.new("TextLabel")
Texty.Parent = FrustumCloning
Texty.Text = "TRYING SOMETHING SOMETHING"
Texty.Size = UDim2.new(1,0,1,0)
Texty.BackgroundTransparency = 1
Texty.Position = UDim2.new(.2, 0, .2, 0)

local Clone = Texty:Clone()
Clone.Parent = ScreenActual
Clone.TextColor3 = Color3.fromRGB(255, 217, 0)

function CalculateFrustumAtDistance(distance)
    FOV = Camera.FieldOfView
    NewPosition = Camera.CFrame * CFrame.new(0, 0, -(distance + FrustumPart.Size.Z/2) )
    --Apply NewPosition to FrustumPart
    FrustumPart.CFrame = NewPosition
    --Find New Size
    local HeightAttempt = 2 * distance * (math.tan(math.rad(FOV * .5)))
    local WindowSize = FrustumCloning.AbsoluteSize
    local Ratio = (WindowSize.Y + TOPBARINSET) / WindowSize.X
    local WidthAttempt = HeightAttempt / Ratio
    FrustumPart.Size = Vector3.new(WidthAttempt, HeightAttempt, FrustumPart.Size.Z)
  SurfaceClone.CanvasSize = Vector2.new(WindowSize.X, WindowSize.Y + TOPBARINSET)
    end

[Crowdsource]

Here’s a forum post that has to do with aspect ratios of guis.

Keeping the Aspect Ratio of your GUIs

[quote] Could use a few more turtles. Nah but would it be difficult to change an already made UI to optimize this? [/quote] It really depends on the complexity and whether you used scales or offsets. If it was scaling then I guess you could drop your UI in the frame and adjust the size of the XY frame. If it was based on offset then you would need more time on changing it to scaled. I’m thinking that it doesn’t take that long. Also any scripts inside might need some configuratio…

in short, use scale, not offset to achieve this simply
UDim2.new(this,0,this,0)

UDim2 | Documentation - Roblox Creator Hub

[edenojack]

Everywhere in the code here, apart from the SurfaceGui’s Frame position (Which is adjusted only by half that of the top-bars Y offset) is already using scale.

[edenojack]

Oh! Apparently I have this solved!
By the looks, all I need to do is change the Screen Actual to;

local ScreenActual = Instance.new("Frame")
ScreenActual.Parent = SurfaceClone
ScreenActual.Position = UDim2.new(0, 0, 0, TOPBARINSET)
ScreenActual.BackgroundTransparency = 1
ScreenActual.Size = UDim2.new(1, 0, 1, -TOPBARINSET)