Creating Seamless Infinite Pattern UI

Help and Feedback Scripting Support
#1

Hello there,

I need some assistance in creating a seamless pattern that can loop infinitely on the screen for my Roblox project’s GUI. My understanding is that I can achieve this by using the tiling feature provided by the “ImageLabel” instance, but I am not entirely sure how to create the desired effect of seamless looping.

What do you want to achieve?

I aim to create a seamless pattern that can loop infinitely on the screen as a GUI in my Roblox project.

What is the issue?

I am having difficulty achieving a seamless pattern loop using the “ImageLabel” instance and its tiling feature. I am unsure how to ensure a smooth transition between repetitions without any visible seams or interruptions.

What solutions have you tried so far?

I have been testing out the tiling feature of the “ImageLabel” component in Roblox. However, I am uncertain about how to make the pattern repeat seamlessly without any noticeable breaks. Additionally, I have discovered the “RunService” API, but I am concerned about potential performance issues as I want to ensure a smooth user experience.

I have also found a video on YouTube that showcases a similar effect, but I am not sure how to implement it in Roblox.

Additional Details:

  • I’m specifically seeking guidance on achieving a seamless looping effect for the pattern.
  • I’m concerned about potential lag issues and seek a solution that ensures a smooth experience for players.

I’ve searched for solutions, but haven’t found what I need. Can you help me achieve my desired GUI effect? Thanks for your time.

2 Likes
#2

The way I went about it is using a loop like this:

while true do -- or while visible do
    local Tween = TweenService:Create...
    Tween:Play()
    Tween.Completed:Wait()
    IconHolder.Position = UDim2.new...
end

Have it the image label (I think it is only the 1 with the tiling?) contained within a holding frame that has ClipsDescendants set to true.
Tween the position of the image label within the frame, an increment of the tile size / size of each tile. Then, after the tween completes, set it back to a position that is a multiple of the tile size out of view (for the video you provided, you would set it so it goes to the bottom right more).

(I’m terrible at explaining :slight_smile: )
If you want me to try and explain some part of it differently lmk.

#3

I believe from what I have understood, you want me to do like this.

image
image2647×628 345 KB

Let me know if this is what you are trying to explain to me :smile:

#4

Hmm, I suppose you can do:

local TiledImage = script.Parent
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(10,Enum.EasingStyle.Linear,Enum.EasingDirection.Out,-1,false,0)
local Goal = {Position = UDim2.new(-1,0,-1,0)}

TiledImage.Position = UDim2.new(0,0,0,0)
TiledImage.Size = UDim2.new(2,0,2,0)
TiledImage.ScaleType = Enum.ScaleType.Tile
TiledImage.TileSize = UDim2.new(0,100,0,100) -- should be offset

TweenService:Create(TiledImage,Info,Goal):Play()
1 Like
#5

Aren’t while loops extremely ineffective? Also tweenservice has a repeat property so why bother using a loop?

#6

I will try that out and see if it can work out!

#7

Really? I didn’t know that… Now that’s something new to me!

#8

this code works and auto adjusts based on the size you set the tiles (assuming you use scale) :

local tweenService = game:GetService("TweenService")

local image = script.Parent
local differenceX,differenceY = image.TileSize.X.Scale*2,image.TileSize.Y.Scale*2
local speed = 2

image.Position = UDim2.new(-differenceX,0,-differenceY,0)

tweenService:Create(
	image,
	TweenInfo.new(speed,Enum.EasingStyle.Linear,Enum.EasingDirection.In,-1),
	{Position = UDim2.new(-2*differenceX,0,-2*differenceY,0)}
):Play()
1 Like
#9

Pretty much!

1 Like
#10

It does have the repeat functionality, although I’m not entirely sure how well it would work in this situation, given that it needs to be moved to a particular location after the tween, and I find it easier to fine tune the restarting position when its using a while loop. It could work for this though

#11

I tested it and it works flawlessly.

#12

Yes, its the forth argument. Setting a value of greater than 1 makes it repeat the animation till that value and setting a value lower than 0 makes it repeat indefinately and it should also be a whole number and not a decimal.

So did it work?

IMO scale would look ugly as it would stretch the image in unhumane ways. Offset, however, keeps a constant size. And I advise OP (Original Poster) to also use Offset rather than Scale.

(I am a scale hater.)

#13

Just create two imageLabels which have Tiling image scaling, and move one out of the screen, and second one to the screen from opposite side that the first imagelabel is traveling to, then change position of the one offscreen to starting position, and just repeat this.

#14

The codes easy to change to offset if you REALLY want to

#15

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.