Git Product home page Git Product logo

ground-slash-vfx-unity's Introduction

Ground Slash VFX

A ground slash attack vfx implemented with a Mesh, decal textures, VFX Graph and some programming. Made in Unity Unity 2021.3.10f1

Reference Tutorial

Features

Screenshots

Adapt to Terrain Cube Terrain


3D Mesh for the Slash

Ground Spash VFX by Gabriel Aguiar

Model the slash UV Maps Finished model

VFX Graph for the Slash

Finished model Gradient and Fade


Ground Decals

Spawn over distance and leave a trail

Spawn over Distance Trail

Decals

Decals


First Person Character Controller

First Person Character Controller


Adjust Dynamically to Terrain

Adjust Dynamically to Terrain


Debris

Blender Model

Model Debris

VFX

Spawn Debris Adapt to Terrain

VFX Graph

VFX Graph


Implementation explained

  1. Project configuration

    1. Use the Universal Render Pipeline.
    2. Use VFX Graph.
  2. Mesh for the Slash

    1. Create the Mesh in Blender.
      1. Start with a Bezier curve, extrude it to create a 3D shape
    2. Map the UVs for the gradient texture.
      1. Open the UV editor.
      2. Constrain to Image Bounds.
      3. Map the UVs to be able to use a simple gradient to cover the shape.
    3. Export as .fbx to include the UVs mapping.
  3. VFX Graph for the Slash

    1. Burst of 1 single particle.
    2. We won't make the particle have a velocity, it will just grow in place.

      NOTE: We will move the whole VFX object and make it spawn other particles as it moves (decals and debris)

    3. Use an Output Particle Mesh node.
      1. Set culling mode to both, so it renders all sides of the mesh.
      2. Rotate and adjust until the mesh faces the right direction.
      3. Use the "Soft Particle" setting so that Unity fades the particle when it touches other geometry.
    4. Set lifetime to 2 seconds, also can make this a parameter.
    5. Make the mesh grow over time.
    6. Set a color and intensity.
  4. Gradient Texture

    1. Use any graphics software to create a gradient texture.
    2. Make a gradient left-to-righ, from zero to full opacity.
    3. In Unity set the "Wrap Mode" to clamp, to avoid artifacts in the transparent side.
    4. In the Output Particle Mesh node.
      1. Set the gradient texture.
  5. Ground Decals

    1. Create a secondary system.
    2. In the Spawn System node.
      1. Use the Spawn Over Distance component, to spawn particles as the VFX itself moves.
      2. Connect a Change Space node to it, using "Target Space" World.
      3. This means the VFX will detect a change of the position of the VFX, and that will trigger an event to emit particles.
      4. But particles will move along with the whole VFX, so we need to fix that.
    3. In the Initialize Particle node.
      1. Change it to World instead of Local, so particles stay where they are spawned and don't stick to the VFX.
      2. Set position of particles to (0,0,0) but using Local so it matches the position of the VFX, (otherwise they'd be spawned at the zero position of the world)
    4. Use an Output Particle Forward Decal node.
      1. Use a default particle texture.
      2. Rotate, set color, accordingly.
      3. Create two output decals, one black and another orange, to simulate burn.
  6. Programming

    1. First Person Character Controller
      1. Integrate the starter asset in your project.
      2. Add a character controller in the scene.
    2. Shooter
      1. Create a component that insantiates a GameObject for the VFX.
      2. Orients the projectile.
      3. Sets a velocity to the rigid body.
    3. Projectile
      1. Decreases its speed over time, to eventually stop.
      2. Casts a Ray into the ground to snap itself to the geometry.
  7. Debris

    1. Model the meshes of the debris in Blender.
    2. VFX Graph for the Debris
      1. Reuse the same system used for the decals, maybe make the decals a sub graph.
      2. Use an Output Particle URP Lit Mesh node.
        1. This is important, so decals apply to the debris meshes.
        2. Set random colors between a range.
        3. Set random size and rotations.
        4. Set size over life for the debris to shrink and dissapear.
      3. In the Initialize Particle node.
        1. Set random local velocity to make the particles go in every direction.
      4. In the Update Particle node.
        1. Add gravity to the particles.
        2. Add a colission with plane, to make them stop at the ground.
      5. Set another particle system to spawn debris at the position of the VFX. To conceal the limitations of the collissions with geometry of the debris.

ground-slash-vfx-unity's People

Contributors

z4gon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.