[Tutorial] How to create arc shaped particle VFX for sword slashes and more (procedure file attached)

Started by MarshMilo on

Topic category: User side tutorials

Joined Jun 2023
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
[Tutorial] How to create arc shaped particle VFX for sword slashes and more (procedure file attached)
Tue, 07/09/2024 - 16:44 (edited)

Through a lot of algebra and trigonometry, I have created a pretty effective way to create particle VFX for sword slash arcs. The procedure attached has a lot of parameters that will allow you to create a plethora of different slashes; in this tutorial I will share the procedure file as well as detail the parameters within it and its applications.


Figure 1: The procedure itself

YOU CAN DOWNLOAD THIS PROCEDURE HERE -----> https://www.mediafire.com/file/r51yxi7guvv0kur/slashmaker.ptpl/file


INTRODUCTION:
I promise it's going to make sense

First, I'm going to explain the principles behind the parameters and what this thing can do, basically a rundown of how it works so you can have a better understanding of what is going on under the hood so that the rest of this tutorial becomes more readable.

When your character swings their weapon, it moves in an arc; this arc is part of a larger circle we can call your characters range of motion. Any swinging arc has to, in some way follow this range of motion so, if we find a way to plot this full range of motion, we can take segments out of that range of motion in order to plot a desired arc.

That part is simple enough, circles go from 0-360 degrees or 0-2pi radians. The hard part is when you want to make this arc 3 dimensional.


PART 1:
Spinning a ring

Imagine a ring spinning on a table viewed from the side. You might notice that, when viewed from the side, the height never changes, but the width symmetrically ebbs and flows as the ring rotates along it's center, appearing to go from a circle, then oval, and finally a flat line, only to repeat that process again. We can observe this viewed behavior in a shape called an ellipse which is basically a fancy oval.

https://www.desmos.com/calculator/wohhmidcyl

Even if you had no idea what an ellipse was, play around with the "a" slider and you would see what I mean.

That "a" slider controls the minor axis of the ellipse, allowing it to show the same ring behavior that we discussed before. Using the parametric equation for an ellipse (with a little more math to make its orientation relative to the player), the players look direction, and a desired size for the ring around the player we can create this spinning ring shape around the player, but we still need to give it depth as it will just look like this 2d projection of a spinning ring without actually interacting with a 3rd dimension.

In order to give its depth back, we can once again use that spinning ring behavior on the y-axis

https://www.desmos.com/calculator/eqb6rujo4x

In this case, the "a" slider controls the minor radius of this ellipse and "b" controls how large the ellipse is. This function basically uses an ellipse to map out the y levels that points need to be plotted as a function of the ring size and its rotation angle.

So, combining all of that, we can plot x, y, and z values! If it sounds complicated, it was, and if it sounds like I brushed over it, I did. I just wanted to highlight the method because I think it better contextualizes the parameters.


PART 2:
The parameters

