Circular Transition Screen

Resources Community Resources
, , ,
#1

Info
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! :smile:

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

Example Video:

Setup

  1. Download the Circular Transition Module
    2.1 Place in Replicated Storage
  2. You can paste this Example Code in the LocalScript for test
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

API

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

Updates

1.0 - September 17, 2022
  1. Launch
  2. Bug Fixes

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 :slight_smile: and hope this helped !!!

81 Likes
Ashp116 | Advanced Scripter
Circle transition from button position
Bloxville Game Credits
(RichText Dialogue System) Créme Engine: Modern Platformer Engine
#3

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

4 Likes
#4

YOO this is exactly what i needed thanks

2 Likes
#5

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

1 Like
#6

Yea, I was in your shoes for many months.

3 Likes
#7

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

1 Like
#8

Warp pipe sound plays Very cool resource. Thank you!

1 Like
#9

Cool idea, just need to find sfx now :thinking:

1 Like
#10

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

#11

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.

1 Like
#12

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

1 Like
#13

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.

1 Like