Slanted 2D Gui?

Help and Feedback Scripting Support
#1

I’m looking to replicate a style similar to the one shown below.
Ideally I want the GUI to be slanted inwards (Similar to the left menu) & to be located on the bottom left of the Players screen; I’m having difficulty figuring how to get this to work?

e9b6ec6b274b92f20d0a694c095326810ad532c9

I’ve attached my code below however it is 100% not the outcome I’m looking for.

	local Core = { ... }
	local Server, Self = game, script
	
	local RunService = Server:GetService('RunService')
	local UserInputService = Server:GetService('UserInputService')
	
	local Camera = Server:GetService('Workspace'):WaitForChild('Camera', 1)
	
--||--||--||--||

	local Part = Instance.new('Part', Camera)
	Part.Anchored = true
	Part.CanCollide = false

--||--||--||--||

	RunService.RenderStepped:Connect(function(...)
		Part.CFrame = (Camera.CFrame + Camera.CFrame.LookVector * 10) - Camera.CFrame.RightVector * 8 - Camera.CFrame.UpVector * 5
	end)

--||--||--||--||

	return Core
#2

They’re using a SurfaceGui or a BillboardGui to project the UI from a part. You can set the adornee of the Gui object to a part and it will work like a normal ScreenGui.

3 Likes
#3

Hi, thanks!
Sorry it’s the actual coding side that I’m struggling with.
i.e. having the slanted part persistently located at the bottom left of the Players screen to allow the SurfaceGui to be linked.

#4

CFraming the part to the screen is dependent on the resolution of the player’s screen. That means you might have players with mobile devices, laptops, or even a big screen TV. So if you’re wanting to keep the UI in view, you will have to CFrame the parts relative to something that everyone can see, which will be ScreenGui, dot product, or raycasting from the camera’s point of view. So far, you’re using RunService to move the Gui, so that’s a good start. I would look into how to reference a physical part’s position to a Gui object’s position.

Here’s a quick search result:

1 Like
#5

Think I’ve found a solution (although I’m unsure how it’d vary on different devices).

Code if anyone would like to replicate something similar:

local Core = { ... }
local Server, Self = game, script

local RunService = Server:GetService('RunService')
local Camera = Server:GetService('Workspace'):WaitForChild('Camera', 1)

local Offset = CFrame.new(-4, -4, -11)
local Rotation = CFrame.Angles(0, math.rad(15), 0)

local HUD = Server:GetService('Workspace'):WaitForChild('HUD', 1)

local SurfaceGui = Self.Parent:WaitForChild('SurfaceGui', 1)
SurfaceGui.Adornee = HUD

RunService.RenderStepped:Connect(function(...)
	HUD.CFrame = Camera.CFrame:ToWorldSpace(Rotation) * Offset
end)

return Core
4 Likes