Circular Transition Screen

[Ashp116]

This is a module that you use to create cartoony transition screen. One of the most important aspect to have in simulator games or roleplay games are circular transition screens. It looks simple but elegant. This module will create a transition GUI, and play the animation. Hope it helps!

GAME LINK: Circular Transition - Roblox
Place File: Circular Transition.rbxl (52.1 KB)
RBXM File: CircularTransition.rbxm (6.6 KB)

Example Video:

1. Download the Circular Transition Module
   2.1 Place in Replicated Storage
2. You can paste this Example Code in the LocalScript for test
   [Details = “Example Code”]

local Module = require(game.ReplicatedStorage.CircularTransition).new(game.Players.LocalPlayer) -- Calling the module
local WaitTime = 3 -- Seconds

Module:play(WaitTime) -- Play the animation

[/Details]

[Details =“API”]

:play(waitTime: number)

return nil

local Module = 
require(game.ReplicatedStorage.CircularTransition).new(game.Players.LocalPlayer) -- Calling the module
local WaitTime = 3 -- Seconds

Modudle:play(WaitTime) -- Play the animation

.getScreenGui()

return ScreenGUI

local Module = 
require(game.ReplicatedStorage.CircularTransition).new(game.Players.LocalPlayer) -- Calling the module

Modudle.getScreenGui() -- Returns transition ScreenGUI

[/Details]

[details = "1.0 - September 17, 2022 "]

1. Launch
2. Bug Fixes
   [/details]

FEEDBACK

Please reply to this post, it would help me a lot. You can comment on my work, or I need to fix any bugs, or even just want help. I will be updating the module.

Thanks for reading and hope this helped !!!

[commitblue]

Could you open this on github so we can read the code on mobile?

[IT1024 (YEETYSON)]

YOO this is exactly what i needed thanks

[Ashp116]

Yea I will add that once I get the time, sorry abt that.

[Ashp116]

Yea, I was in your shoes for many months.

[Casual_Luke (McLovins)]

Thank you, I was questioning how to correctly achieve this.

[RubenHgamer (ItsRubenX)]

Warp pipe sound plays Very cool resource. Thank you!

[Ashp116]

Cool idea, just need to find sfx now

[ScriptedHed (hed)]

It seems like you wrote your code in roblox-ts, do you mind uploading it as an NPM package?

[Ashp116]

Oh no lol, I just used the roblox-ts playground to generate the lua class script, but now that u mentioned I will try to work on uploading an NPM package for this.

[Amanuel001]

Thank you so much, was looking for a script just like this!

[TheRealBloxikGames (BloxikGames)]

I made a better version (personally I think it’s better). Change the image to “rbxassetid://72813522573875” and add a UIStroke with the size to 999999.

Now all you have to do if make a function which scaled is to UDim.new(0.0008, 0, 0.0008, 0) in and UDim.new(3, 0, 3, 0) out.

[TwoBrakeRBX (TwoBrake)]

Very smart method of doing this simply.

[Lord_BradyRocks]

Hi, where do you add the UIStroke to in Explorer?

@TwoBrakeRBX

[TwoBrakeRBX (TwoBrake)]

I don’t understand what you’re trying to do with this structure, but you can check out how I have set up my transition screen with the following file:

circle_transition.rbxm (4.3 KB)

[Ashp116]

Yeah, I have seen this new method. I made this quite a long time ago, and decided to make it public quite some time after I made it. From what I have seen, the UI stroke method seems to work better.

[Lord_BradyRocks]

Hi,

Can you share an example model of this set up? Thanks