#Gamedev Tutorials

Creating a Diablo-like Visual Effect

How to make a beam particle like the ones used by cultists


Share
FavoriteLoadingAdd to favorites

Hello and welcome!

I'm Rogério Pacini, founder and lead developer at Bravery Software. In this article, we are going to take a look at how we can create a Diablo-like visual effect, focusing in a beam particle like the cultists uses when draining life from the heroes.

Let's get started!

Basic Assets

For this tutorial, you will need:

  • Unreal Engine 4.21 (latest version).
  • Willpower!

Setting Up Unreal Engine

Create a new blank project, for desktop and consoles with maximum quality.

There's no need to add any starter content, so you can just skip these if you like.

Let's add two folders, one for the materials and one for the particles that we're gonna be creating.

Right click on Content, then select "New Folder".

 

It's important that when working in a professional environment we keep folders organized and uses proper naming conventions, as you will see.

Select the "Floor" mesh on the World Outliner and increse X and Y size to 4.

Select the "Light Source" and change its mobility to "Movable", that way we can skip building lights on this simple level.

Setting Up Materials

 

Alright! Time for some action!

Select the folder "Materials" and right click>New Material.

Name this material as "MAT_Beam". Remember to keep the prefix "MAT_" for materials, that way when coming back or working with more people you or your colleague will know right away what this is.

Double left click on the new material and let's add some nodes!

If you're new to unreal and how it works, I highly recommend that you check the Unreal Engine Materials compendium: https://docs.unrealengine.com/en-us/Engine/Rendering/Materials

Firstly, let's tweak the material properties.

At the detail section, set the "Blend Mode" from "Opaque" to "Translucent" and set the "Shading Model" to "Unlit".

Now let's add our first node, a texture coordinate!

Right-click on the grid and type "Texture Coordinate", as you type you will see that it will appear as an option, left click on it.

We can use a "Component Mask" to use only the Green channel, which will provide us a base texture.

Right click on the grid, type "Component Mask" and left click on it.

With the mask node selected, go into the details section and uncheck the "R" option, leaving only the green channel on.

Connect the "Texture Coordinate" to the "Component Mask", you can click on the little arrow on each node to check what is going on.

Now, add a "Sine" node, using the same right click on the grid and typing its name.

Connect the "Component Mask" on the sine node, you will see that we're getting closer to the base that we want.

To make it fill the entire UV, add a "Multiply" node before the "Sine" operation.

You will connect the "Component Mask" result to the "A" option on the multiply, and will set the "B" value to "0.5" at the details section.

Now, to add a better control over the effect, let's add a "Power" node. In the details section of the "Power" node, set the "Const Exponent" to 3.

To be able to change the beam color during its life, let's add a "Particle Color" node.

Add two "Multiply" nodes and set it up as the following.

Now that we have the base ready, let's add some details!

Let's create a noise on Photoshop. Start a new document, 64x64 pixels.

Click on Filter>Render>Clouds, then go to Image>Adjustments>Levels and tweak it to something like the image below.

Now, save it as T_Clouds_Render, set it as a Targa 24 bit format.

At the engine, create a new folder called "Textures", drag and drop the texture from the folder where you saved it to the folder you just created on the engine.

Now, back to the material, right click on the grid and add a "TextureSample".

If you had your texture selected on the content editor, you will have it ready to use, if not, go to the details section and find your texture.

Now, add a "Panner" node, this will make the texture move on X or Y axis. Set the Speed X value to 3 and Y value to 1, we can later tweak it if needed.

Connect the "Panner" node to the UV entry on the "TextureSample", if you turned live preview option ON on the material editor, you should see what we're doing.

Now, let's add this effect to our base, to do so, add a "Multiply" node and hook it up as the image below.

We got our material ready! Let's proceed to exposing it's values, that way we can edit it in run time!

Exposing Material Values

Exposing values are a great tool to tweak your material while in run time, making it faster to reach the desirable effect.

Let's add a "Constant" node, you can right click and type it or just hold the number 1 and left click on the grid.

Right click on this "Constant" node, and select "Convert to Parameter". Set its name to "Beam_Thickness" and its group to "Beam", connect it to the "Exp" entry on the "Power" node. Set the default value to 3 as we previously set.

