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

Question

我正在尝试绘制线条动画轮廓各种形状，如下图所示。我非常清楚这是我最好的做法，我提到了我能够获得的具体帮助，但我不知道从哪里开始，只是因为我知道使用Line Renderer可以是实现这一目标的好方法。那说，我怎么能实现这个目标呢？

更新

我认为我没有清楚地解释一些事情。我感兴趣的是在没有箭头的情况下设置对象轮廓的动画，只是在轮廓周围描绘了一条线，如下图所示：

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绘制它们。除箭头之外的线条本身是静态的，因此您可以非常容易地将它们作为网格的一部分绘制。还要注意，我没有提到对象的位置，所有的值都应该在局部空间中定义，然后用对象进行转换。您可以通过提供变换矩阵来转换DrawMesh函数中的绘制内容。

Answer 2

我认为带有参数化放射状遮罩的着色器将是最好的方法。我自己从未做过一个，所以我只对它是如何完成的有一个大概的了解，但这里是如何工作的AFAIK：

1. 创建一种可以绘制对象边缘的单元格着色器。
2. 创建一个过滤器/面罩，其角度形状从中心到边缘径向挤出;您可以使用参数控制形状/角度。 Unity已经在Tanks! tutorial - Tank Health lesson中有类似的内容。
   • ^{_{注意：教程可能就是这个想法，但我不记得有足够的细节来确认;我再看一遍后，我会更新答案。}}
   • 本教程有相同的想法，但它使用统一的内置UI东西来应用它。
3. 使用此遮罩，只会在屏幕上绘制形状边缘的遮罩区域。
4. 通过随时间增加蒙版的角度参数，您可以创建随时间径向显示的对象边缘的效果。这似乎正是你想要的。

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

• 浅蓝色 =面具。
• 深蓝色 =＆＃34;显示＆＃34;掩模的一部分（角度参数）。加上角度增加时的表现（箭头）。
• 绿色 =对象。
• 黑色 =轮廓被绘制到屏幕上。