Tutorial: Create a trail

IntermediateArtistProgrammer trail effect for a sword swing. 0.7 倍 1.0 倍 1.2 倍 1.5 倍 2.0 倍

1. Create a project

• Start and select New Game.
• Create a new game dialog, under Asset Packs, select Animated Models. The Animated Models pack contains assets we’ll be using in this example. (Note that we’ll make our particle effect from scratch.)
• MyTrailEffect) and click OK. Game Studio loads a simple scene with a few entities.
• Sphere entity for this tutorial, so go ahead and delete it (select it and press Delete).

  2. Set up the models and animation

• Asset View, open the Models folder and drag and drop the mannequinModel into the scene. The mannequinModel contains a skeleton asset that we’ll use for our sword slash animation.
• mannequinModel selected, in the Property Grid, select Add component > Animations. This adds an Animation component to the model.
• Animations component, click (Add).
• Type a name for the animation.
• Clip, click (Select an asset).
• Animations folder, select the Sword_R animation, and click OK. This is our right-to-left slash animation.
• animation script. We can use the pre-built AnimationStart script. In the Asset View (bottom pane by default), click Add asset and choose Script > Animation start.
• Create script. Save script. Reload assemblies.
• mannequinModel selected, in the Property Grid, click Add component and select the AnimationStart script.

  Note

  Reload game assemblies and update scripts.
• Animation component, under Item 0, click (Select an asset).
• Animations folder and select the Sword_R animation again.
• Asset View, browse to the Models folder and drag the SwordModel to the mannequinModel in the Entity Tree. This makes the SwordModel a child entity of the mannequinModel.
• mannequinModel to see its child entities, and select SwordModel.
• Property Grid, click Add component and select Model Node Link. This is called a Bone Link in some versions of Xenko. mannequinModel) by default. Model node links page.
• Model Node Link, in the Node Name (or Bone) field, select weapon_bone_R. This attaches the model to the point in the skeleton that uses a weapon in the right hand.
• Play to run the game and check it out. Remember you can use the mouse and WASD keys to move the camera and see the animation from different perspectives. 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  We have a swinging sword animation. Next, let’s add a trail effect.

  3. Create a basic trail

  First we’ll build a basic trail, just to see how it looks.
• SwordModel. In the Property Grid, click Add component and select Particle System. This adds a particle system component to the model, which we’ll use to build a trail effect.
• Source to expand its properties.
• Emitters, click (Add). This adds a new particle emitter.
• Shape to Trail.
• Shape properties, set the Axis to Center. (The shape should really be set to Edge, but the Edge and Center settings are reversed in the UI. This will be fixed in Xenko 1.9.3.)
• Spawners, click (Add) and select Per frame. This adds a per-frame spawner to the emitter, which spawns X number of particles per frame (as opposed to, say, per second).
• Initializers, click (Add) and select Velocity. This adds a velocity initializer to the emitter. At this point, you can grab the mannequin and move it around the scene to see how the particles behave. They look like a cloud of blocky smoke.
• Velocity min and Velocity max values to 0, 5, 0. This restricts the particles to the Y axis, like an infinitely thin sheet of paper.
• Initializers, click (Add) and select Direction. This adds a direction initializer to the emitter.
• Direction min and Direction max to 0, 0, -1. This aligns the trail with the direction of the swing animation.
• Run the game to see how the particles look with the sword-swinging animation. 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  We have a trail, but it doesn’t look too good yet. It’s too long, it’s a single block of color, its particles interconnect strangely, and it never disappears.

  4. Sort the particles

  spawn order initializer.
• Particle System > Source > Emitters, next to Initializers, click (Add) and select Spawn Order.

  Note

  Spawn Order (Parent) or Spawn Order (Group). This adds a spawn order initializer to the emitter. It doesn’t have any properties, but it gives the particles a SpawnID we can sort them by.
• Emitters, under Sorting, choose ByOrder.
• Initalizers, under the Velocity initializer, change both the Velocity min and Velocity max values to 0,0.5,0. - 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  Now the particles move cohesively.

  5. Change the length

  Particle System > Source > Emitters, change the Lifespan to 0.2, 0.2. Move the mannequin around the scene and notice how the trails extinguish more quickly.

  6. Add a texture

  To fix the color, we’ll give the particles a “swoosh” texture:
