Godot Tutorial - How to make Sword Slash Effect using Visual Shader - 3 different versions

 
In this tutorial we will create a slash effect or sword swing with Visual Shader.
Works on GLES3 and GLES2.

There are 3 different versions
 

We will first make this one.

  

So I have a sword scene with animation, for the sword you can make it yourself.

 

Add MeshInstance node (under the Sword) and create a Plane, the size depends on your sword, here the size is 7 by 7

Add MeshInstance Node then set the size of the plane to 7x7

Move and adjust the plane position

 

Then on the material click New Shader then click New Visual Shader.

 

Change the cull mode to disabled.

Let's start with noise, add Texture then make NoiseTexture, change the resolution to 657 x 657

Then add GradientTexture then add a ColorOp node (Overlay)

Now add the Round node then connect to Alpha

Then rotate the plane 90 degrees.

Now it's time to animate.

Add UV node then add Vector Add node and VectorUniform

Name VectorUniform to “Offset”

Then set X to -1 then click the key button

Set it to 0 (at second 2) and click the key button again

Hmm maybe we can make it a little better by changing the gradient.

Now it's time to change the color. Add Multiply and ColorConstant node then change the color to orange.

Then connect to Albedo and Emission to make it look bright.

Now we will make the mesh slash to make it look curved

Make it like this
 

Unwrap the UV like this

Then rotate 180 degrees

Then subdivide and apply

Then export to gltf 2.0

Then drag it to SceneTree then delete other useless nodes

Then copy the material

Then paste to our slash mesh
 
Duplicate these nodes then rename “offset2” to “gradient_offset” then connect.

Animate gradient_offset, at second 0.4, set x to -1  and click the key button

Then set it to 0 at second 0.6 and 0.7.

Change the Loop Wrap Mode to "Clamp Loop Interp".

Now we will make the dissolve effect.

Add VectorUniform, name it "Dissolve", then add Multiply, then connect.

Then at 0.8 set it to 1,1,1 then press the key button

and at 1.3 set it to 0.0,0, and finish.

Change the Loop Wrap Mode to "Clamp Loop Interp".


Second version

Simple, just delete dissolve and multiply then connect

Go to 1 then set the gradient_offset.x to 0 then click the key button.

Third version

Most sword slash effects in games like this, to make it click new shadermaterial

change the cull mode to disabled

Go to 1, then remove slashmesh from the parent

Now our slashmesh is not moving. Modify our sword animation

Add gradient texture

then make the gradient full white

then add black

and make sure this point is at the very edge

Add to the left too

Add Vector Add and UV and VectorUniform then name it “offset”

Connect RGB to Alpha

Why RGB to Alpha? Because the darker the color means the more transparent.

Go to 0.5 and set the offset.x to 1

and at 0.6 set it to 0.75

and at 0.7 set it to -0.1

and at second 1 set it to -1

Change the Loop Wrap Mode to "Clamp Loop Interp".
 
Now just add the texture.

Finally, this tutorial is complete. Yeah you can make your own version and maybe it's better than mine.

See you later

Video tutorial
GitHub