Create a fade in logo for a loading screen

You may have seen these types of loading screens in multiple games, I will show you an example however, in Bubble Gum Simulator.

Example

https://i.imgur.com/a0R6MJv.gif

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:

sketch-1575561009739

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)

image

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:

image

Make the gradient something on the lines of this:

image

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)

251 Likes

Good Job man!! I’m always looking for this kind of intro. xD

14 Likes

Thanks for the tutorial! I’ll definitely keep this in mind for the future. :smiley:

6 Likes

Nice tutorial! I can see this being used for intro screens, fading screens, and viewport frames! :thinking:

7 Likes

It doesn’t seem to work in your example file provided.
The GUI just appears and is static, here is a picture of what it looks like.

It just shows like this for around 7 seconds, there is no effect and the image is static in this time until the GUI is destroyed and it disappears.

5 Likes

Ui gradients aren’t enabled for the ingame engine

2 Likes

This was tested within studio with the “Play Solo” mode, and in-game. Both had the same result.
EDIT: Oh, you’re meaning in-game as a whole, not just client-side.
EDIT 2: I’m just an idiot. I didn’t enable the studio feature.

6 Likes

Yeah oof. I’m sorry for that. Thanks tho.

2 Likes

It works in studio, but not in the actual game

8 Likes

Ui gradients are not released in-game yet.

8 Likes

Nice tutorial :+1: Though, you can just put the image label directly into the screen GUI, don’t need a frame container.

1 Like

Very cool. Thanks for sharing.

1 Like

Thank you! I’ve been looking how to make this type of intro.

1 Like

This looks good I may use to for my game this would come in handle with new projects I may come out with.

2 Likes

Cool intro! Will help alot when gradients release.

3 Likes

They have already been released. :wink:

2 Likes

Oh didn’t know. Thanks for info.

1 Like

Wow! I really like this! Really good job!

2 Likes

Very easy and straightforward tutorial. I decided to improve upon what you already had, and I added my own touches.

20 Likes

This is amazing! Is there any way to change the color from black to a different color to fit my game logo? I tried changing the color sequence but it just broke the intro.

1 Like