• swoosh.png) to disk.
• Asset View, click Add asset > Textures > Color and select swoosh.png.
• SwordModel properties, expand Emitters > Material. Click (Select an asset). Browse to the Textures folder and select swoosh.png.
• Alpha-Add bar to 1, so it’s 100% emissive.
• Particle emitter properties, expand Shape and set UV Coords to Stretched and UV Factor to 1.
• UV Rotate. Under Clockwise, select 90 degrees. This rotates the texture 90 degrees clockwise, so the “swoosh” lines point in the right direction. - 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  We’re getting closer. But the trail doesn’t disappear, so it looks like it’s attached to the sword. We need to make the effect appear when the mannequin swings, then disappear at the end of the swing.

  7. Make the particle effect a prefab

  prefab documentation.
• SwordModel and select Create prefab from selection. Game Studio creates a prefab from the SwordModel and adds it to the Asset View. By creating a prefab from the selection, we can quickly copy over the options we’ve set up so far.
• Break link to prefab.
• SwordTrail. To do this, in the Asset View, right-click the SwordModel prefab, select Rename, and type SwordTrail.
• SwordTrail prefab to open it in the Prefab Editor. This is where we’ll customize the prefab.
• SwordTrail (the same as the prefab it belongs to).
• Model and the Model Node Link (or Bone Link) components from the SwordTrail entity. We don’t need them any more — this prefab will just be a particle effect.
• Particle System > Source > Emitters > Initializers, delete the Velocity initializer. For now, we want the prefab effect to be static.
• SwordTrail properties, under Particle System > Source > Emitters > Spawners, set Loop to One shot and change Duration to 0.2, 0.2.
• SwordModel and delete the Particle System component.

  8. Control the effect prefab with a script

  We’ve created a sword trail effect prefab. Next we’ll use a script to spawn the effect every time the mannequin swings and delete the effect a few frames later.
• Open in IDE).
• Add > New item. In the Name field, give your script the name SpawnTrail, and click Add.
• SpawnTrail.cs This is a modified version of the Prefab Instance script included in Xenko. Instead of listening to events or key presses, it listens to animation changes — such as our sword swing animation.
• namespace is correct. This usually matches your Xenko project name (eg MyTrailEffect).
• Ctrl + Shift + S).
• In Game Studio, reload the assemblies.
• MainScene, select the SwordModel.
• Add component and select the SpawnTrail script. This adds the script as a component.
• SpawnTrail component properties, next to Source, click (Select an asset).
• SwordTrail prefab.
• Animation field, click the hand icon (Select an asset). The Select an asset window opens. mannequinModel and click OK.

  ![Pick mannequin model in Entity Picker](media/pick-mannequin-model.png)

• 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  Thanks to our script, the particle effect appears at the start of the sword swing animation and disappears at the end.

  9. Adjust the trail start time

• Sword_R animation asset selected, check the swing animation in the Asset Preview in the bottom-right. (If the Asset Preview isn’t displayed, check View > Asset Preview.) The Asset Preview shows the animation length in seconds. If you look closely, you can see the mannequin doesn’t begin to swing the sword down until about 0.1 seconds into the animation. Let’s set the trail effect to spawn just when the mannequin swings.
• SwordModel.
• SpawnTrail properties, set the Start time to 0.06. This means the trail effect won’t spawn until 0.06 seconds into the swing animation, which looks a little more natural. Feel free to tweak this to your liking.
• Run the game to see how it looks. 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  You might notice our trail effect looks a little jagged, creating a “spiderweb” effect. Let’s make it more curved.

  10. Curve the trail

• SwordTrail prefab, on the SwordTrail entity, under Particle System > Source > Emitters > Shape, set Smoothing to Best and Segments to 5. This adds three vertices between the particles of our trail, which should be enough to create a noticeably smoother effect. - 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  The inner curve, at the sword hilt, is smoother. But the curve at the sword’s edge is still jagged. We want to smooth the effect at the sword’s edge, where it’s more noticeable. To do that, we’ll flip the particle direction.
• SwordTrail prefab, in the Transform component properties, change the Position to 0, 0, -1. This moves the starting point of the particle effect to the tip of the sword. - 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  Now we have a new problem. Because we moved the particle effect to the tip of the sword, the particles are flying from the tip. We need to reverse their direction, so they move down along the sword blade to the hilt.
• Particle System > Source > Emitters > Initializers, under the Direction initializer, change both the Direction min and Direction max to 0, 0, 1. This inverts the trail direction. - 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  Congratulations! You created a trail effect from scratch. How you tweak it now is up to you.

  Sample project

  Here’s a more elaborate trail that combines multiple particle effects: 0.7 倍

        1.0 倍
        1.2 倍
        1.5 倍
        2.0 倍

  download the project file and take a look.

  See also

• Tutorial: Custom particles
• Tutorial: Inheritance
• Tutorial: Lasers and lightning
• Particles
• Create particles
• Model node links