Published on

Creating a slashing effect [Unity / Mixamo / Trail Renderer]

Authors
  • Evelyn

Please share this article if you like!

Thank you for visiting the Evelyn GameDev Blog! In this article, I'll show you how to implement a slashing effect on a character and animation downloaded from Mixamo!

If you read this article to the end, you will be able to create the effect shown in the following image, so please read it to the end.

It is also explained in the video, so if you find any part of the blog post difficult to understand, please check the video as well.


Table of Contents

setup a character

First, you need to download the character data from Mixamo in the form of animation clips.

Create a new 3D project.

Next, follow the link below to visit Mixamo and log in.

Mixamo website url

Once you've logged in, click on the Character tab to bring up the character list.

Next, select the character who is holding the sword.

Switch to the Animation tab and click on the sword-wielding animation. The animation will then be applied to the character displayed on the right.

Download it to get the character's 3D data and animation clips; an FBX file will be saved, so save it to a location of your choice.

Drag and drop the FBX file you just downloaded into Unity and change the parameters from the Inspector.

Go to the Rig tab and change the Animation Type to humanoid.

Drag and drop the character's 3D data into the Sample Scene, and move the main camera closer to the character.

In addition, go to Materials and click the Extract Textures button.

This time, a dialog box to modify the Material appears, so click on the Fit it button.

Next, set up a background to make it look better. Download a free background asset called Blacksmith's Forge from the following URL.

Blacksmith's Forge | Asset Store Url

Once the Blacksmith's Forge import is complete, open the demo scene and copy all game objects except the main camera.

Open the Sample Scene and paste in the game objects that you just copied.

Select the pasted game objects and shift their positions so that the characters are inside the building.

When you bring up the game window, you will see that your character is safely inside the building.

create an effect

Now that the character and background setup is complete, it's time to create the slashing effect.

First, duplicate the animation clip that is contained in the 3D character data and name it Attack.

Select the duplicated Attack animation and place a checkmark on Loop time in the Inspector.

Create a new Animator Controller and drag and drop the Attack animation that you just duplicated.

Select a 3D character on the hierarchy and attach the Animator controller.

Create a Trail Renderer in the child element of the bone that corresponds to the position of the sword. Then, change the parameters as shown below.

Width Make the left side bigger and the right side smaller.
Time 0.2
Emitting off
Color The left side is light blue with an alpha value of 255, and the right side is white with an alpha value of 0.

Next, we will make sure that the Trail Renderer is only displayed when the sword is swung down in the animation.

Let's create a cSharp file.

Then change the contents of the script as follows.

SlashHandler.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SlashHandler : MonoBehaviour
{
    [SerializeField] TrailRenderer SlashTrail;

    public void ShowSlash()
    {
        SlashTrail.emitting = true;
    }

    public void HideSlash()
    {
        SlashTrail.emitting = false;
    }
}

Add the script you just created to the game object at the root of the 3D character, and assign Trail Renderer to the variable defined as SerializeField.

Bring up the animation window and add an event at the timing when the sword is raised. Select the ShowSlash method in the Inspector.

Add an event at the timing of the last swing of the sword. Select the HideSlash method in the Inspector.

play

Once you have done this, let's run it for the last time to see how it works. You should be able to see the effect as shown in the following image.

Incorporate slashing effects into your game!

Thank you for reading to the end. Please let us know about your games on Twitter.

I'd be happy to contribute to your game development.

Please share this article if you like!