ギャップを残さずにラインレンダラシェイプをアニメーション化する方法

Question

以下のコードを使用して、ポイント数に基づいてラインレンダラを使用してシェイプを作成しています。 3より大きい点（三角形など）では、最初と最後の点は他の点と同じように形を閉じません。

。どのように3つ以上の点を持つ形状を目に見える隙間なしで閉じることができますか？

どのように（特定のコルーチンを使用して）特定の期間にわたって線を描画するようにシェイプをアニメーションできますか？

public class CircleDrawing : MonoBehaviour 
{ 

    [Tooltip("The radius of the circle, measured in world units.")] 
    public float Radius = 2; 

    [Tooltip("The number of vertices in the circle.")] 
    public int Points = 5; 

    [Tooltip("The color of the circle.")] 
    public Color Color; 

    private LineRenderer lineRenderer; 

    public void Awake() 
    { 
     lineRenderer = gameObject.AddComponent<LineRenderer>(); 
     lineRenderer.material = new Material(Shader.Find("Sprites/Default")); 
     lineRenderer.material.color = Color; 
     lineRenderer.startWidth = lineRenderer.endWidth = 0.5f; 
     lineRenderer.positionCount = Points + 1; //+1 to close the shape 
     Draw(); 
    } 

    private void Draw() 
    { 
     float angle = 0f; 
     for (int i = 0; i <= Points; i++) 
     { 
      float x = Radius * Mathf.Cos(angle) + transform.position.x; 
      float y = Radius * Mathf.Sin(angle) + transform.position.y; 
      lineRenderer.SetPosition(i, new Vector3(x, y, 0.01f)); //Z is slightly behind the paddle so it draws in front 
      angle += (2f * Mathf.PI)/Points; 
     } 
    } 

    private void OnDestroy() 
    { 
     Destroy(lineRenderer.material); 
    } 
} 

Answer 1

LineRendererの最後の点が最初の点と同じであることを確認する場合は、常に任意の形状を閉じる必要があります。 for (int i = 0; i < Points - 1; i++)のようにforループを実行してください（最後の1つを除くすべての点も<で、<=ではありません）。 forループが完了したら、lineRenderer.SetPosition(Point - 1, lineRenderer.GetPosition(0));で図形を閉じます。

ここで、配列は0から始まるので、Point - 1はlineRendererの最後のポイントです。

アニメーションについては、簡単な方法はわかりません。私がすることは、コルーチンを使って各ポイントを時間の経過と共に最終目的地に向かわせることです。たとえば、最初のポイントを追加して、最初のポイントの上に2番目のポイントを追加します。次に、2番目の点を最後の位置に向かって移動させます（移動するにはSetPositionを使用します）。到達したら最後の位置に3番目のポイントを追加し、最終位置に移動します。ポイントごとに繰り返します。

Answer 2

最初の（多分明白な）ソリューションは、LineRenderer上ループオプションを設定することです。しかし、これは多くの場合視覚的に満足のいく結果をもたらすようには見えない。

私は素敵な視覚的な結果を与える、単純にこのような問題を解決します：

lineRenderer.positionCount = Points + 2; //+2 to close the shape and create one more piece to extend over the gap. 

と：

for (int i = 0; i <= Points + 1; i++) // one more piece 

完全な形を描き、そしてちょうどループバックされ、もう一つの作品を作ります始まりに。これはエレガントではないかもしれませんが、それはとてもシンプルで、見た目がどのように見えるか正確に見えます。今、あなたは基本的には既に場所ですべてを持っている

using UnityEngine; 
using System.Collections; 

public class CircleDrawing : MonoBehaviour 
{ 
    public float Radius = 2f; 
    public int Points = 5; 
    public Color Color = Color.red; 
    public float DrawSpeed = 1f; 

    private LineRenderer lineRenderer; 
    private float progress; // [0..1] animated value. 

    public void Awake() 
    { 
     lineRenderer = gameObject.AddComponent<LineRenderer>(); 
     lineRenderer.material = new Material(Shader.Find("Sprites/Default")); 
     lineRenderer.material.color = Color; 
     lineRenderer.startWidth = lineRenderer.endWidth = 0.5f; 
     lineRenderer.positionCount = Points + 2; //+2 to close the shape and create one more piece to extend over the gap. 
     progress = 0; 
     StartCoroutine(Draw()); 
    } 

