How to Make UI Intros with Scenery!

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!

My Scenery

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:

Click Here


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! :smile:

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!

170 Likes

Nice work!!! I think i will use this in the near future games

8 Likes

Yess sir!! This is useful bc I do struggle with this a lot lol

Thanks Lugical :+1:

7 Likes

Nice, I’m sure many people will find this useful!

8 Likes

This is great. I needed this tutorial I’m going to try it out later. Thank you.
Is there a way to blur the background a bit too?

1 Like

Thanks for this tutorial, how would you go about making one that rotates slowly so that you can capture more of a map in a sort of cinematic view?

1 Like

In the Lighting Service in explorer you can add a object called BlurEffect and edit the properties to how much Blur that you want, and you can further add into the script that upon MouseButton1Click on the Play Button the BlurEffect is Disabled

image

Enlarging the Size property allows you to control how much Blur will be used.

image

2 Likes

Could this also be done using Viewports?

Nice, thank you. This is a good way to keep the games theme consistent… also the blur keeps the player focused on the GUI, I’ll add this to my store menu as well.

1 Like

Hello, can I ask how you did this Gradient UI?

Can you tell us how to do credits?

@wurzq What I used for the black frame is the Rotation property, where I tilted it by 15 degrees, I then added a UIGradient. After that, you just need to utilize the transparency property to get the right look you want!

@M_etrics The purpose of this tutorial was just to do the intro scene, rather than focus on the tabs, as they can be done in various ways. Here’s a simple one, where it prompts up:

--> LocalScript
local creditButton = script.Parent --> Replace with what the button is.
local creditTab = script.Parent --> Replace with what the credit tab is.
local creditOpened = false

creditButton.MouseButton1Click:Connect(function()
    creditOpened = not creditOpened
    creditTab.Visible = creditOpened
end)

What we did here is just create a variable that changes between true and false for each time the Credit Button is clicked. That way, it’ll open when you click it, and close when you click it again!

2 Likes

So if I pressed credit button the loading screen will go and it’ll show credits? Also I have a home gui button how would I do it so if pressed it returns to the menu.

That’s just a simple example you can modify to fit your game (in this case, the credit tab still prompts, on top of the intro UI).

The home GUI, you could do MouseButton1Click, and when clicked, you can fade out the screen like used in the Intro UI, and enable the Intro UI, and setting the camera properties correctly.

Question, do I put the creditTab transparency 1?

It depends how you’re using the tab, and how the game’s structured. The tutorial’s intended to just show you the basics of how to create a UI intro with scenery, and I didn’t mean to delve into extraneous features, as they can be done numerous ways.

2 Likes

Thanks, I appreciate it. 30char

1 Like

This is an excellent idea for games to have title screens which show parts of the game before they are introduced to the environment.

Something that I had tried a little while ago is making the title screen a little more interesting by having the camera move. For example, I am working on a project which is creating a virtual roleplay experience in the City of London and I created the following title screen: https://youtu.be/AOp6ntWNGlI

Of course this is not essential as something simple as defined above can be absolutely perfect but I think adding movement (although it’s not without flaws) could enhance the experience depending on the context.

2 Likes

Amazing! I’ve been wondering how to do this! Thanks for your help!

1 Like