UI Effect Question

I’ve been wanting to get into making cool UI effects for awhile and recently I’ve stumbled across this game,

After looking at their UI, I saw this pretty cool effect:
d397ae936bede57c3a622ed070a2d6bb

I was just wondering if someone can give me some tips on how to set up something like the moving background so I can learn to use cool UI effects in the future.

I was possibly thinking a sprite sheet of some sort, or some crazy TweenPosition stuff but I’m unsure on the best and most efficient way to go.

Thanks for your help and sorry I’m such a noob :frowning: .

Best Regards,

  • Vritix :heart:
6 Likes

it’s just a image with a looping tween…

1 Like

I was just wondering if someone can give me some tips on how to set up something like the moving background so I can learn to use cool UI effects in the future.

I obviously understand what it is…
I’m asking how to set it up.

This gets quite complex for something so simple haha

The first thing to think about is where everything goes, and their ZIndex

To get the background effect being cutoff, while having a border on the frame, requires there to be two frames:

  • one to be the border
  • one to be on top of the border with a slightly smaller size, and ClipsDescendants set to true

Inside the second frame, you want the background image, and the elements on top

Give the elements above it a higher ZIndex to make sure the background image is at the back of the frame

Now, what you want to do is:

a) make the image tile using the ScaleType property and doing some clever stuff when making the original image to give the illusion of a full background
b) make the image one big image with ends that can seamlessly join

The main thing for you to remember with the back image is that it has to tessalate perfectly.

Now there are two options for tweening:

a) make the image (or two copies of it) have a total size of twice the frame they are tweening in, and tween them in and out, resetting their positions everytime the end of the image(s) have been reached
b) create a copy of the image and tween it, then when it is at its end, make another copy, tween it, and continue that eternally


@PressurizedSphere It’s more complex than that lol

9 Likes

I mean, not really I just made one with a simple tween


Tweening.rbxl (15.2 KB)

4 Likes

Yes but it’s a bit weird to get your head around + you need to deal with an image style that is harder to tessalate, and you need to think about extra stuff like borders and ZIndex.

All in all, pretty tough for someone who doesn’t understand it, and hard for someone to come up on their own.

1 Like

He knows what it is, he’s asking how to set it up.