GoDot – Visual Shader – 2D – Weapon Slash

In order to make a 2D weapon attack more immerse, a slash shader might come in pretty handy. The used weapon image can be found on itch.io; and the haze has been made in Aseprite within 10 seconds. Feel free to use it as well within your project.

Spoiler alert: If you aren’t interested in shader development or you simply wanting to use this effect straight away, feel free to skip the tutorial and download the visual shader straight away.

Project Setup

Our hierarchy exists of two nodes: The weapon sprite itself, and the slash effect. Assign to each sprite its corresponding 2D texture. (Sample textures available above)

Pre-Configure the slash till it fits your needs. (Rotation, Transform, Scalation,..) Ensure to check “Show behind Parent” to avoid an overlapping slash texture. Create a new ShaderMaterial and assign a new “Visual Shader”. In this tutorial we call it “Slash_demo”.

Click on the Slash_demo.tres to open up the visual shader editor.

Visual Shader

As a step by step, drag n’ drop, screenshot by screenshot tutorial wouldn’t make much sense, we will consider several building blocks and explain the details.

Noise Texture + Gradient Texture

Add a Noise Texture and a Gradient Texture. (Right click -> Textures -> Functions -> Texture. Select the [empty] combobox and select the corresponding texture type) By left clicking the noise and gradient texture (See image below) the pre-configured texture’s parameters are adjustable.

Open up the texture’s details by a left click

Within the Noise Texture’s parameters, create a new OpenSimplexNoise. Parameters (such as Seed, Octaves, Period,…) aren’t important yet, as the result won’t be visible within the GoDot editor yet.

Combining the Noise and Gradient Texture

This first building block combines the Noise and the Gradient Texture into one alpha value.

Noise Texture: Delivers a value between [0…1], which we will use as our alpha value
Gradient Texture: Delivers also a value between [0…1], which we will use to fade out the noise texture

Some sub-building blocks have been highlighted by numbers, as they might need more explanation.

  1. A Uniform represents a variable we can set via code. By multiplying a vector3 (Disolve) with the noise’s rgb output, we are able to control each individual UV’s transparency. Hence, it is controllable via script/animation on “how much” of the noise texture we want to render.
Fading the “Disolve” variable from (1/1/1) to (0/0/0)

2. This sub-building block overlays the noise and gradient texture
3. This sub-building block takes our slash texture (configured in Project Setup) and multiplies the UV’s rgb value with the combined noise+gradient texture. Or simply spoken, alpha pixels within our slash image won’t be overwritten by the combined noise+gradient texture.
4. The final Color origins from an external parameter. Thus, we are able to define individual slash colors.

At this point the shader is complete and ready for use. Go back to the gradient and noise texture parameters and play with the values, as long as you aren’t satisfied.

Apply additional parameters

Simple is boring, so we could add some more parameters to the equation. Such as: rotation and an offset. UV rotation is achievable by following shader code:

vec2 rotateUV(vec2 uv, float rot, vec2 mid)
 {
     return vec2(
       cos(rot) * (uv.x - mid.x) + sin(rot) * (uv.y - mid.y) + mid.x,
       cos(rot) * (uv.y - mid.y) - sin(rot) * (uv.x - mid.x) + mid.y
     );
 }

Soooo, how does this simple function look like within a visual shader you might ask? Here is the answer:

Shader usage

Once you did finish the tutorial (with or without the rotation thingy) don’t forget to hit save, as the GoDot Editor won’t store your temp visual shader on your HDD, as long as you didn’t hit that button.

To animate your slash shader, several options are available. The AnimationPlayer is capable of manipulating properties of nodes (including shader parameters) and therefore perfectly applicable for your needs. If you require further explanations on how to set up an AnimationPlayer, check out this video. (Made by GDQuest) Another options comprises manual coding. You can set shader parameters also within the code. The tween functionality might come in handy in this case.

0 0 vote
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments