How to make a Game Menu like this?

Help and Feedback Scripting Support
#1

How would one go about making a game menu like this?

RobloxScreenShot20200424_213948860
RobloxScreenShot20200424_2139488601920×1080 928 KB

5 Likes
#2

That’s not a font those are image buttons.

#3

What about the menu are you trying to recreate? You need to be more specific.

2 Likes
#4

Adobe Photoshop (30 characters)

#5

I think this should be moved to #help-and-feedback:art-design-support

2 Likes
#6

In steps

  1. Create spookie background in roblox
  2. Add dynamic lighting and mysterious light emitter
  3. Make custom font and write words in it
  4. Upload and publish images to roblox and layout in a UI
  5. Script the camera position to be fixed on creepy background and add animations to buttons on mouse events.
  6. Add music
1 Like
#7

Hey there, I’m the original designer and creator of that menu.

Here’s a rundown of how you might create your own,
To get the 3D GUI effect you’ll need a surface GUI parented into the PlayerGui with the adornee property set to a part in the 3D space. Of course, make a background to the part for the scenery. Be sure to set the surface attachment to the front or whatever you want to face.

Next for the images, I used a font and made images using photoshop. You can use any font you’d like really.

The next is just UI design which I’d recommend looking at the Roblox Wiki if you need help there.

For the mouse effect, I’ve essentially taken the mouse’s position and calculated the camera’s CFrame concerning the viewport size.

Here’s a demo script below:

local Mouse = game.Players.LocalPlayer:GetMouse()
local Camera = game.Workspace.CurrentCamera

Camera.CameraType = "Scriptable"
local DefaultCFrame = workspace.IntroCams.MenuCam.CFrame
local Scale = 400

    Mouse.Move:connect(function()
        Camera.Focus = DefaultCFrame
        local Center = Vector2.new(Camera.ViewportSize.X/2, Camera.ViewportSize.Y/2)
        local MoveVector = Vector3.new((Mouse.X-Center.X)/Scale, -(Mouse.Y-Center.Y)/Scale, 0)
        Camera.CFrame = DefaultCFrame * CFrame.Angles(math.rad(MoveVector.Y), -math.rad(MoveVector.X), math.rad(MoveVector.Z))
    end)

Be sure to :Disconnect() your function after using it to prevent memory leaks!
I hope this helps a little bit!

7 Likes
#8

This was super helpful, Thank you!

1 Like