my first guide! yay!
so today im gonna teach about creating 3d GUI for your games, what is 3d GUI and why should i use it you may ask
first this is a 3d GUI:
a 3D Gui isnt really that different from a normal GUI, but it does look better, more “natural” in some way and allows for funkier animations
to make it, you will need some knowledge about these topics, atleast if you do it the same way i did:
CFrame manipulation
Loops and IPairs
- first things first, lets create: The frame!
the frame is the invisible part which holds it all together, it has to be big as if a UI on the surface GUI we add later go to a area the frame dont cover, it dont show up
first, lets get the player GUI, its as easy as just typing
local plr = game.Players.LocalPlayer
local playerGui = plr.PlayerGui
after that, we create the frame, remember! make it big!
dont forget to make it not query, not collide, not touch, and invisible!
local frame = Instance.new("Part")
frame.Size = Vector3.new(100, 10, 0.5)
frame.CanCollide = false
frame.CanQuery = false
frame.CanTouch = false
frame.CastShadow = false
frame.Massless = true
frame.Transparency = 1
frame.Name = "3d ui frame"
frame.Parent = workspace
ok, now we go to step 2
2. Creating Surface GUI
creating the surface gui is also extremely simple, but some parts might give you headaches
surface Gui dont really like button UIs, among(us) other things
but worry not! it can be simple for now
here is how i did it
local uiPixelPerStuds = 512
local surface = Instance.new("SurfaceGui")
surface.Adornee = frame --connect it to the frame we just made
surface.Face = Enum.NormalId.Back --set its side to Back
surface.PixelsPerStud = uiPixelPerStuds --set the PPS, can be anything but i recomment 512
surface.ClipsDescendants = false
surface.AlwaysOnTop = true --make it always visible
surface.SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud
surface.Parent = playerGui --and finally, make it parented to playerGui
here you go! second to last step made
3.RunServicing
here is the longest step, it requires some math in which im not sure is the most optimal, if it isnt, can someone please correct me?
first, get the camera and its ratios
local camera = workspace.CurrentCamera
local xRatio = camera.ViewportSize.X/camera.ViewportSize.Y
local yRatio = camera.ViewportSize.Y/camera.ViewportSize.X
then, using that, create a new Vector3, multiplying position by the ratio
example:
local offset = Vector3.new(
1.8, --horizontal scale
-5, --how far down or up it is
9 --depth
)
local CalculatedOffset = Vector3.new(
offset.X * xRatio,
offset.Y * yRatio,
-offset.Z
now that you have the Position offset, shall we get the rotation offset?
local rotOffset = Vector3.new(0, -20, 0)
local calculatedRot = CFrame.Angles(math.rad(rotOffset.X), math.rad(rotOffset.Y), math.rad(rotOffset.Z))
done!
now for the last part! the cframe manipulating
just get the cameraCframe, multiply it by the posOffset and the rotOffset and insert it into the frame
local newCframe = camera.CFrame * CFrame.new(CalculatedOffset) * calculatedRot
if frame ~= nil then
frame.CFrame = newCframe
end
done! you got a working and set up 3D ui frame, the remaining is up to you! create unique designs and have fun!
)
better than everything I ever made
