How to create this kind of effect

Help and Feedback Scripting Support
#1

At some point during this video (0:14), there is supposedly an orange circle in the middle which has an animation. How can I do this into Roblox?

1 Like
#2

could you give me more context here? is this a view of a part, is it a view or a world?

#3

To clarify you want a loading circle like this?:
image

#4

thats not a loading circle, from what i see you get close enough on the VGC to make it do that

#5

? Why its not a loading circle? Its showing a loding progress on “pie style cut”
OP said they want to build the orange circle at 0:14, thats what I see

#6

my mistake, i mostly know loading circles are non controllable guis frames, in other words, you cant rlly control it you just wait for it to load and fully process what its doing

#7

Any loading bar/cirlce style, you have total control over it, depends on the approach you just feed it with the amount of the “loaded stuff” you are listening, to properly increase the bar, in this case a circle.

@SomeFedoraGuy Im thinking on how to achieve it by just using Frames, Canvas and Gradient transparency, but honestly, I dont think thats possible to make it animate like that by only using Frames, I think your best bet could be creating the textures on a external software like Photoshop and use them as sprites to Tween them, so it looks like loading

#8

@Dev_Peashie, @ProgrammerNovice, yes, I did refer to that loading circle.

I don’t even know how this would be formatted in the explorer, so any reply is appreciated.

I was thinking I couldake it with a CylinderHandleAdornment and have a SurfaceGui on top of the Adornment, but I’m trying to keep things in the same Frame, 2D. I suppose it’s not possible?

#9

What you are trying to achieve if you do that (using the CylinderHandleAdornment), would be similar to 3d GUIs. Which is a physical part that changes its position on a RenderStep, positioning the part in the middle of the player’s screen.
You could try it, but honestly I think would be too much effort to achieve only a circle that loads, the most common approach would be creating a series of textures progressing and Tween them or loop them.

You could go with the 3d GUIs, its fun and looks cool, check this example:

#11

I am already using a SurfaceGui. Take it as a Computer screen.

#12

Yup, I know, I mean, if you want to use the CylinderHandleAdornment, you should go for a 3d gui, instead of the ScreenGui.

If you want to keep using the SurfaceGui, then you should create the images on Photoshop or something similar to tween them to create the loading animation.

#13

There’s no ScreenGui involved. What I showed in the video is a representation of what i want to make.

Seems kinda hard (and stupid) to make 100 images for the circle animating, right? Isn’t there a way to make this how the ProximityPrompt circle is done?

#14

AFAIK, You have two options:

  • Easy method. Use a spreadsheet. This will not be very smooth, and you will have a limited resolution available.

  • Hard method. Make two half circle images and tween-rotate them inside their own frames with ClipsDescendants property enabled. Those halves should have the size of full circle, so that the image is turning around the circle middle point. Clipping frames should be set so that they either show full image, or hide it completely. Once one image finishes turn, quickly switch to the other half. If you set up Clipping frames properly you will achieve the desired effect. I did something like this in Crazy Stairs for the ultimate cooldown. Tricky, but possible.

Edit:
Now that I think of it, I remember that I could not do it with rotated frames, as rotated frames do not clip descendants. I checked my code an I realised I have used black “mask” half circles that are shown on top of actual circles. Downside is that the circle cannot be transparent. Sorry about this.

#15

Nope, sorry, I meant the SurfaceGui, my mistake I was distracted. I dont know if its static or not, thats why I mention the 3d gui.

Its easy to create the textures and make photoshop to give you the progress images, it looks cool, images are widely used as guis, and could work for custom loading bars

#16

It is static.

Seems the easy method for me. Making a spritesheet seems harder. Thanks, @Dev_Peashie !

1 Like
#17

I have edited my answer. Sorry my memory sometimes fail me.

1 Like
#18

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.