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!
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.
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
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
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
To start off, we need to make a simple
GUI, I’ll make a few buttons right now. (Make sure to have
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
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.
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.
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.
script.Parent:WaitForChild("HumanoidRootPart").Anchored = true
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.
-- 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 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)
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!