Help needed in making this UI effect

Help and Feedback Art Design Support
#1

Hello there!, I’m trying to make this UI effect but I’m not sure how to achieve it.

https://gyazo.com/40b9f99d803a70a883d24a0444bf850d

This was taken from Bubble Gum Simulator as a reference.
I’m not a very good UI designer so I’d appreciate some help in this topic.

Thanks!

1 Like
#2

I can only just tell that they are not actually ‘colouring it in’ They have this rectangle that presumably is being tweened? I think you may need to tween it’s size with UDim factors etc…

1 Like
#3

They are colouring it in, but not the text. I think they are just tweening a rectangle to go over it. I may be wrong, but that’s what it looks like

1 Like
#4

I had thought about that before, but I later discovered that it has something to do with ClipDescendants and Anchor Points. Any other suggestions?

#5

I see.

Here is a marvellous API Reference thingy mabob:

1 Like
#6

My idea is that it may be a rectangle that is at first really small in height and then the height just increases via using tweening.

2 Likes
#7

That could be done like that but again, that may be not the right way to do it. Perhaps, not even the easiest.

1 Like
#8

I mean everything you’d do is slowly change the height of an ImageLabel.

2 Likes
#9

I did read the API for ClipDescendants but it doesn’t really help at all. Atleast for me.

1 Like
#10

Using ClipDescendants, you could use the rectangle idea while also use tweening. It would basically clip the rectangle to the logo, and slowly move it up by tweening the position.

4 Likes
#11
2 Likes
#12

That could work, but what I mean is that you have 2 image labels, one black & white and one coloured one. Then you’d have the coloured one’s height at like 0, and then you’d slowly increase it so it overlaps the black & white version of the logo that is in the exact same position as the coloured one.

2 Likes
#13

That can be helpful, I’ll surely read it!

2 Likes
#14

The whole screen is covered by a frame shaped as the logo of Bubblegum Sim . The logo itself is transparent inside. Per total the whole UI in your gyazo screenshot is made out of 3 frames
– A general frame with cropped bubble gum logo in it and with Zindex set to 2 (the frame with the biggest Zindex will be shown first
– BubbleGum Simulator logo, transparent inside and with Zindex set to 3 (so it can be visible over the general frame)
– The tweened frame which is a simple color being tweened as the game loads in. It’s Zindex is set to 1 so it can be under the general frame and the logo frame. Usually , so there wont be any problems the tweened frame is as big as the player’s screen.

Hope this helped you understand how they created the logo. Of course you need to make a full colored version of your logo, then make a copy but with interior cut out or made semi-transparent and you’re good to follow the steps above. Sadly, i am not a good scripter yet so i cannot provide you with a tweened script who advances as the player’s game loads in.

1 Like
#15

Im late here, but I think its 2 Images, one grayscaled and one with colors. The one with colors is placed into a ScrollingFrame with ClipDescendants set to true and then the size of the ScrollingFrame is tweened slowly to achieve the effect :smiley: (The hard part is to Size it perfectly and position it just right to make it look like its filling up(by the way dont try making the scrolling frame come from the bottom, thats way harder than making it go from the top))