I’ve been seeing lots of unique UI transitions from different games around the platform. I look into them and I can’t find out how they work. I tried different ways, and it just won’t work and I can’t get the same effect as what is shown in the games.
So, there are a variety of transitions around the platform. However, these stand out the most. I saw this shop menu with the different button frames that has a pattern as the background with the text button in front of it. Easy to make, right? All you have to do is make an ImageLabel, put the pattern on it, and put a text button over it.
But, the pattern was moving left slowly and never stopping without the textbutton moving with it. I had 2 questions, how was it never stopping, and how was the pattern not interfering with the other UI next to it? Keep in mind that this was all made in Roblox Studio and none of the UI was made elsewhere but the pattern itself.
I’m also seeing other transitions, too. Such as a countdown. There would be a long frame with a textlabel on top displaying the number. But, when each second would come by, the text label would tween to the top of the frame and disappear as if it was going under another frame making it not visible. But there was no UI above it?
I really don’t understand how these developers do this. I am not sure if there is a specific function or a service that allows you to do this or I’m just being stupid at this point. I’ve tried multiple times and I can’t find out how this works.
Does anyone know how these games pull it off?
1 Like
I could give a few examples if you don’t understand.
Changing the ZIndex property of UI Instances allows them to overlap each other.
On the countdown, they probably tweened the position of the textlabel down by using :TweenPosition() and then changing the zindex of the textlabel property, then tweening it back to it’s original position. The code would look something like this:
local countDownText = --text label here
countDownText:TweenPosition(UDim2.new(.05,0,0,0) + countDownText.Position, 'Out', 'Sine', .25)
wait(.25)
countDownText.ZIndex = countDownText.ZIndex - 1
countDownText:TweenPosition(countDownText.Position - UDim2.new(.05,0,0,0), 'Out', 'Sine', .25)
Edit: I don’t know what you were talking about for the first example
Thanks for the explanation!
If you go to here and go to 00:15:17, you’ll see what I’m talking about.
Just took a quick look. It looks like they are using two images (you can see the spot where the two images meet) but I can think of a couple methods of achieving the scrolling effect.
Option1: (what they probably used)
Have two background images and script them so they’re always moving sideways and when one is completely out of the frame it jumps back to the other side so it can scroll across again.
Option2:
Create a repeating pattern on a single image that is wide enough that you can simply move the image back enough that it lines up with itself again and it looks like one continuous image. Same concept as option 1 but you’re using one image instead of two.
In regards to the question about the countdown number disappearing. There’s a property for UI elements called “ClipsDescendants”. If you enable this option then any child UI element will only be visible if it’s inside the bounding area of the parent element. So as it moves outside the size of the parent UI it’ll disappear.
1 Like
This helped me a lot, thank you!
1 Like