Scripting a moving background screen

Help and Feedback Scripting Support
#1

I believe some of you have seen and are familiar with those loading screens in a few story games. What I’d like to do is like an infinite loop of a moving picture, but I’ve got no idea on how to do anything like that.

I know I must use tweenservice to actually animate the pictures. What else could I use to keep the picture appearing all the times?

I’ve tried to find any similar topics what have been opened, but I just can’t find any. It’s probably a stupid question to ask for help.

Here’s the pic I’m trying to animate:

My Post (25)
My Post (25)1280×720 16.8 KB

14 Likes
#2

I’m not sure if you’re trying to make it go on an angle or rather just to the side. But if you’re trying to make it just go to the side you could make a frame the size of the entire screen and tweenservice that to the right. In a renderstep loop you could check if the position is 0, 0, 0, 0 and clone a new frame to the left of it, tweening it to the off screen position at the same speed.

#3

Please search before posting.
https://devforum.roblox.com/search?q=moving%20background

#4

Basically, what I usually do is create an image that can have a repeating pattern, like this image here:
moving background test
I made an image label and set its size to {2, 0}, {2, 0} and use the TileSize property which becomes visible if you set the image’s ScaleType to Tile:
image

In a script, you can use TweenService or TweenPosition to move the image to a position then restore it to its previous position at the end of the tween:

local TweenService = game:GetService("TweenService")

local tween = TweenService:Create(script.Parent, TweenInfo.new(10, Enum.EasingStyle.Linear), {Position = UDim2.new(0, 0, -1)})

while true do
	script.Parent.Position = UDim2.new(-1)
	tween:Play()
	tween.Completed:Wait()
end

When running this, you should see that it continually moves to the top-right:

If you want it to go to horizontally, vertically, or diagonally, here’s the position you’d need to begin at and target:

  • To the right: Start at {-1, 0}, {0, 0}; End at {0, 0}, {0, 0} (To the left is the opposite)
  • To the top: Start at {0, 0}, {0, 0}; End at {0, 0}, {-1, 0} (To the bottom is the opposite)
  • To the top-right: Start at {-1, 0}, {0, 0}; End at {0, 0}, {-1, 0} (To the bottom-left is the opposite)

This should give you some insight on how to achieve this

54 Likes
Moving Background
Show off your UI designs
#5

Holy cow. Thank you a lot for making this post.
You’ve explained a lot of things over here. I can finally understand something. xD

Thank you so much, @Raretendoblox ! C:

#6

hey there, its much later but i’m very confused. when i make the size (2,0) (2,0) the image becomes far too zoomed in and when i make it smaller, it doesn’t fill the screen.

3 Likes
#7

sorry to bump, but this script worked for me a couple of months ago. But now it doesn’t. It loops once and then becomes stuck. I’m not sure why all of a sudden it is broken, I checked all over devhub and none of the things used in here are deprecated, and I tried alternative methods for this same effect but they did not work either

#8

Maybe remove the Tween.Completed and replace it with a wait(3)

#9

using wait in general is bad practice, but using a wait(insertnumberhere) is even worse.

1 Like
#10

Hey, I’m having some problems with this, any way u can help? so whenever I tween it and all instead of just the tiles moving all the ui moves, how do I make it so just the tiles moves? Thanks

#11

Is your script inside the pattern imageLabel or the ScreenUI/Frame? If it is not inside inside the imageLabel make sure you specify the location of it.

I would recommend creating a variable for the pattern location. Hope this helps!
image