You may have seen these types of loading screens in multiple games, I will show you an example however, in Bubble Gum Simulator.
Example
Before UIGradients became a thing, you had to use a pretty hacky way of accomplishing this.
Good news! We can now use UIGradients instead!
there will be a place file where you can just change the ImageId if you want at the end
Firstly you will need to have a logo of your choice to use, I will be using this logo:
Set up a ScreenGui like this:
if you don’t want the GUI visible whilst you’re editing in studio, you can disable the Enabled property (we enable it via script later in the tutorial)
Make sure that the logo’s AnchorPoint is .5,.5 and the SizeConstraint is RelativeXX or RelativeYY (so that it is square). Then you can place it anywhere you want with Position. Use scale to size it and use the same scale for both axes. For example with RelativeYY: UDim2.new(.5,0,.5,0), or with RelativeXX: UDim2.new(.2,0,.2,0). Both of these methods work, it’s just personal preference.
Once you have these things completed, you will want to place a UIGradient into the logo object (ImageLabel/ImageButton). Like so:
Make the gradient something on the lines of this:
Three keyframes, the first one is white and the rest are black (or a dark colour).
You can mess with the rotation of the UIGradient to make it gain colour from different angles, however I will just do it from the bottom (rotation -90).
Now we get to the amazing scripting part of this tutorial!
Create a LocalScript wherever you want, but make sure you know how to reference the different objects (I will place mine inside the Logo ImageLabel/ImageButton).
Here is the script you will have:
local tweenService = game:GetService("TweenService") -- defines tweenservice
script.Parent.Parent.Parent.Enabled = true -- optional, only if you have the GUI disabled for studio editing purposes
game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All,false) -- optional
local length = 3 -- you can modify this if you are using ContentProvider
local tweenInfo = TweenInfo.new(length,Enum.EasingStyle.Linear) -- creates tweeninfo, you can configure this
wait(2) -- so the player can spawn in, you will need to change this
local info = {}
info.Offset = Vector2.new(0,-1) -- creates the tween target, you will have to mess with this if you use different angles (this is from the bottom, -90)
local tween = tweenService:Create(script.Parent.UIGradient,tweenInfo,info) -- creates tween
tween:Play() -- plays tween
wait(length+1) -- waits for tween to finish +1 second for aesthetics (optional)
game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All,true) -- optional
script.Parent.Parent.Parent:Destroy() -- removes the gui (make sure ResetOnSpawn is false!)
File:
load.rbxl (21.8 KB)
Though, you can just put the image label directly into the screen GUI, don’t need a frame container.
