How to code a sword swipe?

Game Mechanics
#1

Hi everybody, I’m making a 2d fighting game and I’d like to make swipe effect when i attack with a sword like in this example :
http://image.noelshack.com/fichiers/2015/33/1439603685-swipeeffect.png

Swipes effect are used in many many games involving sword battles so I thought that this will be an easy task, but man I just don’t get how can I do this.

My only “solution” is to make the blade of the sword generate fadeing-out rectangles at it’s position every milliseconds but this is really costly, it makes the computer manage like one thousand entities just for the swipe.

Is there a general way of doing it?

#2

It’s not something I’ve done, but thinking about it, I would have an image containing the effect graphic, and only draw the part of that graphic that is necessary. This could also be accomplished via a fragment shader.

#3

Or just make the sword attack animation a sequence of images which contain the swipe gfx in it.

#4

Or just rotate the sword and have the vfx animation be a seperate graphic. There are many ways to do this, none of them are wrong unless you want them to function differently.

#5

@Archive : I don’t use sprites of sequences of images for my animations, I draw a static sword for example and I rotate it with code so that I have super-smooth animations

@bilznatch : Yeah I already had this idea of having a separate graphic for the swipe but what can I do with that

#6

Program a hitbox, program a rotation and render the swing vfx when you’re swinging. Nothing else to it. I don’t really see what you mean by “what can you do with that”. You can do whatever you want to happen in your own game, that’s what programming games is all about.

#7

Ok then have the sword rotate using code and have the swipe gfx (without the sword) be a sequence of sprites, it doesn’t have to be perfect because the player wont notice, you might need only 4-6 sprites.

#8

@bilznatch : I don’t know if I was clear enough but I’ll show you an example of what I call a perfect swipe effect : this
http://forum.unity3d.com/attachments/scsample_211-jpg.3356/

To make this effect, it’s not as easy as draw the vfx, and then when the character attacks it renders. No in this game the trail is created as the sword moves, its not just a static image, it shows the exact path the sword has, if the character moves the sword wierdly, then the swipe effect will be wierd, it’s dynamic creation.

@Archive : Yeah I’ll keep that in mind in case I really don’t find a solution :wink: I’m currently working on something that may resolve it but we’ll see :slight_smile:

#9

That game in the image you showed us is a 3D game correct?

#10

Yeah of course but imagine if it was more 2d.

Btw I’m close to my goal now I might have it!

#11

Okay great!

#12

You don’t say what API you’re using, so I guess you aren’t expecting code.

Regardless, the solution is to transform the polar coordinates of your arc to the Cartesian coordinates of the texture you want to map to it.

In Java2D you’d do this with a custom Paint/PaintContext.
If you look at the source for RadialGradientPaintContext, you’ll see roughly what the transformation involves.

:edit:

That said, if it’s for 2D, and the arc is always going to be the same, you really should make it part of your art assets - it’s far less complex to implement/maintain, and has the potential to look better too.

#13

My idea is to clip a texture using a polygon? Make a polygon with the following points.


1: 0,  0
2: w,  0
3: w, st
4: 0,  h

Where w and h are width and height, and st is the height of the sword tip. Then simply modify the polygon every frame, and render the texture with the clipping polygon.

I think this should work.

#14

Alright so my idea I had yesterday didn’t worked too well so I will try now with polygons, I’m not sure if I get how SHC’s polygon looks like so I will show you the idea I had :
http://image.noelshack.com/fichiers/2015/33/1439730817-swipeeffectpolygon.png

So this image shows 3 frames, the green poly is for the frame 2 and the blue is for the last frame, I’ll explain with the blue one.
The idea is that “A” points at the beginning of the blade, and “B” points the tip of the blade.

When the blade moves, I store the “A” and “B” values to “prevA” and “prevB” so I have the 2 points of the last frame, then I create a polygon with the current “A” and “B”.

Is that sounds right? And btw I’m using the Slick2D engine, it’s kind of like java2D :point:

#15

You almost got my idea, but the plotting of points is a little different. Let’s take for example this image as the sword effect:

The red lines are an approximation of the polygon that you will be using to clip the texture. This should work fine, and is a simple one too. Unfortunately, I haven’t worked with Slick2D so I have no idea how to render using that, but in general OpenGL, you get the texture coordinates by dividing the polygon vertices with the texture size.

#16

So stop me if I’m wrong, but the “w” and “h” is the width and height of the sword effect, and you draw only a chunk of this image depending on the rotation of the sword?

#17

Yes you are right. That is what I meant. Suppose the effect image is 64x64px, then the width and height are 64 and 64 respectively.

#18

And from the javadocs, it seems that there is already support for rendering a shape filled with texture in the Graphics class. Use this (click on code for javadocs)

[url=http://slick.ninjacave.com/javadoc/org/newdawn/slick/Graphics.html#texture(org.newdawn.slick.geom.Shape, org.newdawn.slick.Image)]


g.texture(swordPolygon, swordSwingTexture);

[/url]

Should simply work for you. Hope this helps.

#19

This was almost my idea yesterday and the problem is that ingame, the sword’s rotation is more complex because it is rotated by the player’s hand, the player’s forearm, and the player’s arm, and it also translate to follow the player’s body. So I think that every points of the polygon should only depends by the sword’s position.

That’s why I came with the idea above

#20

if you want a method which is a bit more sophisticated you could use a triangle strip, that way you could have trails for your sword which can be of various shapes depending on how the sword moves and type of swipe. A nice tutorial for this type of trail can be found here.