How do I make a transparent Intro GUI/Start menu?

Working on Intro User Interface or rather working with Graphic User Interface is one of my favorite things about Programming.

Because of how aesthetically pleasing it is, I often spend a lot of time on it. On that note, I will show you a simple guide on creating an Custom Intro Design. This does not involve any sort of plugins or anything. Just pure Scripting and Designing Knowledge.

What I always start of is designing the GUI of my game. Create your own GUI. However, since you also want to see the background scenery of the game, I suggest not to make the GUI take all over the screen.

Once you have completed that, now we are going to work on our Camera

What is a Camera?

You shouldn't have had a hard time answering this. To put it simple: A Camera is a property of game that defines and gives us the 3D and the 2D view. Every Player who joins in your game has their own Camera. It is what allows them to see and be able to interact with others.

How to access the Camera?

Workspace has a neat property which allows us to get the LocalPlayer's Camera.

local Camera = workspace.CurrentCamera

Warning: Everything that is being written must be in Local Script since we want to talk about individuals players here.

If you have built a pretty world and want a good view of the map, we want to create a custom Camera to do so.

-- Declaration Section 
-- //Game Services 
local Workspace = game:GetService("Workspace")
local CurrentCamera = Workspace.CurrentCamera

-- //Camera Location 
local CameraLocation = CFrame.new(-50, 200, 300)
-- ^^You can always use a Parts CFrame too if putting numbers is hard for you. 
-- Processing Section 

local function ChangeCameraProperties ()
    repeat wait() 
        CurrentCamera.CameraType = Enum.CameraType.Scriptable
    until CurrentCamera.CameraType == Enum.CameraType.Scriptable

    CurrentCamera.CFrame = CameraLocation
end

-- Output Section 
ChangeCameraProperties()

With this, we just made a fixed Camera which allows us to see our world! Pretty cool aye. Now you may realize that the Camera is fixed. We want to make it move around to make like a cool animations don't we not? So Let's add that in.

-- Declaration Section 
-- //Game Services 
local Workspace = game:GetService("Workspace")
local CurrentCamera = Workspace.CurrentCamera

-- //Camera Location 
local CameraLocation = CFrame.new(-50, 200, 300)
local CameraEndLocation = CFrame.new(-50, 200, 200)
-- ^^You can always use a Parts CFrame too if putting numbers is hard for you. 
-- Processing Section 

local function ChangeCameraProperties ()
    repeat wait() 
        CurrentCamera.CameraType = Enum.CameraType.Scriptable
    until CurrentCamera.CameraType == Enum.CameraType.Scriptable

    CurrentCamera.CFrame = CameraLocation

    for alpha = 0.01, 1, 0.02 do
        CurrentCamera.CFrame = CameraLocation:lerp(CameraEndLocation, alpha)
        print(alpha)
        wait()
    end 
end

-- Output Section 
ChangeCameraProperties()

Linear Interpolation or lerp is a mathematical term that is used to estimate the value of a function between 2 known values. You can consider it as another version of tweening for now.

For Loop is a type of loop that runs the set of code until the condition is met. The condition in this case is alpha = 0.01, 1, 0.02. This means that the loop will loop until 0.01 reaches 1 with the increment of 0.02

Now we want to create a Play button when the lerping finished. Here is the final code.

-- Declaration Section 
-- //Game Services 
local Workspace = game:GetService("Workspace")
local Lighting = game:GetService("Lighting")
local Player = game:GetService("Players").LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local CurrentCamera = Workspace.CurrentCamera

-- //Camera Location 
local CameraLocation = CFrame.new(-50, 200, 300)
local CameraEndLocation = CFrame.new(-50, 200, 200)

-- //Gui Location 
local PlayGui = PlayerGui:WaitForChild("PlayGui")
local PlayButton = PlayGui:WaitForChild("Play")

-- //Variables 
local ColorCorrectionEffect 
local BlurEffect 

-- Processing Section 
local function ImplementGui ()
    PlayGui.Enabled = true 

    BlurEffect = Instance.new("BlurEffect")
    BlurEffect.Parent = Lighting
    BlurEffect.Size = 12
end

local function ChangeCameraWhenPressedPlay ()
    print("I was pressed?") 

    ColorCorrectionEffect =  Instance.new("ColorCorrectionEffect")
    ColorCorrectionEffect.Parent = Lighting

    BlurEffect:Destroy()
    PlayGui.Enabled = false
    PlayGui:Destroy()

    for number = 0, 1, 0.01 do
        ColorCorrectionEffect.Brightness = number
        wait()
    end

    repeat wait()
        CurrentCamera.CameraType = Enum.CameraType.Custom
    until CurrentCamera.CameraType == Enum.CameraType.Custom


    for number = 1, 0, -0.01 do
        ColorCorrectionEffect.Brightness = number
        wait()
    end

    ColorCorrectionEffect:Destroy()
end

local function ChangeCameraProperties ()
    repeat wait() 
        CurrentCamera.CameraType = Enum.CameraType.Scriptable
    until CurrentCamera.CameraType == Enum.CameraType.Scriptable

    CurrentCamera.CFrame = CameraLocation

    for alpha = 0.01, 1, 0.01 do
        CurrentCamera.CFrame = CameraLocation:lerp(CameraEndLocation, alpha)
        print(alpha)
        wait()
    end 

    spawn(ImplementGui)
end

-- Output Section 
ChangeCameraProperties()
PlayButton.MouseButton1Down:Connect(ChangeCameraWhenPressedPlay)

See the result of the following code in this youtube video!

See More for Future Reference

• Camera

• Linear Interpolation

• For Loop

• Lighting Properties