在LibGDX中逐像素绘制形状

Question

我正在尝试制作带有两个三角形和圆形的介绍屏幕，如下图所示。

我想做的是在2秒的跨度内从一个点到最后一个像素一个像素地绘制这些形状，使其看起来像动画。 我尝试使用ShapeRenderer但只是将形状一次性放入即可。 如何制作动画？

Answer 1

您可以创建一个反映动作类的类。 Actions类用于制作动画，它需要一个演员来起作用。 我将它设置为一个空演员，有点怪，但它可以工作。 动作完成动画后，它将ifself移出SequenceAction并停止渲染。 在您的自定义动作类中，您需要何时将其设置为活动状态，并在完成动画时保持渲染。

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

用向量控制圆要比使用圆弧绘制方法容易。 要更改圆的线段，请更改长度参数。

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