I would to add a visual motion effect for when my characters slash a weapon in my game (like a sword).
The motion is a perfect circle around the character.

Here's an example : http://www.consoles-emulators.com/wp-content/uploads/2006/12/god-of-war-20050318074311125.jpg of course my game is in 2D

How would I go about generating that ?

- Multiple images of the full animation
- Render rotated circle slices following the weapon
- ?

Probably through the use of bezier curves and some sort of list to link them together.

There are several ways to come up with what you want. What I would do is go with the "Render rotated circle slices" technique Draw a circle with a gradient along the circumference black-to-white. Set that as the alpha channel.

To draw it just do a BlitRotated (I believe you're using OpenLayer) around the center coordinate and increment the roatation so it aligns with the swipe of the weapon.

Think about what the slash effect represents. It represents the movement of the blade, and the movement must be VERY fast to leave such a trail. (At least, if you want it to look good.)

So your animation should have no frames between sword preparing to slash and sword actually slashed. In the frame where the sword has slashed you show the wave of energy which encompasses the entire area the blade of the sword has moved through.

If you make it take two frames to generate the wave instead of one, it should also optimally take two frames for the wave to disappear. Three or more frames, unless you're animating these frames REALLY fast, would be a bit much and might look to slow.

Now, you say the motion is a perfect circle. If by that you mean a "full" circle, then aesthetically the effect you're looking for depends on how quickly you want the attack to occur. If the attack is instant (all sides at the same time) then again, you simply cover the area the blade will travel through with a wave effect. If the attack takes say, 0.5 seconds to execute, and uses 10 frames of animation, well, then you need a trail, not an afterimage, and the example you provided doesn't suit your purposes.

To render the effect, just use your favourite paint program's smudge-style functions to push the blade into a wave like pattern, or draw one in with the energy colour of your choice. I wouldn't render it on the fly mid-game, that would probably look ugly.

--- Kris Asick (Gemini)
--- http://www.pixelships.com

Hmm. I would probably store the two points (top and bottom of the "effect"-part of the sword) in a list (well, a deque probably), interpolate with bezier (to get a nice number of points) and render them as a quad. If the effect should be used for the full weapon, you could just use a triangle fan with the characters hand (or whatever) as the center point (though that would probably look funky if the character moved).

If it was me I would just make a sheet that contains the frames of a slash animation, make it translucent, and then paper doll it on top of a character wielding a weapon. Of course doing it that way obviously means youll have to make and use different slash animations for different weapons.

sigh It's just a regular ribbon trail, from the looks of it. It's hardly a sophisticated technique.

paper doll?

It just means to overlay, but I guess in this case it doesn't really fit because it mainly has to do with overlaying graphics over a sprite to make it look like he/she is wearing different items, like a paper doll. Still it's a simple way of doing it, and it would work, but I'm sure it's not very efficient.

Please share your divine wisdom with us lowly peons

Actually, has anyone ever played Brain Lord? The animation for the weapon alone doesn't include any slash effect and is instead more "build in" to the sheet itself, which makes it look a lot more realistic in my opinion.

http://www.allegro.cc/files/attachment/592451

Guh, it's simple. When slashing, every X seconds, check where the edge of the blade begins and ends (two points). Add these points to the end of the ribbon trail. Fade existing points over time and delete them when completely faded. Then it's just a matter of drawing regular quads, varying colors over the course of the trail.

I probably would have done it very similarly to X-G, but you could also go with a more particle-ish system. I think it works better for 2D games (but not very well for 3D). Every x frames, push a new particle onto the related emitter that has the same sprite as your weapon, and maybe colorize it blue or white with additive blending to give the blade a nice ghostly appearance. Each "particle" should fade pretty quickly, otherwise it would look very strange.

if you take a look at this video from castlevania POR:
clicky
you can see that it's all pre-rendered with no flashy effects and does the sword effect justice.
You can also produce a nice particle system for your sword, but for 2D it'll get complicated real quick, much like this 3D one:
clicky

Thanks for the comments.

I'm aware of all that, it's just that I wonder what technique to use to actually draw that slice of circle...

About the old game and Castlevania, I dont like those effects :/

I know how to check for the blade movement over time... but the ribbon effect you're talking about, I've never heard of it. Care to explain what it's about ?

http://www.allegro.cc/files/attachment/592452

Forgive my ignorance of texture mapping, but how does one stretch a texture across it?

I agree this sort of thing would be easy; what stumps me is the 2D trailing particle effects ....

{"name":"12.jpg","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/7\/578892ec738f0771f1d90ecbe50a9b38.jpg","w":640,"h":480,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/7\/578892ec738f0771f1d90ecbe50a9b38"}

To do it that well you almost certainly want hardware acceleration. Each sprite leaving a trail keeps a list of coordinates and angles the sprite has moved through, then quads are drawn between each pair of points so that their width is perpendicular at each side to the angle the sprite was at when it passed through them.

...which is a lot easier to say than do, but that's how you do it. Kinda like the snakes in Nibbles style games.

Or another, less accurate, but easier method that doesn't require acceleration is to drop sprites behind the sprite leaving the trail at timed intervals, which then forms the trail.

--- Kris Asick (Gemini)
--- http://www.pixelships.com

23, what's so unusual about those trails? They just look like the same stuff I've already mentioned.

An emitter particle and normal particles which have a certain lifespan then fade out dramatically at the end?

That would be a waste, and won't give you a smooth trail unless you use thousands of particles.

True!

Thanks X-G, that's a nice picture. Im still wondering how to do the actual draw though I don't use quads, just the upper level draw sprites methods...

Bitmap.BlitDistorted oslt?

The effect in X-G's nice little sword diagram can be achieved by using two triangles to draw each rectangle*.
A bit stupid, but it works and looks nicely in a small test I did.

EDIT: apparently, rectangle isn't the correct word here, but English is not my native language. My dictionary suggests: quadrangular or quadrangle, I'm guessing "quad" is what I should have used

Not stupid at all. In fact, the best way to render the trail would be a tristrip.