Introduction

Oi! ns Jack, also known together LittleJackBlocks! This is in reality my an initial tutorial, and also I will certainly be teaching you just how to do a custom main menu screen with a cool scene. This is other I uncover myself and also other users making for your game, so I assumed I’d make a tutorial on it, without further ado, let’s get started!

Scene and also lighting

First the all, let’s do a scene for this! We have to make a fairly simple, tiny and comfy looking location to include our camera in. If you have actually a scene already, this is no a essential step for you. I made a little island prefer build, no too plenty of details, make certain not to add unnecessary parts all over the place, choose where you want your camera come be and also what the player must see.

You are watching: How to make a menu in roblox

My scene


*

image975×698 526 KB

Lighting

Now let’s proceed with some better lightning settings, girlfriend can fully customize castle yourself! In my case, I require it to look slightly bright, the campfire demands a slight glow, and also I desire the scene to it is in in the afternoon, therefore I made decision these settings! store in mind, the lightning is optional

Lighting settings

*

After you’re done with the lighting settings, let’s get to some other lighting options!

Let’s add some blur, the lot of blur I desire in my scene is quite strong, just sufficient to provide it the dreamy effect. The amount I’ll usage is 10.

Blur amount

*

image266×585 12.6 KB

To customize this even more, I’ll add Color correction!

Color Correction


*

image264×565 12.8 KB

UI design and scripting

To begin off, we should make a an easy GUI, I’ll do a couple of buttons appropriate now. (Make certain to have actually GUIInset enabled!

Designing the UI

First, we need to create a ‘ScreenGUI!’ Make certain to name it. Then, insert a couple of TextButton "s inside of her ScreenGUI. Rename the TextButton and also customize it however you want to, make certain to remove the ‘Offset’ native the dimension property and also to include ‘Scale’ rather so players on every device can check out it the exact same Size. Make certain to have actually TextScaled Enabled! I used a UIGradient and a new font. This is a screenshot!

Screenshots


*

image1919×770 499 KB

Now, let’s get to the scripting that the UI! This must be fairly simple. Let’s start off by inserting a LocalScript inside of the UI’s Parent. I’ll name it “MainMenuHandler”. Then, insert a component into Workspace and name that something, I’ll name it “CameraPart,” make certain that the former of the part is dealing with your scene. Make sure that it’s anchored and can collide is off.

ScriptingScriptingOur VariablesOur variables

First that all, let’s produce our variables! girlfriend can easily customize your variables and also name them everything you desire to!

-- Variableslocal Player = game.Players.LocalPlayer -- This suggests what the "Player" variable is.local character = Player.Character -- This shows what the "Character" change islocal Camera = workspace.CurrentCamera -- This what the "Camera" change is and what it meanslocal computer mouse = game.Players.LocalPlayer:GetMouse() -- acquiring the mouselocal DefaultCFrame = workspace.CameraPart.CFrame -- This variable is our part"s positionlocal range = 500local lift = script.Parent -- We indicate what the "Background" variable method and what that is.local PlayButton = Background.PlayButton -- now we carry out the same with the various other variables.local CreditsButton = Background.CreditsButton neighborhood StoreButton = Background.StoreButton neighborhood TweenService = game:GetService("TweenService") -- phone call the business known together "TweenService"All of these buttons room in the UI, so make certain you walk the previous steps prior to doing this one.

Lock Character and also Camera

Since the variables can’t develop the password themselves, we have actually to produce it ourselves! First, let’s start off through the camera. You’re complimentary to adjust this code yet you’d prefer to. First of all, stop a LocalScript inside of StarterCharacterScripts, surname them however you desire to. This is a manuscript that provides sure the character’s HumanoidRootPart is anchored, this is for this reason the player cannot move. Meaning, they can’t autumn off the map, likewise make certain to add a SpawnLocation and make certain it’s transparent or at least hidden.

See more: Model Real World Example Of Cubic Function, Cubic Function

LockCharacterScript

script.Parent:WaitForChild("HumanoidRootPart").Anchored = trueCameraNow, let’s do the camera script, I want my camera to contempt pan whenever the cursor moves, I also want that to confront the scene. Feel totally free to customize the script.

Camera script

-- Scripting the Camerarepeat wait() -- - us made the loop so the camera will be collection to the Scriptable property.Camera.CameraType = Enum.CameraType.Scriptable -- The line of code in which we tell the game that we need the camera to be set to the Scriptable property.until Camera.CameraType == Enum.CameraType.Scriptable -- and also this heat is informing the game that if the Camera is set to the Scriptable property, climate the loop ends.game:GetService("RunService").RenderStepped:Connect(function() -- acquiring the service known as "RunService"Camera.Focus = DefaultCFramelocal facility = 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.X), math.rad(MoveVector.Y), math.rad(MoveVector.Z))Camera.FieldOfView = 83 -- setup the FieldOfView, you"re complimentary to customize this however you want toend) Camera.CFrame = workspace.CameraPart.CFrame -- This is where your camera is, and the "CameraPart" is what my component is called.After we’re done with the camera, we have to do the UI, this must be rather simple, and feel complimentary to customize it!

Scripting the GUI!GUI Script

-- Scripting the UIlocal duty Hover(HoverEffect) -- Make function for that to move a bit.local originalPosition = HoverEffect.PositionHoverEffect.MouseEnter:Connect(function()PlayButton.TextColor3 = Color3.new(1, 1, 0.498039) -- adding a shade whenever the player hovers end the UIStoreButton.TextColor3 = Color3.new(1, 1, 0.498039)CreditsButton.TextColor3 = Color3.new(1, 1, 0.498039)HoverEffect:TweenPosition((originalPosition + UDim2.new(.015, 0, 0, 0)), "Out", "Sine", .1, true) -- The code that renders the computer mouse moveend)HoverEffect.MouseLeave:Connect(function()PlayButton.TextColor3 = Color3.new(0.243137, 0.243137, 0.243137) -- adding a shade whenever the player stops hovering over the UIStoreButton.TextColor3 = Color3.new(0.243137, 0.243137, 0.243137)CreditsButton.TextColor3 = Color3.new(0.243137, 0.243137, 0.243137)HoverEffect:TweenPosition((originalPosition), "Out", "Sine", .1, true)end)end-- This component of the code helps trigger the UI to moveHover(PlayButton)Hover(StoreButton)Hover(CreditsButton)Final product:Gif/ScreenshotScreen catch - 293a6f367afe5ad3720bac127efc568b - Gyazo