    private void Update_Disabled() // Regular Update() loop 
    { 
     float angle = 0f; 
     for (int i = 0; i <= Points + 1; i++) // one more piece 
     { 
      float x = Radius * Mathf.Cos(angle) + transform.position.x; 
      float y = Radius * Mathf.Sin(angle) + transform.position.y; 
      lineRenderer.SetPosition(i, new Vector3(x, y, 0.01f)); 
      angle += (2f * Mathf.PI)/Points; 
      angle *= progress; 
     } 

     progress += DrawSpeed * Time.deltaTime; 
     progress = Mathf.Clamp01(progress); 
    } 

    private IEnumerator Draw() 
    { 
     yield return new WaitForSeconds(1f); // Debug 

     bool done = false; 
     while(!done) 
     { 
      if(progress >= 1) 
       done = true; // The done check can be handled better, but it's late. 

      float angle = 0f; 
      for (int i = 0; i <= Points + 1; i++) // One additional piece to loop over start. 
      { 
       float x = Radius * Mathf.Cos(angle) + transform.position.x; 
       float y = Radius * Mathf.Sin(angle) + transform.position.y; 
       lineRenderer.SetPosition(i, new Vector3(x, y, 0.01f)); 
       angle += (2f * Mathf.PI)/Points; 
       angle *= progress; // Animate progress turning. 
      } 
      progress += DrawSpeed * Time.deltaTime; 
      progress = Mathf.Clamp01(progress); 
      yield return null; 
     } 
    } 
} 

すでに使用されている値をアニメーション化することによってそれをアニメーション：

アニメーションのように、このような何かを試してみてください。もちろん、さまざまなエフェクトを実現する方法はたくさんありますが、ほとんどはアニメーション進行状況の値を図面の別のパラメータに適用します。この例に示すように、コルーチンを使用することも、通常のUpdate（）ループだけを使用することもできます。私はこれが助けてくれることを願っています;）

Answer 3

これは、頂点を頂点に結合するラインレンダラーを大きくすることです。

下のソリューションは立方体ですが、余分な頂点を追加しても問題ありません。 私がテストすることができなかった唯一のことは、私が5.5上にあるようにループ設定でした...私はそれが動作すると仮定します... また、私は材料を渡さなかった、あなたはそれを持っていると思います。

using System.Collections; 
using System.Collections.Generic; 
using UnityEngine; 

public class Test : MonoBehaviour 
{ 
    [SerializeField] 
    private float step = 0.5f; // How fast it draws 
    private List<Vector3> vertices = null; 
    private LineRenderer line = null; 
    private void Start() 
    { 
     // This creates a square 
     this.vertices = new List<Vector3>() 
     { 
      new Vector3(-1,-1,0), new Vector3(1,-1,0), new Vector3(1,1,0),new Vector3(-1, 1, 0) 
     }; 
     StartCoroutine(Draw()); 
    } 
    private IEnumerator Draw() 
    { 
     int index = 1; 
     int vertexPos = 1; 
     // Set the LineRenderer basics with 2 vertices 
     this.line = this.gameObject.AddComponent<LineRenderer>(); 
     this.line.startWidth = this.line.endWidth= 0.1f; 
     this.line.numPositions = 2; 
     // Set both point at same starting position 
     this.line.SetPosition(0,this.vertices[0]); 
     this.line.SetPosition(1, this.vertices[0]); 
     Vector3 temp = this.vertices[0];  // Get the current vertex position 
     Vector3 target = this.vertices[index]; // Get the target vertex position 
     while (true) 
     {  
      // Move the current pos to the target pos      
      temp = Vector3.MoveTowards(temp, target, Time.deltaTime * this.step); 
      this.line.SetPosition(vertexPos, temp); 
      // Is the target reached 
      if (temp == target) 
      { 
       // This is for final run when closing the shape 
       // It means we reach target and index is 0 so end of shape 
       // Break the coroutine 
       if(index == 0) 
       { 
        this.line.loop = true; // Could not test this one on 5.5 
        yield break; 
       } 
       // Increase the LineRenderer size by 1 
       vertexPos++; 
       this.line.numPositions++; 
       // Place the new vertex at the position of the previous 
       this.line.SetPosition(vertexPos, temp); 

       // Increase the index and check if we reached the end of the vertex list 
       // If end of vertex list, then we use the first one to close 
       if (++index == this.vertices.Count) 
       { 
        index = 0; 
       } 
       // Set new target 
       target = this.vertices[index]; 
      } 
      yield return null; 
     } 
    } 
}