How would I make a fading intro gui to my game

Help and Feedback Scripting Support
, , ,
#1


im trying to redo all the code for this old game i was making, but i dont know how i did this fading intro gui thing (dont rly know how else to explain it, i think i got it from some youtube tutorial so i cant understand the code at all and the ui scaling is completely broken).

i asked someone online and they said i could do this by “adding a canvas group and putting all the other things that i want to have the fade effect inside it, then tweening the GroupTransparency value of the Canvas Group instance” (their exact words). could someone explain what any of that means, im hella new to scripting so idk

#3

So a CanvasGroup is an Instance (like parts are instances, ScreenGuis are instances, etc).
Said CanvasGroup can be used inside of GUI, of which by modifying its GroupTransparency property, you are able to change the transparency of all of the CanvasGroup’s children (AKA the instances inside of it)

In order to make it fade, you can do something like this:

local CanvasGroup:CanvasGroup = "Your Canvas Group Here"

for i = 0, 1, 0.01 do
   CanvasGroup.GroupTransparency = i
end

You dont have to use a for loop, I used one cause tweens, another way of making smooth transitions, usually wont be loaded in time for this sorta thing (assuming this GUI does its thing when the player joins.

If you want more info on CanvasGroups, check here: CanvasGroup | Documentation - Roblox Creator Hub
It probably has some good things to look at!
If you have any more questions feel free to ask!

5 Likes
#4

if i change the canvas group transparency, isnt that gonna make every element of my intro sequence opaque at once? is there a way to make each part of it fade in/out in whatever order i want or is that not doable with canvas groups or wtv

#5

Its very much doable!
First off, anythings you dont want to fade out, dont put them into the CanvasGroup, Ex:
image_2024-12-07_201730000

If you want to fade in and out the items in the CanvasGroup you can use functions like so:

local CanvasGroup:CanvasGroup = 'Your_CanvasGroup_Here'

local function FadeIn()
	for i = 1,0,-0.01 do
		CanvasGroup.GroupTransparency = i
		task.wait(0.01)
	end
end

local function FadeOut()
	for i = 0,1,0.01 do
		CanvasGroup.GroupTransparency = i
		task.wait(0.01)
	end
end

-- Example.

CanvasGroup.Title.Text = 'Made By Potato Studios'
FadeOut()
wait(2)
CanvasGroup.Title.Text = 'Eat Lice'
FadeIn()
wait(1)
FadeOut()
2 Likes
#6

2 things:

  1. the fade thing in your script doesnt seem to work

  2. the original intro thing i had in my old game had an image box too, is there a way to handle an image and text box at the same time with 1 canvas group?

#7

I think that changing the group transparency applies to TextTransparency, ImageTransparency, etc.

Can I see your entire script?

#8 
local CanvasGroup:CanvasGroup = script.Parent.IntroElements

local function FadeIn()
	for i = 1,0,-0.01 do
		CanvasGroup.GroupTransparency = i
		task.wait(0.01)
	end
end

local function FadeOut()
	for i = 0,1,0.01 do
		CanvasGroup.GroupTransparency = i
		task.wait(0.01)
	end
end

FadeOut() --make text invisible
CanvasGroup.P1.Text = 'dev note: this game is hella unfinished lol' --change text
FadeIn() --show text
wait(2)
FadeOut() --make text invisible
wait(2)
CanvasGroup.P1.Text = 'u got 1 shot so make it count or sumn like dat' --change text
FadeIn() --show text
wait(2)
FadeOut() --make text invisible

IntroElements is the name of the canvasgroup and P1 is the name of the text label, the script is a localscript parented to a screengui inside startergui