How do I make a gui like this?

Help and Feedback Scripting Support
#1

I have been seeing more and more roblox games use gui effects like this ex: Unboxing Simulator [5 YEARS] - Roblox if you look at the start button there are moving lines that curve around a box, how is this possible?

2 Likes
#2

Creativity.

I’m not exactly how they did it but if I had to guess one way they could of done it is tweening 4 rectangles behind a Invisible Frame with ClipDescendants enabled

#7

In the future you should add a picture or gif to your post since not everyone might be willing to join a game just to understand the question. Here’s a picture of the button where the lines move around the button:

image

The lines look like regular Frame objects with just an outline and a width / height of 0. The animation is played so it looks like the lines move around the button, but in reality there are different lines for all 4 sides of the button and their animations are lined up in a way so it looks continuous. All you need is one animation for one side and then copy and paste it for the other 3 sides.

As for the animation itself, there are a couple ways you could go about doing it. The easiest would be to use an invisible Frame to which you add the lines and whose ClipsDescendants property is set to true. This way you can just tween or move a line from one side to another and when it reaches one of the sides, the line will automatically be clipped.

Another option would be to use a bit of math so you don’t have to rely on a frame with ClipsDescendants set to true. Here’s a quick and dirty example I made which isn’t complete but should give you an idea of how you would program it.

local animDuration = 2 -- how long it takes for the line to loop around
local scale = 0.3 -- size of the line as a percentage of the width of the frame it's in
local fromXScale = 0.25 -- left border of the animation
local toXScale = 0.75 -- right border of the animation
local yScale = 0.5 -- vertical position

local relativeScale = toXScale - fromXScale

local Line = script.Parent.Frame.Line

while true do
	game:GetService("RunService").RenderStepped:Wait()
	local timeStep = tick() % animDuration -- how far into the animation you are as a number
	local progress = timeStep / animDuration -- number from 0 to 1 indicating the progress of the line in the animation
	Line.Position = UDim2.new(fromXScale + progress * relativeScale, 0, yScale, 0)
	Line.Size = UDim2.new(math.min((1 - progress) * relativeScale, scale), 0, 0, 0) -- math.min to scale down the object when it gets close to the right side
	-- TODO: add a second frame here which can only be seen when the main line is being cut off on the right side
	-- its size should be the equal to the size that has been cut off by the math.min() above
end

Keep in mind that you will need 2 frames at least for each animation (for both methods I mentioned!)

6 Likes