How do you make this kind of effect on gui?

So It’s been weeks since I started developing my horror game on roblox. The FNAF 4 one. Now the game’s on it’s final stages, all I need is these effects right here:

When you watch the video, you can see those lines randomly appearing on the New Game button. You can see it’s an animation basically. I was wondering how could I iterate or make a loop for this kind of gui animation effect to happen.

For me, I call it “old movie effect”, those animated lines randomly appearing. Basically that’s the results I want to get. Now if you have any idea, suggestions, etc, reply below!

NOTE: I don’t have any pre-code cause I don’t know where to start.

2 Likes

My guess is you could try to create a black frame and make it span the length of your screen and a couple pixels wide. Create a script that randomly creates new ones and randomly places it somewhere on the X axis.

If you need to do a specific area, just specify two points on the X axis where you would like it to be created.

4 Likes

I actually have frames that are scaled very thin. They are just invisible. I need to find a way to randomly make then visible one by one.

1 Like

You may use UiGradient in addition to some scripting.

1 Like

Did you watch the clip tho? I need to acquire that kind of effect. Lines randomly appear like an old film effect.

1 Like

Oh ok, if you want lines to be more old style you then need to make some images with transparent background and make a script cycle them inside an imagelabel covering the entire screen.
EDIT: I suggest paint.net.

1 Like

I already have frames that will act as those line thingies. I need to find a way to iterate / make a loop to make them appear randomly one by one. The frames are scaled very thin like those lines in the vid.

2 Likes

I think it’s enough to make a script that random locates them on the screen like this: Udim2.new(math.random(0,800)/1000,0,0,0) < Position
And if you want them to auto resize it’s enough to use the same method with the size udim2.
EDIT: The 800 can be changed, don’t forget you need to remove the vertical size else the lines will go out of the screen as well.

3 Likes

Here’s some code (this isn’t a complete script but should hopefully bring you in the right direction) (I’m assuming you know the basics of lua)
Position some of the lines randomly and make them all invisible.
That’s quite simple.

Now to the coding!
First, get all of the small frames/lines:

local Frames = YourGuiThing:GetChildren()

Then, you select a random one every second or so:

while true do
    for _, frame in pairs(Frames) do
        frame.Visible = false
    end

    local randomFrame = Frames[math.random[1, #Frames]] -- this gets a random frame
    randomFrame.Visible = true

    wait(1)
end

Hopefully this helped!

5 Likes

@MaxWither8 Thank you for this helpful code. It has now solved my problem. Also @Mr_Wiggles thanks for trying to help too. I appreciate your help.

This is what happens now:
https://streamable.com/8htle2

There results are the expected desire I wanted.

2 Likes

If you want to make it a bit better, I would make them fade in and out.

You can achieve this by changing the transparency.

2 Likes

Maybe in the future I’d need them to fade. But how do I do it?

1 Like

The way I would do it is make a function that passes the frame as a parameter and create a numeric loop between 1 and 9, or 9 and 1 (depending on whether you’re fading in or out), then set the transparency that way.

It would look something like this:

function Fade(Frame, Type, FadeTime)
	local function SetTransparency(Number)
		Frame.Transparency = Number
		wait(FadeTime/9)
	end
	
	if Type == 'In' then
		for i = 9, 1, -1 do
			SetTransparency(tonumber('0.'..tostring(i)))
		end
	elseif Type == 'Out' then
		for i = 1, 9 do
			SetTransparency(tonumber('0.'..tostring(i)))
		end
	end
end
2 Likes

How should I call this function you just provided? Yes I know how to use functions but do I have to choose between “In” or “Out”? in the “Type” parameter?

1 Like

Yes, you have to provide “In” or “Out” in the Type parameter.

2 Likes