Introduction
Oi! I’m Jack, also known as LittleJackBlocks! This is actually my first tutorial, and I will be teaching you how to make a custom main menu screen with a cool scene. This is something I find myself and other users making for their game, so I thought I’d make a tutorial on it, without further ado, let’s get started!
Scene and lighting
First of all, let’s make a scene for this! We need to make a rather simple, small and comfy looking place to add our camera in. If you have a scene already, this is not a necessary step for you. I made a small island like build, not too many details, make sure not to add unnecessary parts all over the place, choose where you want your camera to be and what the player should see.
Lighting
Now let’s continue with some better lightning settings, you can fully customize them yourself! In my case, I need it to look slightly bright, the campfire needs a slight glow, and I want the scene to be in the afternoon, so I chose these settings! Keep 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 amount of blur I want in my scene is quite strong, just enough to give it that dreamy effect. The amount I’ll use is 10.
Blur amount
Now I’ll add some bloom to make the fire from the campfire stand out, the amount of intensity I used is 3, everything else is default.
To customize this even more, I’ll add Color correction!
UI design and scripting
To start off, we need to make a simple GUI, I’ll make a few buttons right now. (Make sure to have GUIInset enabled!
Designing the UI
First, we need to create a ‘ScreenGUI!’ Make sure to name it. Then, insert a few TextButton 's inside of your ScreenGUI. Rename the TextButton and customize it however you want to, make sure to remove the ‘Offset’ from the Size property and to add ‘Scale’ instead so players on every device can see it the same Size. Make sure to have TextScaled Enabled! I used a UIGradient and a new font. Here’s a screenshot!
Now, let’s get to the scripting of the UI! This should be rather simple. Let’s start off by inserting a LocalScript inside of the UI’s Parent. I’ll name it “MainMenuHandler”. Then, insert a Part into Workspace and name it something, I’ll name it “CameraPart,” make sure that the front of the part is facing your scene. Make sure that it’s anchored and can collide is off.
Scripting
Scripting
Our Variables
Our variables
First of all, let’s create our variables! You can freely customize your variables and name them whatever you want to!
-- Variables
local Player = game.Players.LocalPlayer -- This indicates what the "Player" variable is.
local Character = Player.Character -- This indicates what the "Character" variable is
local Camera = workspace.CurrentCamera -- This what the "Camera" variable is and what it means
local Mouse = game.Players.LocalPlayer:GetMouse() -- Getting the mouse
local DefaultCFrame = workspace.CameraPart.CFrame -- This variable is our part's position
local Scale = 500
local Background = script.Parent -- We indicate what the "Background" variable means and what it is.
local PlayButton = Background.PlayButton -- Now we do the same with the other variables.
local CreditsButton = Background.CreditsButton
local StoreButton = Background.StoreButton
local TweenService = game:GetService("TweenService") -- Calling the service known as "TweenService"
All of these buttons are in the UI, so make sure you did the previous steps before doing this one.
Lock Character and Camera
Since the variables can’t create the code themselves, we have to create it ourselves! First, let’s start off with the camera. You’re free to adjust this code however you’d like to. First of all, let’s a LocalScript inside of StarterCharacterScripts, name them however you want to. This is a script that makes sure the character’s HumanoidRootPart is anchored, this is so the player cannot move. Meaning, they can’t fall off the map, also make sure to add a SpawnLocation and make sure it’s transparent or at least hidden.
LockCharacterScript
script.Parent:WaitForChild("HumanoidRootPart").Anchored = true
Camera
Now, let’s do the camera script, I want my camera to slightly pan whenever the cursor moves, I also want it to face the scene. Feel free to customize the script.
Camera script
-- Scripting the Camera
repeat wait() -- - We made the loop so the camera will be set 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 this line is telling the game that if the Camera is set to the Scriptable property, then the loop ends.
game:GetService("RunService").RenderStepped:Connect(function() -- Getting the service known as "RunService"
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.X), math.rad(MoveVector.Y), math.rad(MoveVector.Z))
Camera.FieldOfView = 83 -- Setting the FieldOfView, you're free to customize this however you want to
end)
Camera.CFrame = workspace.CameraPart.CFrame -- This is where your camera is, and the "CameraPart" is what my part is called.
After we’re done with the camera, we have to do the UI, this should be quite simple, and feel free to customize it!
Scripting the GUI!
GUI Script
-- Scripting the UI
local function Hover(HoverEffect) -- Make function for it to move a bit.
local originalPosition = HoverEffect.Position
HoverEffect.MouseEnter:Connect(function()
PlayButton.TextColor3 = Color3.new(1, 1, 0.498039) -- Adding a color whenever the player hovers over the UI
StoreButton.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 makes the mouse move
end)
HoverEffect.MouseLeave:Connect(function()
PlayButton.TextColor3 = Color3.new(0.243137, 0.243137, 0.243137) -- Adding a color whenever the player stops hovering over the UI
StoreButton.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 part of the code helps trigger the UI to move
Hover(PlayButton)
Hover(StoreButton)
Hover(CreditsButton)
Final product:
All of the code should be self explanatory, I even added some text in the code as a way for you to learn what the code does, I’ll also add a link to the place since I’ll add more overtime, feel free to code the rest of the buttons so they’re functional, I’ll also make some myself. I accept any type of criticism, as this is my first time and I’d like to improve, thanks for reading, have an amazing rest of your day/night!
