DEV Community

TotallyProgrammingPro
TotallyProgrammingPro

Posted on

How To Make Roblox UI

Step 1: Make the UI

  1. Open Roblox Studio
  2. In the Explorer, go to StarterGui
  3. Insert a ScreenGui and rename it to MainMenuGui
  4. Inside MainMenuGui, insert a Frame and rename it to MainFrame
  5. Inside MainFrame, insert:

    1. A TextLabel named Title
    2. A TextButton named PlayButton

UI settings you should change

  1. MainFrame
  • Size: {1, 0}, {1, 0}
  • BackgroundColor3: dark gray or whatever you want
  • BorderSizePixel: 0
  1. Title
  • Text: MY GAME
  • TextScaled: true
  • Size: {0.6, 0}, {0.2, 0}
  • Position: {0.2, 0}, {0.15, 0}
  • BackgroundTransparency: 1
  1. PlayButton
  • Text: PLAY
  • TextScaled: true
  • Size: {0.3, 0}, {0.12, 0}
  • Position: {0.35, 0}, {0.5, 0}

At this point, if you press Play in Studio, you should see the menu.


Step 2: Main menu script

  1. Insert a LocalScript
  2. Put it inside MainMenuGui

Script code

local player = game.Players.LocalPlayer
local gui = script.Parent
local mainFrame = gui:WaitForChild("MainFrame")
local playButton = mainFrame:WaitForChild("PlayButton")

playButton.MouseButton1Click:Connect(function()
    mainFrame.Visible = false
    print("Game Started")
end)
Enter fullscreen mode Exit fullscreen mode

How this script works

  1. LocalScripts run on the player’s computer, which is required for UI
  2. script.Parent is the ScreenGui
  3. WaitForChild makes sure the UI exists before using it
  4. MouseButton1Click runs when the button is clicked
  5. Setting Visible to false hides the menu instantly

No tricks, no magic.


Step 3: Lock the player until Play is pressed (optional)

If you want the player to not move until they click Play, do this.

  1. Go to StarterPlayer
  2. Open StarterPlayerScripts
  3. Insert a LocalScript

Enter fullscreen mode Exit fullscreen mode

Script code

local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

humanoid.WalkSpeed = 0
humanoid.JumpPower = 0

local gui = player.PlayerGui:WaitForChild("MainMenuGui")
local frame = gui:WaitForChild("MainFrame")

frame:GetPropertyChangedSignal("Visible"):Wait()

humanoid.WalkSpeed = 16
humanoid.JumpPower = 50
Enter fullscreen mode Exit fullscreen mode

What this script is doing

  1. Player spawns
  2. Movement is disabled
  3. Script waits until the menu frame becomes invisible
  4. Once Play is clicked, movement is restored

This is a very standard Roblox setup.

Top comments (0)