Help with creating a teleport tween (NOT TeleportService)

I want to make a UI animation play when a player steps on a teleporter, that will teleport them to another part of the game.

Basically, this:


but animated, so that it grows smaller until a player can’t see a thing.

Then, the circle appears and grows bigger when the player steps out.

Edit: I’m just having trouble with scaling the whole frame now, any help?

Thanks!

You could just tween the size (GuiObject | Roblox Creator Documentation)

Yes, I know I would need tween, but I can’t really get the circle to fit the screen, do you have any tips on how I could make it in the first place? (My original picture’s size is wrong)

Use frame UI’s to fill the outlines of the circle image. so it covers more than the whole screen with black outside of the circle

Something similar to this?

1 Like

Scale it more than just {1,0,1,0}, so the black part isn’t in the way,

Like this?

Make sure to make Anchor Points to 0.5, 0.5
and then make the position of the “Portal Image” to 0.5,0.5 so it will be in perfect middle if you set the size to 1,0,1,0

If I set the size to {1,0, 1,0} it looks weird…

You can also make the circle smaller and put amother image labels or frames to the background.

Wouldn’t it be kind of messy? I’m trying to make the animation where the circle gets smaller and smaller…(but I’m stuck on the positioning)

Then I dont know how would you go about fixing it other than that.

Maybe try to make the circle smaller in paint.net or photoshop etc.

Could someone help me with the sizing? I still can’t get it right. I have no idea how to make it fit. (I want it to come in from the sides)

Does anyone know what the size of the roblox screen (in studio) is? That might help… unless the size varies.

I’m not worrying too much about the sizing now, but how would I make something cover the sides?
(like keep up with the sides, I don’t know much tweening, so I would need help on that)

Why not have the circle in a frame, together with frames that cover the edges. Then you would just tween the size of the parent frame.

The circle would be in the middle and the 4 frames would be on each side.

image

Parent all of the objects to a single frame and tween the parent’s size only.

image

The circle would cover the entire screen at its biggest (Parent frame size ~ UDim2 {3,0,3,0})

image

And at its smallest you would see the edge frames.

Sorry if it’s not a clear explanation of what I’m trying to say.

2 Likes

I get it, but wouldn’t the frames become smaller, and show the edges of the screen?

Expand them so they’re way bigger than the screen itself

1 Like

Would extremely oversized frames cause any lag/performance issues when being tweened?

They shouldn’t, as the frames wouldn’t be that big. Only one way to find out, though. :slight_smile:

1 Like