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).
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.
I’ve of course addressed some questions in the comments of the first episode so you can check that out if you need help.
However of course, if you want a more runover guide and tutorial, you can continue reading on rather than watching the video. Video is for beginners wanting to learn more and down below is for more advanced users. (Arsenal devs please look :(, you need a better game menu)
Set-up:
First of all, you want a map or preview scene of course for your game, you don’t just want a lazy preview of space now do you? (unless your game is literally space…)
Now depending on your situation, you can either decide to 1, create a map/place that is separate from the main game that contains the game menu. I prefer this method however, other people may prefer in-place only which is reasonably fine.
Create a map or do it in your existing game, set up “camera points” in your scene and rotate as per usual. You can find the “front” part of the part by clicking on the part, going into properties, and finding the front surface by highlighting them from below.
Lastly, add a “ScreenGui” into “StarterGui” as per usual and create a frame to be your “foundation”.
TIP: Before continuing, enable IgnoreInset on the GUI by clicking on it and opening properties to find it. It will ignore the offset from the topbar.
Make sure everything is organized before continuing. I’d recommend folders for objects and such.
GUI Preparation:
You want to click on your frame as scale as you desire. If you wish it to be in the center (center gui style), fill the whole screen with the frame and adjust settings. If you want it to be a sidebar, adjust it to the side as per usual with position.
TIP: Use Scale Instead of Offset, it helps scaling UI on screen sizes. {1, 0, 1, 0} – 1 is where scales are at, 0 is where offset it at, use scale. Scale acts like percent with 1 being 100% and 0 being 0%. Position with scale as well.
Now add any text/small objects you want on the UI, if you plan to have image buttons or anything of the sort, please hold onto that thought and add any other details beforehand. Just make sure you don’t mess up and do “The Morning Afternoon” 
Remember to name everything after you’ve finished then begin adding your “ImageButtons” or “TextButtons”. Both work fine but depending on your situation, you may desire one over another. You can also change it’s hover over properties for more unique properties.
Finally, create more frames for any added UI such as “Credits”. Make sure to place the frames outside the main frame. Unless you’re planning to do something other than that. Name properly as well.
You can finally test to see if it scales and looks well on different device types by clicking this button (Snippet from tutorial):
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.
-- Services
local TweenService = game:GetService("TweenService")
-- UI Objects
local 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.
-- Services
local TweenService = game:GetService("TweenService")
-- UI Objects
local PlayBtn = script.Parent......
-- Tweens
local 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.roblox.com/en-us/api-reference/function/GuiObject/TweenPosition
https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenSize
https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenSizeAndPosition
https://developer.roblox.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 like
end)
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.CurrentCamera
local 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.Scriptable
Cam.FieldOfView = 50 -- you can set it beforehand but eh
Finally, 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.
end
And if you want to be extra sure it works, set the camerasubjects to parts and stuff beforehand.
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
