Hello, I’ve noticed that as of lately and back then, people are having trouble with creating nice looking game menus and designs. Some I’ve found are simple but lacking in details/info, some don’t take in the time, and some straight out just use a free model (there is nothing inherently wrong with using one though).

You are watching: How to make a menu in roblox

So I’ve taken it out and decided to show people how they could create their own game menus from scratch with full on picture views, game teleportation, credits, tweens, and camera movements. A full playlist with 5 parts from start to finish.


*

Then click the dropdowns to change device types/resolutions.

Scripting UI:

This is going to be difficult to describe here however, I’ll try my best, another note, I’m going over this very roughly since it will take a large 5 paragraphs or so to describe everything, sorry:

Create a local script inside your ScreenGUI and let’s begin.

Define important services like TweenService first. Make sure to define your variables/UI you want to move/manipulate. Examples include buttons and moving images.

-- Serviceslocal TweenService = game:GetService("TweenService")-- UI Objectslocal PlayBtn = script.Parent.......Once you’ve done your variable references as such, make sure you define your Gui tweens as usual next. You can decide to use normal tweens (which I prefer) or GuiObject tweens which have less properties to use but are faster/easier to use.

-- Serviceslocal TweenService = game:GetService("TweenService")-- UI Objectslocal PlayBtn = script.Parent......-- Tweenslocal PlayBtnHover = TweenService:Create(PlayBtn, TweenInfo.new(0.3), Position = UDim2.new()) -- You can also use math to make it easier rather than referencing straight on.You’ll keep doing this for all elements and change positions/properties as per usual, you get the jist. If you need help, you can reference these wiki pages:https://developer.starrkingschool.net.com/en-us/api-reference/function/GuiObject/TweenPositionhttps://developer.starrkingschool.net.com/en-us/api-reference/function/GuiObject/TweenSizehttps://developer.starrkingschool.net.com/en-us/api-reference/function/GuiObject/TweenSizeAndPositionhttps://developer.starrkingschool.net.com/en-us/api-reference/class/Tween

Make sure you’ve tested the tweens and see if they work correctly, utilize wait() for now if you need to test.

Next, we’ll begin the functions like MouseEnter and MouseLeave. There are different methods but i’ll be utilizing MouseEnter/MouseLeave for ease.

PlayBtn.MouseEnter:Connect(function() PlayBtnHover:Play() print("Entered") -- Use for testing if you likeend)Now let us continue and begin defining the camera cutscenes. Wow yay, finally cameras. I’ve had some trouble with this of course so if I’m doing something wrong, please point it out, thank you :).

Define the “CurrentCamera” and Camera point folder.

local Cam = workspace.CurrentCameralocal CamPoints = workspace:WaitForChild("CameraPoints")Next, lets create a camera tween function to make it easier for us to move inbetween cams.

local function TweenCameraPos(Point, Speed) TweenService:Create(Cam, TweenInfo.new(Speed, Enum.EasingStyle.Linear), CFrame = Point.CFrame):Play() -- you may want to destroy the tweens after you"ve finished with them of course though. Tween.Completed and coroutines work.end)Then, set our camera to Scriptable and fieldofview.

Cam.CameraType = Enum.CameraType.ScriptableCam.FieldOfView = 50 -- you can set it beforehand but ehFinally, create a loop that moves inbetween these camerapoints, this may be different depending on situation. If in-game, just have a while InMenu do or something similar.

while true do Cam.CFrame = CamPoints:FindFirstChild("1").CFrame -- sets the cframe of our camera to the camerapoint, there is probs a more efficent way but this works for now. TweenCameraPos(CamPoints:FindFirstChild("2"), 3) wait(3) -- Continue defining all camera points with same pattern going up same numbers.endAnd if you want to be extra sure it works, set the camerasubjects to parts and stuff beforehand.

See more: Which Of The Following Is Not A Characteristic That Geologists Use To Identify Minerals

You can then continue to create another local script and disable movement properties of the player and such if you’d like.

Finally, after you’ve finished making complicated things with tweens, disappearing them, etc. You’ll finally get a good looking result… (Snippet from tutorial)https://gyazo.com/d6fbb14960bfc2c759e0affb0c8ed2c6