How to make a 2D GUI in Roblox Lua?

Question

I'm trying to make a 2D GUI for my Roblox game, but the code I have searched for only puts the camera at the side angle to make it look 2D. But in actuality, it's just 3D from an angle that would make it look 2D.

I'm trying to make a GUI that's actually 2D, like what you will see in this image.

The first website I came across had this code:

local player = game.Players.LocalPlayer
local camera = workspace.CurrentCamera

player.CharacterAdded:Wait()

player.Character:WaitForChild("HumanoidRootPart")

camera.CameraSubject = player.Character.HumanoidRootPart
camera.CameraType = Enum.CameraType.Attach
camera.FieldOfView = 40

local RunService = game:GetService("RunService")

local function onUpdate()
    if player.Character and player.Character:FindFirstChild("HumanoidRootPart") then
        camera.CFrame = CFrame.new(player.Character.HumanoidRootPart.Position) * CFrame.new(0,0,30)
    end
end

RunService:BindToRenderStep("Camera", Enum.RenderPriority.Camera.Value, onUpdate)

local player = game.Players.LocalPlayer
local RunService = game:GetService("RunService")
local ContextActionService = game:GetService("ContextActionService")

local jumping = false
local leftValue, rightValue = 0, 0

local function onLeft(actionName, inputState)
    if inputState == Enum.UserInputState.Begin then 
        leftValue = 1
    elseif inputState == Enum.UserInputState.End then
        leftValue = 0
    end
end

local function onRight(actionName, inputState)
    if inputState == Enum.UserInputState.Begin then
        rightValue = 1
    elseif inputState == Enum.UserInputState.End then
        rightValue = 0
    end
end

local function onJump(actionName, inputState)
    if inputState == Enum.UserInputState.Begin then
        jumping = true
    elseif inputState == Enum.UserInputState.End then
        jumping = false
    end
end

local function onUpdate()
    if player.Character and player.Character:FindFirstChild("Humanoid") then
        if jumping then
            player.Character.Humanoid.Jump = true
        end
        local moveDirection = rightValue - leftValue
        player.Character.Humanoid:Move(Vector3.new(moveDirection,0,0), false)
    end
end

RunService:BindToRenderStep("Control", Enum.RenderPriority.Input.Value, onUpdate)

ContextActionService:BindAction("Left", onLeft, true, "a", Enum.KeyCode.Left, Enum.KeyCode.DPadLeft)
ContextActionService:BindAction("Right", onRight, true, "d", Enum.KeyCode.Right, Enum.KeyCode.DPadRight)
ContextActionService:BindAction("Jump", onJump, true, "w", Enum.KeyCode.Space, Enum.KeyCode.Up, Enum.KeyCode.DPadUp, Enum.KeyCode.ButtonA)

And it gave out this result: https://youtu.be/BEal4GHbKss

Can you please help me make a 2D GUI in Roblox? Thanks.

Piglet Piglet · Accepted Answer · 2021-01-12T08:54:37

The code you posted only uses the x component of any movement. Not sure how you can expect anything else from it.

The first website I came across had this code:

Websearch usually only yields useful results if you don't stop at the first website found. You should rather pick the result that helps you.

Use a ScreenGUI https://developer.roblox.com/en-us/api-reference/class/ScreenGui

The main storage object for 2D GuiObject displayed on the player’s screen. ScreenGuis will only be shown if parented to a player’s PlayerGui. To make sure a ScreenGui is displayed to your player, it should be parented into the StarterGui, as that service will clone it’s contents into each player’s PlayerGui when they join the game.

How to make a 2D GUI in Roblox Lua?

1 Answers