How can I make a transition like Meep City's?

I would like to make a GUI transition similar to Meep City’s transition, but I can’t think of any ways of going about it. I would really like some help/tips in ways I can complete this task.

Thanks!

  • AWhale_OfATime

Meep City Example:

9 Likes

Set the camera to scriptable then change the cframe of the camera to where somewhere facing your door
then Use humanoid#moveTo

2 Likes

Oh, I’m not talking about that. I’m talking about how the GUI closes into black.

1 Like

Its likely a gif or a single image being resized

2 Likes

Do you know how to make gifs in Roblox?

1 Like

This is actually an illusion that is most commonly easier to see if you use iMovie. It is just a png image of a black screen with a hole in the middle which is scaled up and they tween it to scale down to the viewport

2 Likes

Hmm… I’ll have to try that out then.

1 Like

How big do you suggest the hole to be?

1 Like

Probably a sixteenth of the x axis

1 Like

Okay, I’ve made my decal but I have a few questions: When you say scale up my png do you mean the size {1, 0},{1, 0} or beyond the screen? And when you say “viewport” do you mean the screen?

I don’t know what to do at this point because if I scale down the png, the rest of the png wont be in black. Am I missing something?

I did it and it worked:

First thing you need to make a picture that have hole in the middle of the screen like that:


Then in roblox insert it and make background transparency 1, and anchor point = 0.5,0.5

For that thing :

You will need to make the picture smaller and put 4 frames around the hole like that:

Keep scale it down and make the black frame bigger:


Keep doing that until you reach the smallest hole size that you want. Finally, you just need to scale the hole size make it big so no black frames show up, and using tween Service you can tween it and make it’s size small.

4 Likes

I can see this working! But I have a problem where whenever I scale up the image it ruins the frame’s position and scale. Is there a specific way I can do this?

https://gyazo.com/d1264cf6786f71acf44683d7df4f2031

Ok, I actually found a fix to this where if you put the objects in a frame that is the size {1, 0}{1, 0} the scaling is fixed.

Use scale not offset. You can use this plugin: [Plugin] AutoScale Lite for GUIs - Scale your UI , and make the position and size in scale, not offset.

1 Like

To avoid this ugly elliptical stretching you can use a https://developer.roblox.com/en-us/api-reference/class/UIAspectRatioConstraint

1 Like