LibGDXのピクセル単位で図形を描く

Question

私は次のように見える2つの形の三角形と円でイントロ画面を作ろうとしています。

私は何をしたいことは、それがアニメーションのように表示されるように、2秒のスパンで最後に一点からのピクセルによってこれらの形状のピクセルを描画しています。 私はShapeRendererを使ってみましたが、それはちょうど1つの形で形を入れました。どのようにアニメーション化するのですか？

Answer 1

アクションクラスを反映するクラスを作成できます。 Actionsクラスはアニメーションを作成するためのクラスであり、アクターが機能するために必要です。私は空の俳優、それはちょっとハッキーとそれを設定しますが、それは動作します。アニメーションでアクションが完了すると、SequenceActionからifselfを削除してレンダリングを停止します。カスタムアクションクラスでは、アクティブに設定し、アニメーションが終了したらレンダリングを続ける必要があります。

private ShapeRenderer renderer; 
private SequenceAction action; 

@Override 
public void create() { 

    Vector2 center = new Vector2(0.5f * Gdx.graphics.getWidth(), 0.5f * Gdx.graphics.getHeight()); 

    renderer = new ShapeRenderer(); 
    action = Actions.sequence(
      new LineAction(0.5f, new Vector2(0, 0).add(center), new Vector2(-20, 40).add(center), 1, renderer), 
      new LineAction(0.5f, new Vector2(-20, 40).add(center), new Vector2(-40, 0).add(center), 1, renderer), 
      new LineAction(0.5f, new Vector2(-40, 0).add(center), new Vector2(20, 0).add(center), 1, renderer), 
      new CirleAction(0.5f, center, 30, 20, 0, -315, 1, renderer) 
    ); 
    action.setActor(new Actor()); 
} 

@Override 
public void render() { 

    Gdx.gl.glClearColor(0, 0, 0, 1); 
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); 

    renderer.begin(ShapeRenderer.ShapeType.Line); 
    action.act(Gdx.graphics.getDeltaTime()); 
    renderer.end(); 
} 

LineActionクラス。

class LineAction extends TemporalAction { 

    private Vector2 pointA = new Vector2(), pointB = new Vector2(), tmp = new Vector2(); 
    private float lineWidth; 
    private ShapeRenderer renderer; 

    public LineAction(float duration, Vector2 pointA, Vector2 pointB, float lineWidth, ShapeRenderer renderer){ 

     super(duration); 

     this.pointA.set(pointA); 
     this.pointB.set(pointB); 
     this.lineWidth = lineWidth; 
     this.renderer = renderer; 
     this.actor = new Actor(); 
    } 

    @Override 
    protected void update(float percent) { 

     Vector2 point = tmp 
       .set(pointB) 
       .sub(pointA) 
       .scl(percent) 
       .add(pointA); 

     renderer.rectLine(pointA, point, lineWidth); 
    } 
} 

円弧描画方法を使用するよりも、ベクトルを持つ円を簡単に制御できます。円のセグメントを変更するには、length引数を変更します。

class CircleAction extends TemporalAction { 

    private Vector2[] points; 
    private float lineWidth; 
    private ShapeRenderer renderer; 

    public CirleAction(float duration, Vector2 offset, int length, float radius, float startAngle, float endAngle, float lineWidth, ShapeRenderer renderer){ 

     super(duration); 

     this.points = new Vector2[ length ]; 
     this.lineWidth = lineWidth; 
     this.renderer = renderer; 
     this.actor = new Actor(); 

     float degrees = (endAngle - startAngle)/(float) length; 

     for (int i = 0; i < length; ++i){ 
      points[ i ] = new Vector2(radius, 0).rotate(degrees * i).add(offset); 
     } 
    } 

    @Override 
    protected void update(float percent) { 

     for (int i = 0, l = MathUtils.floor((points.length - 1) * percent); i < l; ++i) { 
      renderer.rectLine(points[ i ], points[ i + 1 ], lineWidth); 
     } 
    } 
}