Always on top for trails!

Help and Feedback Scripting Support
,
#1

I am trying to make a mouse trail, something like super mario galaxy which you can find on youtube. It’s a blue trail that follows the cursor.

My issue is that I have tried many different methods, from creating image labels but they cause lag, but there is one solution I found which is to create physical trails and raycast it in front of the camera depending on the mouse. The main problem for writing this thread is because for physical trails there are no always on top property meaning, it can go through objects. Another problem is since its a physical trail, it take’s z axis in consideration. There are no ways to do this thing without either causing lag and terrible ui overlapping or without disabling features on trails.

Here is what it looks like so far: https://gyazo.com/74574c288b4b461b0b66923c41fa71d4

#2

Maybe you misspoke, but I don’t think raycasting (like as in workspace:Raycast() is necessary to place the part.

Only ScreenPointToRay would be necessary.

Also, UI elements shouldn’t be much slower than the Part-based method, if you’re using something like an object pool.

However, if you want to stick with 3D objects for some other reason:

  • there is no “render on top” property currently
  • you could use a ViewportFrame, but that might be slow
  • you could also just move the parts closer to the camera so they’re right up against its culling plane, but that’s not a perfect solution.
  • again, UI elements shouldn’t be that laggy - not sure what the problem was for you.
#3

Yea I am using ScreenPointToRay to make the part move in front of the camera. Also mind explaining to my peanut brain what is object pool, and how I would achieve something similar to this trail in ui without causing lag or overlapping?

#4

Also viewportframes does not render trails, and particles. If I move the part closer to the camer and make the trail little more skinnier, it becomes more blocky, instead of being smooth. Here is what it looks like when its closer which I dont want https://gyazo.com/83dd7e8ea2622a390a3071991bd930c6

#5

I see what you’re saying. I didn’t know that Trails were an actual object, my bad. I thought you were generating them yourself.

An object pool is just a collection of instances that you keep off-screen. Then, instead of creating a million new instances a second, you just re-use one of the objects in that pool. Instead of destroying an instance, you put it back in the pool. Here is an implementation from roblox, I guess. There are other (better?) ones on this forum, too.

As for the overlapping problem… there’s not a ton you can do. You can render arbitrary polygons on the GUI with some fancy placement and rotation of ImageLabels with right triangles in them, but that’s a pain and doesn’t always look great to boot, especially with transparency involved.

Just trying to give you options.

Personally what I would do is render it with a bunch of rotated Frames, with an object pool, and ignore the overlap. The next thing I’d try is that triangle-GUI-rendering. But you might do better some other way.

You could, for instance, generate them yourself - but then you’ll have the same overlapping (or custom triangle rendering) problems as with the GUI, so you might as well do the GUI.

1 Like
#6

Thanks for the help, just quick question though, if I use arbitary polyguns, it won’t be smooth unless I make like a lot of frames. Sorry I am on in 9th grade so I might not understand some of these term.

#7

Also forgot to mention how would I achieve the fading off at the end of trail if I use the method you are saying is that possible?

#8

I wouldn’t go straight for making polygons – it will probably look pretty good with just a bunch of straight frames.

Fading happens by changing the transparency from one trail segment to the next; this is probably the same way ROBLOX’s Trail works.

It looks a lot better than you’d imagine, honestly.

The first thing you should try to do is draw a rectangular Frame between two points. To help you along:

local point1 = Vector2.new(200, 200)
local point2 = Vector2.new(300, 250)

-- trig to find angle between them (will be the Rotation of the frame,
-- although you may need to wrap it in math.deg(...) and possibly make
-- it negative.)
local angle = math.atan2( (point2.Y-point1.Y) / (point2.X-point1.X) )

-- length between the two points (will be the X size of the Frame)
local dist = (point2 - point1).Magnitude

To position the Frame, just set its AnchorPoint to Vector2.new(0.5, 0.5) and its Position to the average between point1 and point2.

There are probably plenty of posts on the dev forum about this as well, but I’m perfectly willing to help as well.

#9

Can’t you just use a Beam instead and change the zOffset of the beam to math.huge

#10

Yea I tried with frames, I made them work and rotated, but the problems were like between the frames, I don’t know how to add or calculate the triangles.

#11

How would I make the same effect as the trail then? It can’t fade of I believe.

#12

I made this a few years ago. Dunno how bad the code is, but maybe it will be useful to you: https://www.roblox.com/library/485534304/2D-Triangles