Tutorial: Force Field Weapon Impact – Energy Dispersion

This is my first ever tutorial, and really it’s not as much a tutorial as it is me giving away an asset.

My objective was to create an effect that would simulate the energy of a weapon being absorbed and dispersed by a force field upon impact.  You can see in the image below the lightning-looking effect I’m talking about.  The actual effect is a transparent, self-illumated, animated texture.

Super Space Trooper - Weapon Hits Forcefield

Super Space Trooper – Weapon Hits Force Field

There are 3 main components to achieve this:

  1. The self-illuminated shader
  2. Texture animation script
  3. The texture with alpha channel

Self Illuminating With Transparency – Shader

This shader was not written by me, it was posted by Sync1B on the Unity forum.

Shader "AlphaSelfIllum" {
        Properties {
            _Color ("Color Tint", Color) = (1,1,1,1)
            _MainTex ("SelfIllum Color (RGB) Alpha (A)", 2D) = "white"
        }
        Category {
           Lighting On
           ZWrite Off
           Cull Back
           Blend SrcAlpha OneMinusSrcAlpha
           Tags {Queue=Transparent}
           SubShader {
                Material {
                   Emission [_Color]
                }
                Pass {
                   SetTexture [_MainTex] {
                          Combine Texture * Primary, Texture * Primary
                    }
                }
            }
        }
    }

To use this, create a new Shader asset.  Then copy and paste this into it.

Animated Texture

Now that we have the shader, we need the source code to animate the texture as well.  Like the shader I didn’t write this source code either.  It is from the Unify Community site.  Basically it breaks a texture down into sections, each section representing an animation frame.   We’ll use a 4×4 grid, totaling 16 frames of animation.

var uvAnimationTileX = 4; //Here you can place the number of columns of your sheet.
                           //The above sheet has 24
 
var uvAnimationTileY = 4; //Here you can place the number of rows of your sheet.
                          //The above sheet has 1
var framesPerSecond = 30.0;
 
function Update () {
 
    // Calculate index
    var index : int = Time.time * framesPerSecond;
    // repeat when exhausting all frames
    index = index % (uvAnimationTileX * uvAnimationTileY);
 
    // Size of every tile
    var size = Vector2 (1.0 / uvAnimationTileX, 1.0 / uvAnimationTileY);
 
    // split into horizontal and vertical index
    var uIndex = index % uvAnimationTileX;
    var vIndex = index / uvAnimationTileX;
 
    // build offset
    // v coordinate is the bottom of the image in opengl so we need to invert.
    var offset = Vector2 (uIndex * size.x, 1.0 - size.y - vIndex * size.y);
 
    renderer.material.SetTextureOffset ("_MainTex", offset);
    renderer.material.SetTextureScale ("_MainTex", size);
}

The Texture

The next component is the texture with alpha.  First, this is what the texture looks like

Super Space Troopers - Forcefield Weapon Hit - Texture

Super Space Troopers – Force Field Weapon Hit – Texture

And here’s how the Alpha channel looks

Super Space Troopers - Forcefield Weapon Hit - Alpha

Super Space Troopers – Force Field Weapon Hit – Alpha

You can download the PSD file of the above, which is 1024 x 1024 pixels.

Ok, so now you’ll just need to create a plane, attach the AnimatedTextureUV.js script to it.  Then create a new material asset, attach it to the plane, set the shader to the AlphaSelfIllum.shader.  Drag the psd onto the material in the Inspector and you’re good to go.  You’ll likely want to set the animation to just run one time, either through an animation event or other means.

And here’s a very short video clip of the effect

Posted in Images, Javascript JS, Screenshots, Super Space Trooper, Unity 3D, Video, Video Game Development
0 comments on “Tutorial: Force Field Weapon Impact – Energy Dispersion
2 Pings/Trackbacks for "Tutorial: Force Field Weapon Impact – Energy Dispersion"
  1. […] weapon impact dispersion effect is now complete.  See my last post for the script file, shader, and psd file.  It required a few minor touchups to the alpha channel to get rid of some artifacts at the edge […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>