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

Question

我想绘制一个线条动画大纲各种形状，如下图所示。我非常清楚，最好的做法是提及我能够获得的具体帮助，但我不确定从哪里开始，只是我知道使用Line Renderer可能是一种很好的方法来实现这个。那就是说，我怎么能做到这一点？

UPDATE

我觉得我没有解释一些事情不够清楚。我感兴趣的动画对象的轮廓没有箭头，只是追查圆像下面的图像的轮廓线：

Answer 1

我会做到以下几点：（伪代码，未经测试）

每预制或gameobject，存储定义您的轮廓的边缘列表。 我不建议使用网格的边缘，为了避免对象的内边缘，可能最好有一个特定的预定义的每个形状的边缘列表。列表中的每个条目由两个Vector3定义，它们是两个顶点。

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

现在，你有很多方法来实际绘制箭头，就像它们作为单个gameobjects（可能不是一个好主意），粒子系统，或者只是自动绘制从父对象更新功能。我会推荐后者。

现在你将存储一堆漂浮的定义你的箭是

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); 

    } 

} 

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

Answer 2

我认为具有参数化径向遮罩的着色器是实现此目的的最佳方法。我从来没有做过一个自己，所以我只有它是如何做一个总体思路，但在这里是如何将AFAIK工作：

1. 创建某种细胞着色器，可绘制对象的边缘。
2. 创建一个角度为从中心到边缘径向突出的过滤器/遮罩;您可以使用参数控制形状/角度。 Unity在Tanks! tutorial - Tank Health lesson中已经有类似的东西了。
   • ^{_{注：本教程甚至可能正是这样的想法，但我不足够的细节，以确认记住;我再看一遍后会更新答案。}}
   • 该教程有相同的想法，但它适用它使用团结的内置UI的东西。
3. 使用此遮罩，只会在屏幕上绘制形状边缘的遮罩区域。
4. 通过随着时间的推移增加遮罩的角度参数，您可以创建径向随着时间呈现的对象边缘的效果。这似乎正是你想要的。

---

为了帮助形象化，一个^{_非常专业}图中的油漆制造：

• 浅蓝色 =面具。
• 深蓝 =“显示”部分面罩（角度参数）。此外，如果角度增加（箭头）它将如何表现。
• 绿色 =对象。
• 黑色 =画在屏幕上的轮廓。