如何繪製線條動畫來勾勒各種形狀？

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. 通過隨着時間的推移增加遮罩的角度參數，您可以創建徑向隨着時間呈現的對象邊緣的效果。這似乎正是你想要的。

---

爲了幫助形象化，一個^{_非常專業}圖中的油漆製造：

• 淺藍色 =面具。
• 深藍 =「顯示」部分面罩（角度參數）。此外，如果角度增加（箭頭）它將如何表現。
• 綠色 =對象。
• 黑色 =畫在屏幕上的輪廓。