How to make a repeating “animated” background image, with GUI Elements
Its actually quite simple to make when you get the gist of it. And I will be also explaining how it works later.
Here’s what your finishing product should look like.
Part 1 - Grab That Design!
Ok so, to start off, first you either want to grab a simple repeating design, like the classic white and black checkerboard or mosaic tiles. You may want to get this image from the internet in high quality if you can’t find one or make one. You can also get something like a repeating flower design, BUT, know that to make this illusion of repeating images, you may want to make sure that the shapes or images in your background image is repeating, and matches up with the last one.
Here’s what I mean if you don’t understand this.
Bad:
Correct
If you can’t tell what the image is, in the first image, the image that I used has a design that doesn’t exactly repeat on the left and right side of its edges, therefore we have a part that doesn’t look right in the center of the two Image Labels.
When you’ve got this part down, now you can come down below this bar and check out what’s going on in the coding department!
Now that you’ve got your image, create an Image Label and name it Background1 or something else that is rememberable. Make the label’s X and Y scale {1, 0, 1, 0} ({xScale, xOffsett, yScale, yOffset}), make sure the offset is always zero, because if not then it won’t scale for all devices.
Set the Image property of Background1 to your desired image, NOTE: This will NOT work if your doing this in an unpublished place. Then duplicate the image and name it something like Background2.
Ok, now that you’ve got that down, its time to actually make the Illusion affect begin its course!
Part 2 - Putting The Image In The Game
Now what you want to do is set Background1's position to {0, 0, 0, 0}, having no offset or scale on any side of the axis. And you want to set Background2's position to {-1, 0, 0, 0}. An explanation for why we do all of this and why this works will be explained later at the end of the post, so keep on looking so that you can get more info on this!
Now, its finally time for the coding part of this, I know you were waiting for this, and yes, I’m not joking this time, I’m sorry about earlier, I know you were excited but, it was important ok?!
Part 3 - Its Scripting Time
Now we can finally script the code! It’s been a bit. If you haven’t already, add a local script to (I recommend) Background1, rename it to whatever you like. Now insert code that looks like this so that we can get the “Illusion working”. An explanation of what the code does is answered in the code, so make sure to analyze the data first, and then read the code.
local Background1 = script.Parent -- Make the first background image a variable that we can call
local Background2 = Background1.Parent:WaitForChild("Background2") -- Make the second background image a variable that we can call
game:GetService("RunService").RenderStepped:Connect(function() -- Call for RunService
Background1.Position += UDim2.new(0.0005, 0, 0, 0) -- Update the Positions : NOTE - You can change the xScale if you want to make the ImageLabel's position move faster.
Background2.Position += UDim2.new(0.0005, 0, 0, 0) -- Update the Positions
if Background1.Position.X.Scale >= 1 then -- Check if the Background Position Scales X axis changed and if it has reached the scale of 1
Background1.Position = UDim2.new(-1, 0, 0, 0) -- Reset's the position back to the start, with the second image now being around the {0, 0, 0, 0} mark for its position and taking the first images place.
elseif Background2.Position.X.Scale >= 1 then -- Same thing but just checks for the second image.
Background2.Position = UDim2.new(-1, 0, 0, 0) -- Also does the same thing, but now the first background image takes the crown back and is now filling in for the second background image
end -- The background images switching places like this makes it so that one of these background images are always filling in a place for the other.
end)
You can also used what @savio14562 said in the comments, if you want to make your code look nicer.
Ok well, now you’re done, that’s all you have to do. When your playtest your game, everything should be working smoothly. Look down below if you want a clear explanation on how this illusion works, and also for troubleshooting. If you have a question that’s not already answered on the troubleshooting tab, please reply to this post, and I can help you out.
Troubleshooting and Explanation
Q : My Image Label’s Are Overlapping Eachother
If this is happening to you, you may want to fix the positions of your two Image Label’s, because if they aren’t noted down accordingly, it can cause the image label’s to overlap, or make it so that the workspace and player can be visible.
Explanation on the illusion
I’m not sure if this particularly has a term or name, but for right now, its being called an illusion. This is an illusion because, even though it looks like were making infinite amounts of Image Labels, in reality, were actually just using two and manipulating their positions to our favor so that we can make this “infinity affect”.
And also, the reason why were setting the positions to -1 and 0is because of the way that they fit on screen. As seen in the image below, whenever we change the positions of the image label that cover the entire screen, they go back in between two points that resemble the first two points on the left side of the center.
If that isn’t very clear (which it probably isn’t), then analyze this images, because when you analyze them, you will then understand how and why the sizes of the images matter, and how they’re positions corelate to their size.
Thats all! Thanks for viewing my tutorial.
I will not be revamping this post until the 25th because I don’t currently have the time to fix any errors I made here, maybe small grammatical error’s, but not much other than that.
I will be trying my best to make fixes on this post, and reply to those who need help.
Update Times:
Adding How To Make Color Change - Adding How To Change Its Position From The Top To Bottom
2023-02-19T05:00:00Z→2023-02-22T05:00:00Z
Other Tutorials:
Guide To Making a Good Roblox Game - Resources / Community Tutorials - DevForum | Roblox
Credit Given to User @LeqenDzTR for helping me out with this, without him, I would not know how to do this.
