How do I make a infinite pattern ui background?

Help and Feedback Scripting Support
#1

Hello, I need help. I am working on a game and I want to add this cool loading menu but the problem is I don’t know how to make a infinite moving pattern gui. Here is what I want:

Kind of like offset with textures but instead with Gui

4 Likes
Infinite Pattern Movement not working
#2

You can use ImageLabel.TileSize to repeat a texture (make sure to set the ScaleType to Tile for the property to appear), and then you can use a script to slowly animate the object moving. After it moves by 1 whole tile you can shift it back to where it started for seamless looping.

8 Likes
#3

Thanks a lot, i’ve been looking for this all day.

1 Like
#4

you can use ui tiles in the imagelabel

1 Like
#5

I need help, when I did this, it didn’t look seamless, it became larger then back to small and on repeat

local gui = script.Parent
wait(10)
while gui.Active == true do
	for i = 0,1,0.01 do
		print("please work")
		gui.TileSize = UDim2.new(i,100,0,100)
		wait(0)
	end
end

heres my quick code I wrote for this

1 Like
#6

You should animate the Position property instead, so that it will slide around instead of growing and shrinking.

You’ll also want to use the RenderStepped event instead of wait() so that it animates smoothly. wait() only resumes 30 times per second, instead of in lockstep with FPS like RenderStepped. Make sure you put this into a LocalScript as well.

This script assumes you have your tile size set to 0,100,0,100, and that you want the tiles to move towards the right side of the screen. It should be pretty easy to adjust as needed.

local RunService = game:GetService("RunService")

local gui = script.Parent
local distance = 0
local secondsPerCycle = 5 -- How long it takes to cycle through one tile.
local speed = 1 / secondsPerCycle

RunService.RenderStepped:Connect(function(dt)
	distance += dt * speed
	-- This is called the modulo operator and wraps the distance from 0 to 1.
	distance = distance % 1
	-- Subtracts 200 here so that the GUI's left edge stays off the side of the screen. You'll need to make the object larger than 1,0,1,0 to make sure it covers everything.
	gui.Position = UDim2.fromOffset(distance * 100 - 200, 0)
end)
19 Likes
#7

Hey sorry for annoying you but, I want to know what dt is or what it stands for

1 Like
#8

It’s the amount of time that’s passed since the last time the event was fired.

2 Likes
#9

Yeah, I just figured that out by printing it ty

1 Like