How Can I Achieve This Effect?

Hello Forum, recently I was playing Pet Simulator X because I have no life and I was wondering how they achieved their playful loading screen. Not only does the wipe from the bottom when the original loading screen comes, but the teleport screens fade into bubbles.

May I know how I can achieve this?

2 Likes

My guess is that they simply used an image of a bunch of differently sized bubbles then placed enough of them to fit the entire screen, then used a for loop to tween them off of your screen.

2 Likes

Also, this should probably be moved to #help-and-feedback:art-design-support

Okay, thanks! I just thought that it needed to be coder.

1 Like

Seems like circles, as @snowingwings220 said, but in rows moving at different speeds.

3 Likes

I have never played the game, but I would;

  1. Make a loop of 30 bubbles sized to the user’s screen and duplicate them in the X axis, then use the tween service to shrink them and (destroy); them one by one in an specific order. Then use a bunch of icons to create an animation, and voa’la
2 Likes

You could also pause it and check what I saw;
It’s an static image tweening from one position to another They seem to be circles, but no.

2 Likes

Don’t know.
But maybe check this out, it seems really interesting and useful

1 Like

What I was suggesting in the original post- and from what I can tell is the simplest solution (sorry if I wasn’t being clear) was to make one image containing a bunch of differently sized bubbles, then move those across the screen at different times, this saves on having to make tons of bubbles and instead you only require a few images.

1 Like

It’s probably just a single image tweening left to right. At least that is how I’d do it, the fact it’s so quick means you can’t visually interpret it properly and it looks like separate images.

1 Like

The images start at different times with different speeds, so I don’t think (at least from what I gather) your solution wouldn’t cause this effect. While a more optimized version of this could be done with one image just moving offscreen, this wouldn’t cause the separating-staggering effect shown in the video.

1 Like

It still would look fine, though.

1 Like

Actually looking at it again you are right, definitely different rows.
They move at slightly different speeds meaning the top row gains quite a bit on the lower ones.
(I’m going to try replicating this later, I need to add some screen transitions to my own game anyway)

Now looking back at it, the circles appear to actually shrink, not move away. So, this is probably done with individual circles and a for loop instead. Which is a lot less optimized but is probably needed to exactly replicate this effect.

1 Like

I built something similar here. It only does the circle part, not the initial swipe transition.
FadeThing.rbxm (5.0 KB)

5 Likes

Probably explained already by other people but here’s what I feel is done.

A bunch of frames with UICorner elements set at 1 scale and 0 offset to create a bunch of circles, position them properly across the screen, and make sure they are all the same colour.

Make sure they have UIScale to easily change the sizes of the frame. Also make sure to name them properly though 1 to x (x being the number of the frames per line to make it easier to code).

After that is all done, create a LocalScript and make a for _,v loop (_ does not assign memory value, therefore it is more efficient that way since we won’t be handling indexes), and then make a tween animation (I recommend making a function with Pobammer’s code) to change the UIScale to 0 and then :Destroy() the frame or destroy the entire intro ScreenGui after it is all done. Remember to code a wait() in the function so you can adjust how fast the animation plays individually.

You can also do coroutine wraps to spawn multiple threads of for _,v threads to make multi-line animation paths.

After that you just continue as normal, and string your other scriptable events for the intro, or have an animation script entirely on it’s own.

I explained this because I don’t wanna spoon feed and just give you the result but instead teach you how it would be done.