There are a lot of parameters (as you can see) some of them are more straightforward than others, but honestly I think if you just play around with it for a bit you will understand what they do. You will have to have an existing knowledge of how radians work (albeit a pretty surface level one) in order to understand some of the stuff I'm saying, so if you don't know what a radian is at all good luck (you can still probably understand what's going on).

In the procedure file, the if=true at the beginning is just there so that you can collapse the whole thing when u place it into whatever procedure, set your parameters, and then minimize it by collapsing the if=true block so its not a huge chunk of blocks at the bottom of your procedure.

circleDistanceConstant: This is the radius of your ring.

rollAngle: This is the angle at which your ring will be "rolled" starting from the right side of the player.

horizontalOffsetMag: This is the magnitude of your horizontal offset.

horizontalOffsetDir: This is the direction of your horizontal offset in degrees with respect to the direction the player is facing. 0 is forward, 90 is east, etc.

verticalOffset: This is the vertical offset of the ring.

dMajor: Don't mess with this value unless you are good with ellipses! Modifiers to the major axis (axis parallel to the player look dir) go here.

d: Don't mess with this value unless you are good with ellipses! Modifiers to the minor axis go here.

i: This is the radian where your arc will start (the players look dir is 0). The arc will iterate clockwise assuming no changes to the roll value (if the ring gets flipped 180 then it will iterate counter clockwise). THIS VALUE HAS TO BE LESS THAN YOUR "radianArc" VALUE OR YOUR GAME WILL CRASH

radianArc: This is the radian where your arc will end. THIS VALUE HAS TO BE GREATER THAN YOUR "i" VALUE OR YOUR GAME WILL CRASH

radianSteps: This is the radian value for each step when the program will place a particle. A lower value means a higher resolution because it will take smaller steps along the desired arc.

*******EDIT: I finished this tutorial and then went to bed; when I woke up realized you can just put a "DEG to RAD" block into the input for the parameters and it will let you input degrees for all of the inputs that take radians. You just have to make sure a radian value gets put into the formula. Everything would work the exact same for the parameters (game still crashes if the bounds are incompatible) you would just be able to input degrees instead of radians for the parameter values.

The "spawn", "dx", "dy", "dz" parameters within the orange particle block can be used to add randomness/population to the arc.

Examples:


Figure 2: Arc drawn starting at 0 radians to 2pi (a full rotation)

 


Figure 3: Arc drawn starting at 0 radians to pi (half rotation) at a 45 degree angle

 


Figure 4: Obtuse "rollAngles" will cause the arc to iterate counter clockwise because the arc gets physically flipped. This arc starts at -pi/4 and goes to pi/2

 

If you get clever with it, you should be theoretically able to make any shape. For example, if you want to draw a straight line in front of the player, just make the "circleDistanceConstant" really big, make the arc small ("i"-"radianArc'"), and set the horizontal offset to be way behind the player to counteract the larger radius, you can make really big fanning arcs by overlapping multiple arcs in a clever way, and you could even make the arc it draws appear gradually to better sync with your animations by iterating it with a potion effect or other timer instead of the while loop its currently nested in. There are a lot of possibilities with this tool and it should also be update proof because I literally just used math to plot the points of the arc.

Edited by MarshMilo on Tue, 07/09/2024 - 16:44
Joined Dec 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Thanks a lot bro, that's…
Tue, 07/09/2024 - 07:37

Thanks a lot bro, that's awesome

thanks a lot for this…
Sun, 07/14/2024 - 20:13

thanks a lot for this tutorial, i was wondering how to do this! The tutorial is both detailed and beginner friendly!

Joined Mar 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
what does the file di
Mon, 07/29/2024 - 14:27

what does the file di

Joined Jun 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Very cool but it doesn't…
Mon, 08/12/2024 - 23:16

Very cool but it doesn't seem to change depending on where ur looking. For example, If I want my procedure to be like if I were to look up the slash would be more above the player using look angles. Is it possible to do that with this procedure? I have a procedure that does exactly this but your seems more customizable but missing this feature.

Joined Jun 2023
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Testermodss, unfortunately I…
Fri, 08/16/2024 - 04:32

Testermodss, unfortunately I would have to add another dimension of rotation to allow the arc to be translated when the player looks up or down which would be a lot more math.

I didn't look into it much because I needed these arcs to line up with playeranimator attack animations that don't really change when the player looks up and down.

If you are really good at working with trig/polar coordinates I would maybe be willing to collaborate at some point to create a procedure that allows for 3 degrees of rotation (roll, yaw, pitch), but unfortunately this 2D one was all I could feasibly create on my own.

Joined Jun 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
I was able to make a…
Fri, 08/16/2024 - 22:10

I was able to make a procedure that does this in a way simpler way while following the players look angles!! and it even adds distance to the slashes to make it more realistic. testslash (mediafire.com)

U can customize it to make it horizontal, vertical, and even diagonal which is what is showcased in this video.  

Joined Sep 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Im trying to use the…
Tue, 09/03/2024 - 19:30

Im trying to use the procedures posted here but I keep getting errors regarding enity and world, any info on what I should do about this?

Joined Jun 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
umm does this only happen…
Sat, 09/07/2024 - 04:47

umm does this only happen when u put this in?? Also make sure that u are using ur particles not ours this could be the cause of that. If that isnt the issue then put it on a button press or a item if u haven't tested this alr.

 

Joined Jul 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Testermodss Question how…
Sat, 09/07/2024 - 18:02

Testermodss Question how what numbers do i change to make it up and down

Joined Jun 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
many sslahs (mediafire.com)…
Sun, 09/08/2024 - 05:46

many sslahs (mediafire.com) Here ya go this is an improved version. In this it is going off a random chance to go vertical, diagonal, and horizontal. I left comments on which ones they are and what numbers u have to change. To go completely vertical, it was a bit different but not that much harder but, in the process, I discovered a better way to do slashes which i may or may not post here.

Joined Jul 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
sorry to ask again. would i…
Mon, 10/21/2024 - 21:06

sorry to ask again. would i change the distance of the slash. i change the distance variable but that did nothing

Joined Jun 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
So, what u need to do is…
Fri, 10/25/2024 - 02:15

So, what u need to do is mess with what's in the WHILE statements. The distance variable it what deals with distance but the way I have it set for this is that it sets it back to 1 as I have a while statement in it that basically says while distance is grater then 2 sent it to one. change the cap of the while so instead of 2 set it to like a higher number for both. So if u have the intial as like 5 instead of 1 set the cap to 6 or smt. Hope this helps.

Joined Apr 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Am I allowed to use your…
Wed, 10/30/2024 - 01:20

Am I allowed to use your procedure in my mod?

Joined Jun 2024
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
Go right ahead, I do not…
Wed, 10/30/2024 - 01:42

Go right ahead, I do not plan to gatekeep anything I make.