Add a "Constant 2 Vector" node, you can right click and type it or just hold the number 2 and left click on the grid.

Convert this new vector node into a parameter, set its name to "PannerSpeed" and set the default values to 3 on R and 1 on G, leave the rest as 0.

As you noticed, when we converted it to a parameter, it turned out into a "Vector Parameter". Vector parameters are composed of 4 channels, RGB and Alpha, which means that we have extra 2 channels that we're not using.

To fix this, let's add a "Component Mask", hook the new vector parameter on it and then hook the component mask on the "Speed" entry on the "Panner" node.

Check the images and set them properly.

Now that we have our values exposed, let's comment it out so we know what does what, to do so, select the Beam setup and press "C" on your keyboard, name it "Base Beam", do the same process on the noise detail we created, name it "Moving Details". You should have something like this.

Now let's proceed to our particle system!

Creating a Particle

Go to your "Particle" folder and create a new particle system by right-clicking on the empty space in your content browser, then select "Particle System". Name it "P_Beam".

In your "Materials" folder, right click on the material we created and select "Create a Material Instance", leave its name as it is.

We're gonna use the Material Instance to edit it during run time.

Now, on the Particle System, let's add a Beam Type data. To do so, double click on your "P_Beam" particle and open the Cascade editor.

Right click on the emitter properties, and select "Type Data">"New Beam Data".

 

Now, we need to add a source and a target module. That way we set where this beam starts and where it ends.

To do so, right-click on your emitter, go to "Beam" and add a "Source" and a "Target" node.

Let's set the source value and target value now.

Click on the "Source" module and in the details section, keep expanding the "Source" menu until you find the constant distribution value, then set it to X=-256, Y=0 and Z=0.

Do the same on the "Target" module, but set the X value to 256.

To check how it is, click on the "Required" module and in material, set our "MAT_Beam_Inst".

Now click on the "Beam" module and set the speed to 0.

It's starting to look like an actual beam!

Let's now customize our beam, in the next section, we're going to take a look on the other modules to get a closer look to what we want.

Customizing

Let's add a "Initial Color" module, by right clicking, "Color">"Initial Color".

To make it work, select the "Color Over Life" node and delete it, you can try it later if you want to add a color transition during the particle lifetime.

Set the "Initial Color" like the image below.

Set the "Initial Size" to constant, X=32, Y=32 and Z=32.

Now, let's add a beam "Noise" module, to do so, right click on the modules space and select "Beam">"Noise".

Select the "Noise" module by left clicking on it, then at the details section expand the "Noise Range" section until you see the distribution method, then set it to "Vector Uniform".

Set the values like the image below.

To see it better, place in in the world by left clicking and dragging it to the viewport.

You can increase the distance of the beam by increasing the "Source" and "Target" distance.

You can further tweak it by changing the values on the material instance, try it!

At the end, your particle should look like this.

You can go further with the texture and the "Source", "Target" and "Noise" values to reach the desired effect, also, you can create additional effects to make it more convincing and closer to the original.

Final Considerations

To reach out a complex and detailed visual effect, you will need to further detail the noise texture, use grey packing to fit more textures on the same file, that way, R is one grey map, G another one, B another one and Alpha can be another one as well.

Adding more texture details on the material can create a robust particle, try it out!

A nice touch to add is a cast and hit effect, that way you can cover the detail a little further.

You can find and download this effect here.

Tags
#tutorial gamedev Unreal Engine #developer game development coding diablo fx effects visual effect

Rogério Pacini

Game developer with technical knowledge and 3D modeler.Experienced with the entire development process passing through Autodesk Maya, Adobe Photoshop and After Effects, Allegorithmic Substance Designer and Painter, Nevigo Articy Draft, Pixologic Zbrush and Epic Games UDK and Unreal Engine 4.Currently working as an independent developer and also interested on new technologies and softwares related to the game development scene.Official Microsoft Xbox One, Nintendo Switch and Sony PlayStation 4 developer.

Leave a Reply

Your email address will not be published.

Back to top button
feedback_mix.png