Loading Screen Module

Hi,

Heres a loading screen module I made. It works good but I want to minimize the lines by finding a better way to make tweens. Here’s the code:

--!strict
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")
local RunService = game:GetService("RunService")
local SoundService = game:GetService("SoundService")
local TweenService = game:GetService("TweenService")

local LocalPlayer = Players.LocalPlayer

local Loading = {}
Loading.ScreenGui = ReplicatedFirst.Assets.Loading:Clone() :: ScreenGui
Loading._startTime = 0
Loading._spinnerConnection = nil :: RBXScriptConnection?

-- TWEAKS
local MIN_RUNTIME = 2
local FADE_LENGTH = 1
local DEGREES_PER_REVOLUTION = 360
local SPINNER_REVOLUTIONS_PER_SECOND = 1

function Loading.enableAsync()
	local playerGui = LocalPlayer:WaitForChild("PlayerGui")
	Loading.ScreenGui.Parent = playerGui
	Loading._startTime = os.clock()
	
	local spinnerLabel = Loading.ScreenGui
		:FindFirstChild("Canvas")
		:FindFirstChild("SpinnerImageLabel") :: ImageLabel

	Loading._spinnerConnection = RunService.Heartbeat:Connect(function(deltaTime: number)
		spinnerLabel.Rotation += (SPINNER_REVOLUTIONS_PER_SECOND * DEGREES_PER_REVOLUTION * deltaTime)
	end)

	Loading._startTime = os.clock()
end

function Loading.disableAsync()
	local Master = SoundService.Master
	local LoadingSounds = Master.Interface.Loading
	-- minimum runtime
	local runTime = os.clock() - Loading._startTime
	task.wait(math.max(0, MIN_RUNTIME - runTime))

	local canvasGroup = Loading.ScreenGui
		:FindFirstChild("Canvas") :: CanvasGroup

	local logoCanvas = Loading.ScreenGui
		:FindFirstChild("Logo") :: CanvasGroup

	local spinnerLabel = Loading.ScreenGui
		:FindFirstChild("Canvas")
		:FindFirstChild("SpinnerImageLabel") :: ImageLabel
	
	local fadeTweenSpinner = TweenService:Create(
		spinnerLabel,
		TweenInfo.new(0.4),
		{ImageTransparency = 1})

	local fadeTweenCanvasGroup = TweenService:Create(
		canvasGroup,
		TweenInfo.new(FADE_LENGTH),
		{GroupTransparency = 1})
	
	local fadeTweenLogo = TweenService:Create(
		logoCanvas,
		TweenInfo.new(FADE_LENGTH, Enum.EasingStyle.Sine),
		{GroupTransparency = 1})

	local fadeTweenLogoOut = TweenService:Create(
		logoCanvas,
		TweenInfo.new(FADE_LENGTH, Enum.EasingStyle.Sine),
		{GroupTransparency = 0})

	local fadeTweenMasterVolume = TweenService:Create(
		Master, TweenInfo.new(0.5), {Volume = 0.5})
	
	if Loading._spinnerConnection then
		task.spawn(function()
			fadeTweenSpinner:Play()
			fadeTweenSpinner.Completed:Wait()
			Loading._spinnerConnection:Disconnect()
		end)
	end
	
	task.spawn(function()
		fadeTweenLogoOut:Play()
		fadeTweenLogoOut.Completed:Wait()	
		task.wait(2)
		fadeTweenLogo:Play()
		fadeTweenLogo.Completed:Wait()
		fadeTweenCanvasGroup:Play()
		fadeTweenMasterVolume:Play()
		fadeTweenCanvasGroup.Completed:Wait()
		Loading.ScreenGui:Destroy()
	end)

	fadeTweenCanvasGroup.Completed:Wait()
end

return Loading
7 Likes

Honestly, it seems fine, it’s only 100 lines. You shouldn’t worry much about it, it’s clean. I’d look into react/roact for UI though, it makes tweening and whatnot a lot more organized and better to understand, though it’s a massive learning curve at first

1 Like