如何绘制线条动画以勾勒出各种形状？

Question

我试图绘制线条动画，概述各种形状，如下图所示。 我非常清楚，最佳实践是提及获得具体帮助的能力，但是我不确定从哪里开始，只是我知道使用Line Renderer可能是实现目标的好方法这个。 也就是说，我该如何实现？

UPDATE

我想我没有足够清楚地解释一些事情。 我对没有箭头的对象的轮廓动画感兴趣，只是围绕轮廓绘制了一条线，如下图所示：

Answer 1

我将执行以下操作：（伪代码，未经测试）

对于每个预制件或游戏对象，请存储定义轮廓的边列表。 我不建议使用网格物体的边缘，最好为每个形状指定特定的边缘预定义列表，以避免对象的内部边缘。 列表中的每个条目都由两个Vector3定义，这两个是两个顶点。

List<Vector3[]> outline = new List<Vector3[]>();

现在，您有许多方法可以实际绘制箭头，例如将它们作为单独的游戏对象（可能不是一个好主意），粒子系统，或者只是从父对象更新功能自动绘制。 我建议后者。

现在，您将存储一堆用于定义箭头位置的浮点数

public List<float> arrow_locations = new List<float>();

//adding one arrow   
arrow_locations.Add(0.0);

//now in the update function of your parent object, update the arrow locations

private float cycle = 0.0f;
void Update()
{
   float segment_size = 360.0f/outline.Count;
   for(int i=0; i < arrow_locations.Count; i++)
   {
        arrow_locations[i] += 0.05f;  //speed of spinning
        if( arrow_locations[i] >= 360.0f ) arrow_locations[i] = 0;

        //now to get the actual location of the arrow
        int which_edge = Mathf.Floor((arrow_locations[i]/360.0f)*outline.Count);
        //this will give us a number 0..1 telling us where along the edge the arrow is
        float weight_within_edge=(arrow_locations[i] - segment_size*which_edge)/segment_size; 

        //here we lerp between the two vertices of the edge 
        Vector3 new_loc = outline[which_edge][0]*(1.0-weight_within_edge) + outline[which_edge][1]*(weight_within_edge); 

       //now that we have the location of the arrow, draw it
       //note, you can get more efficient if using instancing for all arrows
       //You can also use line drawing, but i wouldn't recommend that. 
       DrawMesh(arrow_mesh, new_loc, Quaternion.identity);

   }

}

请注意，当您拥有箭头的位置时，可以通过将其投影到相机平面上来选择在UI中以2D绘制它们。 箭头旁边的线条本身是静态的，因此您可以很容易地将它们绘制为网格的一部分。 还要注意，我没有提到对象的位置，所有值可能应该在局部空间中定义，然后与对象一起转换。 您可以通过提供aa变换矩阵在DrawMesh函数中变换绘制的内容。

Answer 2

我认为带有参数化径向遮罩的着色器将是实现此目的的最佳方法。 我从来没有自己做过，所以我对它的完成方式只有一个大致的了解，但以下是AFAIK的工作方式：

1. 创建某种可以绘制对象边缘的单元着色器。
2. 创建一个滤镜/遮罩，该滤镜/遮罩具有从中心到边缘径向突出的角度形状； 您可以使用参数控制形状/角度。 Unity在Tanks中已经有类似的东西！ 教程-坦克健康课 。
   • ^{_{注意：本教程甚至可能正是这个主意，但我记得不够详细，无法确认； 再次查看后，我将更新答案。}}
   • 本教程具有相同的想法，但是它使用unity的内置UI东西来应用它。
3. 使用此蒙版，将仅在形状边缘的蒙版区域上绘制屏幕。
4. 通过随时间增加蒙版的角度参数，可以创建对象的边缘随时间径向暴露的效果。 这似乎正是您想要的。

---

为了帮助可视化，绘制了一个^{_非常专业}的油漆图：

• 浅蓝色 =面罩。
• 深蓝色 =遮罩的“已显示”部分（角度参数）。 加上角度增加时的行为（箭头）。
• 绿色 =对象。
• 黑色 =在屏幕上绘制轮廓。