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:
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.
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
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.
.
