Hi! This is going to be my first ever community tutorial, so feel free to provide some feedback!
For this one, as I’ve often find myself making, I’ve decided to show to create a UI intro, with some scenery in game!
What’s Being Made
Click Here!
Part 1: Choosing Scenery!
Find a place that catches your eye, and position yourself in Studio to get a good view of it.
This is what I got!
Once you’ve found a spot, stay there (don’t move away!), and create a ScreenGui in the StarterGui. Name it whatever you want. I’ll be naming it the “IntroUI”. Once you’ve done that, insert a LocalScript, and follow along with the code:
LocalScript Code (Adjust to your liking)
local camera = workspace.CurrentCamera -- We're placing the player's camera as a variable.
local cameraCFrame -- We'll get back to this shortly.
local cameraFocus
workspace:WaitForChild(tostring(camera)) -- Make sure the camera loads in!
wait(.1)
camera.CameraType = Enum.CameraType.Scriptable
camera.CFrame = CFrame.new(cameraCFrame, cameraFocus)
What we did is set the camera to our scenery, but we didn’t say where yet, so open up your command bar, and type in the following:
print(workspace.CurrentCamera.CFrame)
print(workspace.CurrentCamera.Focus)
The CFrame portion will help tell you where the camera’s positioned, and the Focus portion tells where the camera’s focused/centered-in on. In the output, you’ll get something like this (12 digits): 0,0,0,0,0,0,0,0,0,0,0,0
For each part, select the first 3, copy it down, and then paste it back into the LocalScript, doing Vector3.new(insert the 3 coordinates) into either the cameraCFrame or cameraFocus. Here’s my visual example of what I did:
Part 2: The UI!
Here’s the creative part! You can now make the UI for your intro. For my scene, I’m getting a bit of a dark/horror vibe, so I’ll be doing a dark frame on the left, for space with the buttons! Make sure to set ResetOnRespawn to false!
Just a few notes:
- My personal advice for sizing: in most instances, make sure you do scaling, rather than offset!
- If you feel like you want to move the camera, feel free to do so! If you want to change the view, as well, just enter the commands again and change the cameraCFrame and cameraFocus
While there’s many ways to do it, you can follow along with how I did mine:
How I made my UI!
- I wanted to strike a more darker theme with this UI, so I set the time to one of night, and added a translucent, black frame, covering the entire screen ({1,0} {1,0}).
- Now, I want to have a solid space for buttons to be placed, so I created another black frame, but this time, set it to be opaque, and rotated it (as well as played around with sizing/positioning) to get it right.
-
Hmm, I want it to blend a bit more at the end! Thanks to
UIGradients, I can set the transparency to do just that!
- Now, it’s time to add some buttons. For the sake of time, I’ll just use a plain TextLabel for what could be in place for some logo or design! I’ll also add some TextButtons for some functions, like Play!, or Credits!, etc…
(What I did for the text objects was set their TextAlignment to Left, for consistency, too)
Part 3: Scripting the Intro!
NOTICE! Make sure if you have multiple option buttons (as I have 4), name them differently from each other! I also did NOT make UIs for credits, shop, and inventory, so those parts aren’t scripted.
Scripting the intro, like UI, can be done in many ways, so follow along if you wish!
- What I want to do is have it so when the mouse is over the buttons, they’ll move a bit, and when play is clicked, the screen will fade out to play!
- As such, I’m gonna go back to my UI and make a transparent black frame, covering the screen. I’ll set its ZIndex higher to any other UI components in the IntroUI.
- Now, I’m gonna script it! Please note my object names may not be the same as yours, so make sure to make the script fit for you!
LocalScript Code (Adjust to your liking)
-- I've combined them into 1 LocalScript, so this is the full script here!
local camera = workspace.CurrentCamera -- We're placing the player's camera as a variable.
local cameraCFrame = Vector3.new(-1076.54089, 373.691833, -3607.78857)
local cameraFocus = Vector3.new(-1077.30945, 373.441162, -3605.9585)
local introUI = script.Parent -- Defining the text objects
local playButton = introUI.PlayButton
local creditButton = introUI.CreditButton
local shopButton = introUI.ShopButton
local inventoryButton = introUI.InventoryButton
local TweenService = game:GetService("TweenService") -- This tween stuff will apply to scripting the play button!
local tweeningInfo = TweenInfo.new(.25, Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0)
local function hoverEffect(object) -- Make function for it to move a bit.
local originalPosition = object.Position
object.MouseEnter:Connect(function()
object:TweenPosition((originalPosition + UDim2.new(.015, 0, 0, 0)), "Out", "Sine", .1, true)
end)
object.MouseLeave:Connect(function()
object:TweenPosition((originalPosition), "Out", "Sine", .1, true)
end)
end
-- This part helps apply the hover effect scripted onto the button!
hoverEffect(playButton)
hoverEffect(creditButton)
hoverEffect(shopButton)
hoverEffect(inventoryButton)
--Time to script the play portion!
playButton.MouseButton1Click:Connect(function()
local fading = introUI.FadeScreen --This is my frame that was transparent.
local fadeTweenOpaque = TweenService:Create(fading, tweeningInfo, {BackgroundTransparency = 0})
local fadeTweenTransparent = TweenService:Create(fading, tweeningInfo, {BackgroundTransparency = 1})
fadeTweenOpaque :Play()
wait(.75) -- Abitrary number, change to what you wish.
camera.CameraType = Enum.CameraType.Custom -- Change the camera back to player control.
for _, object in pairs(introUI:GetChildren()) do -- We're gonna delete everything, but the fading part, as we don't need them anymore (for this tutorial)
if object ~= fading then
object:Destroy()
end
end
fadeTweenTransparent:Play()
end)
workspace:WaitForChild(tostring(camera)) -- Our camera stuff from before
wait(.1)
camera.CameraType = Enum.CameraType.Scriptable
camera.CFrame = CFrame.new(cameraCFrame, cameraFocus)
Now, let’s see how it goes! 
The End Result!
Again, this is the end result!
Again, this is my first ever tutorial, so hopefully, you enjoyed! If you have any questions, comments, or what I could improve, feel free to reply!
Until next time!
