[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

Last seen on 19:16, 13. Jul 2024
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
Last seen on 17:51, 21. Jul 2024
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

Last seen on 12:59, 20. Jul 2024
Joined May 2021
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • MCreator plugins:
  • Comments:
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!