You can write your topic however you want, but you need to answer these questions:
What do you want to achieve? Keep it simple and clear!
When you press the ‘DRIVE’ button, I want it so all of that UI currently seen fades out, and the new ui fades in.
What is the issue? Include screenshots / videos if possible!
Not got a clue how to do it.
What solutions have you tried so far? Did you look for solutions on the Developer Hub?
I looked on the developer hub.
After that, you should include more details if you have any. Try to make your topic as descriptive as possible, so that it’s easier for people to help you!
Please do not ask people to write entire scripts or design entire systems for you. If you can’t answer the three questions above, you should probably pick a different category.
Place the UI to fade out in a folder - lets call it HideFolder
Place the UI to fade in into a folder - lets call it ShowFolder
Use a pairs loops to index through the UI in the HideFolder and tween its transparency from 0-1.
Use a pairs loop to index through the UI in the ShowFolder and tween its transparency from 1-0.
If you want, I could show a more detailed script on how to do this.
Try to use the new instance called CanvasGroup! It can change the transparency of everything inside of it at once, by rendering them all as an image. The instance might not work correctly in the roblox player, though.
Also, sorry to be pedantic, but it’d be better if you didn’t show screenshots of your code, but rather pasted your code and surrounded it with 3 backticks at the start and end of your code (backtick = `, the little key on the top left side of your keyboard.)
CanvasGroup is a great way to go about this, I hadn’t thought about it. But, because of its nature, it uses more memory, so if it consumes too much memory, it just doesn’t end up showing at all, which is undesirable. Please correct me if I’m wrong, I don’t remember too much about them
I think the resolution dies a little if it’s big or there’s already a lot of memory. But of course if there’s barely any memory left, it decides not to show. Or maybe at least it would render it like the CanvasGroup is just a Frame. This is what happened when I last checked how the CanvasGroup works in the roblox player. That was a few weeks ago.
And considering this is a game about trains, there’s probably going to be quite a lot of memory usage because in most train games, they are really big, detailed meshes. Not sure if OP has found a way to optimise them, though. However, if OP has, CanvasGroup would work perfectly fine…
Some functions like this should work. I can’t test them right now, though. If it doesn’t work, I suggest looking at CanvasGroups.
local function setinit(object, i)
if object:GetAttribute("Init"..i) then return end
object:SetAttribute("Init"..i, object[i])
end
local function getinit(object, i)
return object:GetAttribute("Init"..i) or object[i]
end
local hideid = 0
local function hideUI(ui, time)
hideid += 1
local localid = hideid
local function runobj(obj)
if not obj:IsA("GuiObject") then return end
if obj.ClassName:match("Gui") then return end
local props = {}
if obj.ClassName:match("Image") or obj:IsA("ViewportFrame") then -- ImageLabel, ImageButton, ViewportFrame
props.ImageTransparency = 1
setinit(obj, "ImageTransparency")
end
if obj.ClassName:match("Text") then -- TextLabel, TextButton, TextBox
props.TextTransparency = 1
setinit(obj, "TextTransparency")
end
props.BackgroundTransparency = 1 -- All Gui Objects
setinit(obj, "BackgroundTransparency")
game.TweenService:Create(obj, TweenInfo.new(time or 0.25,Enum.EasingStyle.Quint,Enum.EasingDirection.Out,0,false,0), props):Play()
end
runobj(ui)
for _, obj in pairs(ui:GetDescendants()) do
runobj(obj)
end
task.delay(time, function()
if hideid == localid then
if ui:IsA("ScreenGui") then
ui.Enabled = false
else
ui.Visible = false
end
end
end)
end
local function showUI(ui, time)
hideid += 1
if ui:IsA("ScreenGui") then
ui.Enabled = true
else
ui.Visible = true
end
local function runobj(obj)
if not obj:IsA("GuiObject") then return end
if obj.ClassName:match("Gui") then return end
local props = {}
if obj.ClassName:match("Image") then
props.ImageTransparency = getinit("ImageTransparency")
end
if obj.ClassName:match("Text") then
props.TextTransparency = getinit("TextTransparency")
end
props.BackgroundTransparency = getinit("BackgroundTransparency")
game.TweenService:Create(obj, TweenInfo.new(time or 0.25,Enum.EasingStyle.Quint,Enum.EasingDirection.Out,0,false,0), props):Play()
end
runobj(ui)
for _, obj in pairs(ui:GetDescendants()) do
runobj(obj)
end
end
There are a few ways to go about this. Here’s one way: local ReplicatedStorage = game:GetService(“ReplicatedStorage”)
local ReplicatedFirst = ReplicatedStorage:WaitForChild(“ReplicatedFirst”)
local ReplicatedSecond = ReplicatedStorage:WaitForChild(“ReplicatedSecond”)
local firstButton = script.Parent.FirstButton
local secondButton = script.Parent.SecondButton
local firstFrame = script.Parent.FirstFrame
local secondFrame = script.Parent.SecondFrame
local function setVisibility(frame, visible)
frame.Visible = visible
frame.ImageTransparency = visible and 0 or 1
end
It’s important to note that changing the ImageTransparency property will not cause the GUI to fade. If you want to do that, you’ll need to use TweenService.
