Unity的程序化刀光插件：X-WeaponTrail

2019-11-25 本文已影响0人恶毒的狗

Unity的程序化刀光插件：X-WeaponTrail

X-WeaponTrail是一个很古老的程序化刀光插件，很早以前买了一直放在仓库没用上。最近不知道特效同学抽什么疯，突然不肯自己做刀光特效了，所以就把这个插件丢给他了。

截图.png

用法

该插件的用法很简单，找到你的武器，把X-WeaponTrail预设拖到武器节点下，调整StartPoint和EndPoint，使其和武器对齐即可。

X-WeaponTrail.png

起点和终点.png

X-WeaponTrail脚本.png

查看X Weapon Trail脚本，参数都比较直观，不过美术比较难理解的是Max Frame，Granularity这2个参数，作者在他的主页给了如下说明：

参数说明.png

MaxFrame可以理解为刀光拖尾的生命周期（长度），MaxFrame越大，拖尾越长。
Granularity可以理解为拖尾Mesh的顶点粒度，Granularity越大，顶点数越多，越平滑。

实现细节

趁着给美术介绍参数，我把这个刀光的实现代码看了一遍，有一些地方还是值得说一下。

首先，作者维护了一个队列mSnapshotList，用来保存刀光拖尾的位置信息。队列的index越小，则越接近当前武器的位置，index越大则越接近刀光的尾部，队列的长度由MaxFrame决定。

  void RecordCurElem() 
  {
    //TODO: use element pool to avoid gc alloc.
    //Element elem = new Element(PointStart.position, PointEnd.position);

    Element elem = mElemPool.Get();
    elem.PointStart = PointStart.position;
    elem.PointEnd = PointEnd.position;

    if (mSnapshotList.Count < MaxFrame) 
    {
      mSnapshotList.Insert(1, elem);
    }
    else 
    {
      mElemPool.Release(mSnapshotList[mSnapshotList.Count - 1]);
      mSnapshotList.RemoveAt(mSnapshotList.Count - 1);
      mSnapshotList.Insert(1, elem);
    }
  }

上面代码中的Element记录了一帧的位置信息，包括一开始我们设置的StartPoint和EndPoint，以及中间位置Pos。

  public class Element 
  {
    public Vector3 PointStart;
    public Vector3 PointEnd;
    
    public Vector3 Pos 
    {
      get 
      {
        return (PointStart + PointEnd) / 2f;
      }
    }

    public Element(Vector3 start, Vector3 end) 
    {
      PointStart = start;
      PointEnd = end;
    }
    
    public Element() 
    {
    }
  }

有了MaxFrame帧的位置信息后，我们就可以生成Mesh了。假设我们没有做任何平滑处理，只是简单的根据每一帧的位置（StartPoint，Pos，EndPoint）补充顶点，已经可以生成刀光的Mesh了，但是会出现明显的折痕：

折痕.png

这个时候，插值平滑就非常必要了。作者采用的插值方式是CatmullRom，关于CatmullRom的说明，网上很多，这里直接贴代码：

        public static Vector3 CatmulRom(Vector3 T0, Vector3 P0, Vector3 P1, Vector3 T1, float f)
        {
            double DT1 = -0.5; 
            double DT2 = 1.5; 
            double DT3 = -1.5; 
            double DT4 = 0.5;

            double DE2 = -2.5; 
            double DE3 = 2; 
            double DE4 = -0.5;

            double DV1 = -0.5;
            double DV3 = 0.5;

            double FAX = DT1 * T0.x + DT2 * P0.x + DT3 * P1.x + DT4 * T1.x;
            double FBX = T0.x + DE2 * P0.x + DE3 * P1.x + DE4 * T1.x;
            double FCX = DV1 * T0.x + DV3 * P1.x;
            double FDX = P0.x;

            double FAY = DT1 * T0.y + DT2 * P0.y + DT3 * P1.y + DT4 * T1.y;
            double FBY = T0.y + DE2 * P0.y + DE3 * P1.y + DE4 * T1.y;
            double FCY = DV1 * T0.y + DV3 * P1.y;
            double FDY = P0.y;

            double FAZ = DT1 * T0.z + DT2 * P0.z + DT3 * P1.z + DT4 * T1.z;
            double FBZ = T0.z + DE2 * P0.z + DE3 * P1.z + DE4 * T1.z;
            double FCZ = DV1 * T0.z + DV3 * P1.z;
            double FDZ = P0.z;

            float FX = (float)(((FAX * f + FBX) * f + FCX) * f + FDX);
            float FY = (float)(((FAY * f + FBY) * f + FCY) * f + FDY);
            float FZ = (float)(((FAZ * f + FBZ) * f + FCZ) * f + FDZ);

            return new Vector3(FX, FY, FZ);
        }

调大Granularity后，之前的折痕平滑了很多。

平滑刀光曲线.png

关于顶点的UV映射

最后想再说一下顶点的UV映射问题。如果不考虑特效贴图，单纯的看顶点生成，效果如下：

删除特效贴图.png

Scene视图.png

注意上图的红色射线，射线的原点即StartPoint和EndPoint的中间点Pos，射线方向从StartPoint指向EndPoint。

查看顶点更新的代码，我们发现顶点的UV设定如下：StartPoint的U是1，EndPoint的U是0，Pos的U是0.5。越接近刀光尾部的顶点，V越接近1。

                Vector3 pos = mSpline.InterpolateByLen(fadeT);
                Vector3 up = mSpline.InterpolateNormalByLen(fadeT);
                Vector3 pos0 = pos + (up.normalized * mTrailWidth * 0.5f);
                Vector3 pos1 = pos - (up.normalized * mTrailWidth * 0.5f);

                Debug.DrawRay(pos, up * 3, Color.red);

                // pos0
                pool.Vertices[baseIdx] = pos0;
                pool.Colors[baseIdx] = MyColor;
                uvCoord.x = 0f;
                uvCoord.y = uvSegment;
                pool.UVs[baseIdx] = uvCoord;

                //pos
                pool.Vertices[baseIdx + 1] = pos;
                pool.Colors[baseIdx + 1] = MyColor;
                uvCoord.x = 0.5f;
                uvCoord.y = uvSegment;
                pool.UVs[baseIdx + 1] = uvCoord;

                //pos1
                pool.Vertices[baseIdx + 2] = pos1;
                pool.Colors[baseIdx + 2] = MyColor;
                uvCoord.x = 1f;
                uvCoord.y = uvSegment;
                pool.UVs[baseIdx + 2] = uvCoord;

结合特效贴图