Trail effect with emitter?

Audio and Graphics
#1

Hi 

I would like to put a trail effect like this(0:18-0:28):

https://www.youtube.com/watch?time_continue=2&v=HgKDW3BC7zQ

I was thinking of using the emitters but I can not emulate it

someone with more experience can help me?

#2

I would do that with a series of display objects.  The problem I foresee is that the object is moving fast, so making a trail of discrete objects will  have gaps.

Here is an old game I never finished and you can see the idea:

https://www.youtube.com/watch?v=hGvJpqkhA2k&feature=youtu.be

Here are some old samples I made to answer other other questions.  They use the same principle for trails, but expressed differently.  Nonetheless, the concept is the same.

Finally, if you can’t work this out, I could extract the trail code from the video example as a level-1 hit.

PS - I do think you could also make an emitter do this too.  I’ll consider it a bit more and if something pop into my head I’ll post it.

Do you have an emitter editor so you can experiment?

#3

Thanks for the support!

I can only see one of the two sample codes(1 link don’t work) and it is not very useful…

“Do you have an emitter editor so you can experiment?”

Yes I have an editor but I can not remove the termoli from the emitters.

In any case, in the video I see a good example even if time that what I had in mind is even more complex

I did not know about hitman. I will consider it if I can not do it within a short time.

#4

Doing tests with enterFrame function and/or emitter, the problem is mainly due to the speed of the ball.

I think I will have to completely change the approach to get a decent solution

#5
  1. link fixed

2.  Yes, the speed of the ball will be the biggest issue.

#6

Hey this is a really interesting topic and if anyone is reading and has ideas on making nice trails, please pitch in.

This is a pretty common requirement and I know I always belabor how to best handle it (depending on the game).

Again, got an idea?  Please share.

#7

I have an idea and it’s hours that I try but I can not, I think with your experience and my idea we could succeed.

Doing a normal trail (with enterFrame function) everything works fine as long as the speed is not high.

So my idea is: whenever I enter into enterFrame to make a “copy” of the object, instead of just making a copy in the last position of the object, why not make a copy for each position between the last copy and the current position of the object?

I do not know if this is too expensive but it could work. A bit like when in drawing app. If the user drags too fast and leaves holes, we ring them.

edit : thanks to fix link

#8

Yes, I’ve used this technique before (fixed intervals along the line from last position to current position). 

The trick/challenge is initial trail object size and shrink time.

When you produce one object per frame, then you can use transition.to() to shrink the object over a fixed time.  This gives a nice smooth effect.

If you create multiple objects in a frame for a contiguous trail, you need to modify the:

  • start size of the objects further back along the trail
  • time to shrink for the earlier objects

Otherwise, the trail will be chunky in places.

#9

Such effect is in fact a relatively complexe thing to do which requires you to draw your trail vertex per vertex. Fortunately Corona sdk allows you to do that, but I’m warning you, it’s not straight forward. You’ll have to deal with some 2D mathematics, and experiment the display.newMesh method. But it’s worth the effort, especially regarding of performances.

#10

Well I do not think I can do all of this alone.

I thought it was easier and that corona had a solution ready as others plataforms.

however I really need this effect so I have to find a solution…

#11

This is the easiest way…

On each frame create a clone of your ball and the same x,y and position it below your actual ball  Then simply transition it with something like

transition.to(ballCopy, {time=500, alpha=0, xScale=0.01, yScale=0.01, onComplete=function(target)  display.remove(target)   target = nil end})

You can vary the length of the trail by simply changing the time of the transition.

#12

@SGS

Yhis is what I do when I open the topic…

the problem is when the ball goes fast

The traileffect disappears and there are only ball distant from each other

#13

Just fix a minimal distance of void between your two balls and make a loop between the position of your ball in the previous frame and the position of your ball in your current frame.

For example, you want 3 pixels of void between your ball copies. If your ball position.x was 0 on the previous frame and your new ball position.x is 12, just iterate between 0 and 12 with a step of 3 and create a new copy each iteration. Here you will make 4 copies per frame at x = 0, 3, 6, 9.

But once again, using particles to draw this fx can be performance heavy.

#14

Based on your OP video and if you ran at 60fps this shouldn’t be a problem with a bit of interpolation.  I use trails at 30fps using this method.

#15

alternatively, imagine a “snake” game, where you’re recording a history of positions.  but rather than render circles, consider them as vertices of a line, then extrude that line to create a mesh – calc the delta to next position, take its perp to get a normal, extrude outward, probably decaying by age to get a “taper”, for both sides, stitch it all up into a mesh.   (if you want to get “fancy” you could interpolate f.e.  catmull-clark across the extruded edge points) set the uv’s to index into a texture that fades towards tail.  done right it’ll resemble a fruit ninja -style trail.

#16

@davebollinger explained the expert way of doing it.

By the way dave, do you know how to get rid of this situation which causes artifact in the trail:

https://imgur.com/0i8Rr0i

As you can see there can be superposed vertices when you extrude the spline if your ball direction varies a lot suddenly. Will catmull-clark remove them?

#17

@david.ciaudo - if your curve is smooth (like OP’s, presumably) then this method is adequate.   if not, then you’ll have to smooth it somehow. (unless such “crease” artifacts are tolerable)

the simplest approach is just to “chamfer” such vertices - think of it as turning “v”'s into “u”'s.  at each vertex you back off a little and create two vertices where there was only one. 

the distance you choose to chamfer at (or not chamfer at all) can be adjusted based on the sharpness of the angle.  (as only very acute angles need fixing)

one step “better” than that is to add yet a third midpoint vertex, halfway between the midpoint of the “u”'s base, and “v”'s tip.  (so each vertex becomes three, like a “u” but with it’s base deformed into a “shallow v”)

next step better - recurse that for a second pass, if any of your “u”'s are still sharp enough to look like “v”'s.

…or fit a spline.

no matter how you smooth the trade-off will be vs positional accuracy.  (the full solution involves creating proper rounded “buffers”, rather than simple extrusion, but it’s quite a bit more involved)

#18

Yes the trade-off vs positionnal accuracy is annoying. I wish I can I find a paper about this proper rounded “buffers” solution, just for curiosity.

#19

think of “balls” at each vertex, connected at their tangents by “tubes” (ie a quad - a rect if radii same, else trapezoid) in between

visually equiv to layering a “black line” of stroke width “radius” under a white line of stroke width “radius-2”  (like within a vector illustration program where you can get nice rounded corner joins)

computationally, there are two general approaches:  literally ball-and-tube, then do a merge.  (requires you have good 2d compgeom support for merge), or incrementally “trace” around those outer curves at each ball for only the segment between the tangents, inner join won’t have a curve, you’ll be creating “fan” geometry, then connect up all tube edges to ball slices.

if doing this on desktop, maybe look for a binding to “clipper” library (which can do this offset operation with either square/miter/round joints)  but if need a pure-Lua solution for mobile, i’m not aware of a general-purpose one.

#20

@david.ciaudo Off the top of my head, there’s the offsetting paper here.

@Sig.g1 I’ve done a couple larger projects with trails (think Tron, with curves). I know these used some combination of Hermite and Catmull-Rom curves, but I forget the specifics… probably one to interpolate large-scale motion and the other to sculpt the shape of shorter segments in-shader.

A lot of that wound up, in updated form, here, here, and here, about half of it being different ways to smootly interpolate the curve. I should probably package it all up at some point.

Also, lots of good curve info here.