Infinite Looping Horizontal Image Moving Across Screen

[YugaHinohara (林先生)]

What I want to achieve is something like this Persona 5 wallpaper, the moving horizontal comic strip that is a loop.

What I currently have made for it.

The problem comes when I try to go about looping the image.

My local script animating it:

local RunService = game:GetService("RunService")
local SCREENUI = script.Parent

local SPEED = 100 
local HorizontalPanel = SCREENUI:WaitForChild("Comic_Design_LoopHorizontal_1")


local clone = HorizontalPanel:Clone()
clone.Name = "HorizontalPanel_Clone"
clone.Parent = SCREENUI




local panelWidth = HorizontalPanel.AbsoluteSize.X


HorizontalPanel.Position = UDim2.new(0, 0, HorizontalPanel.Position.Y.Scale, HorizontalPanel.Position.Y.Offset)
clone.Position = UDim2.new(0, panelWidth, HorizontalPanel.Position.Y.Scale, HorizontalPanel.Position.Y.Offset)


RunService.RenderStepped:Connect(function(dt)

	HorizontalPanel.Position = UDim2.new(0, HorizontalPanel.Position.X.Offset - SPEED * dt, HorizontalPanel.Position.Y.Scale, HorizontalPanel.Position.Y.Offset)
	clone.Position = UDim2.new(0, clone.Position.X.Offset - SPEED * dt, clone.Position.Y.Scale, clone.Position.Y.Offset)

	
	if HorizontalPanel.Position.X.Offset + panelWidth <= 0 then
		
		HorizontalPanel.Position = UDim2.new(0, clone.Position.X.Offset + panelWidth, HorizontalPanel.Position.Y.Scale, HorizontalPanel.Position.Y.Offset)
	end

	
	if clone.Position.X.Offset + panelWidth <= 0 then
		
		clone.Position = UDim2.new(0, HorizontalPanel.Position.X.Offset + panelWidth, clone.Position.Y.Scale, clone.Position.Y.Offset)
	end
end)

Any help would be appreciated!

[3gData (4gdev)]

My advice would be to use a texture as they are infinite. What you can do is set up a part, position it in front of the camera where you want it and edit the TextureOffsetStuds to move the image.

This will give you a seamless scrolling effect that is infinite

[YugaHinohara (林先生)]

Awsome, it worked like a charm

However the texture seem to be erm…low resolution.
But its fine, I am okay with it.

I’ll leave the post open for a week and if there are no better solution then I’ll mark yours as solution!

Thank you very much!

[happya_x (Happya)]

your original approach works i think, but you should be using AbsolutePosition.X instead of Position.X.Offset

[YugaHinohara (林先生)]

With different resolution, the UIs would overlap each other though

[YugaHinohara (林先生)]

Managed to solve it and achieved what I want with just moving images looping!
I had to have two copies of the image and merge them together where it both ends.

local RunService = game:GetService("RunService")
local guiInset = game:GetService("GuiService"):GetGuiInset()
local SCREENUI = script.Parent

local SPEED = 200
local p1 = SCREENUI:WaitForChild("Horizontal_Image_Panel")
local p2 = SCREENUI:WaitForChild("Horizontal_Image_Panel_2")

task.wait()

local yScale, yOffset = p1.Position.Y.Scale, p1.Position.Y.Offset


p1.Position = UDim2.new(0, 0, yScale, yOffset)
p2.Position = UDim2.new(0, p1.AbsoluteSize.X, yScale, yOffset)

local function isOffScreen(panel)
	local pos = panel.AbsolutePosition + guiInset
	local size = panel.AbsoluteSize
	local viewport = workspace.CurrentCamera.ViewportSize

	
	return pos.X + size.X <= 0
end

RunService.RenderStepped:Connect(function(dt)
	-- Move panels individually
	for _, panel in ipairs({p1, p2}) do
		panel.Position = panel.Position + UDim2.new(0, -SPEED * dt, 0, 0)


		if isOffScreen(panel) then
			local otherPanel = (panel == p1) and p2 or p1
			panel.Position = UDim2.new(
				0,
				otherPanel.Position.X.Offset + otherPanel.AbsoluteSize.X - 85,
				yScale,
				yOffset
			)
		end
	end
end)

This is what I meant having them merged before hand

And bam it works!

Both viewport and this method works too, its just that viewport has a lower resolution for me.

My function referenced something from this forum

How do I tell if a GUI is off the screen

You’re going to be best off using the AbsolutePosition and AbsoluteSize properties of your guis. Using either scale or offset will ignore any properties of the other when doing the calculations. Since you said you used scale you could update this to use scale instead, but doing it this way will make it work if you ever add any offsets. Additionally Roblox’s top bar can mess with the numbers, so you will want to do something like this. local guiInset = game:GetService("GuiService"):GetGuiInse…