Drawing filled polygon with libGDX's earclippingtriangulator and PolygonSpriteBatch

Question

I am trying to draw a filled polygon with libGDX, now I'm trying to do this using PolygonSpriteBatch, you can see my code below:

public class MyGdxGame extends ApplicationAdapter implements GestureDetector.GestureListener {

Texture textureSolid;
PolygonSprite polySprite;
PolygonSpriteBatch polyBatch;
OrthographicCamera camera;
Vector2 touch;

@Override
public void create() {
    super.create();

    camera = new OrthographicCamera(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
    camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    touch = new Vector2();
    Gdx.input.setInputProcessor(new GestureDetector(this));

    polyBatch = new PolygonSpriteBatch(); // To assign at the beginning

    polyBatch.setProjectionMatrix(camera.combined);

    // Creating the color filling (but textures would work the same way)
    Pixmap pix = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
    pix.setColor(0xFF33691E); // DE is red, AD is green and BE is blue.
    pix.fill();
    textureSolid = new Texture(pix);
    TextureRegion textureRegion = new TextureRegion(textureSolid);

    float[] vertices = new float[] {10, 10, 100, 10, 200, 200, 10, 100};

    EarClippingTriangulator triangulator = new EarClippingTriangulator();
    ShortArray triangleIndices = triangulator.computeTriangles(vertices);

    PolygonRegion polyReg = new PolygonRegion(textureRegion, vertices, triangleIndices.toArray());

    polySprite = new PolygonSprite(polyReg);
}

@Override
public void resize(int width, int height) {
    super.resize(width, height);
}

@Override
public void render() {

    polyBatch.begin();
    polySprite.draw(polyBatch);
    polyBatch.end();

}

@Override
public void pause() {
}

@Override
public void resume() {
}

@Override
public void dispose() {
    polyBatch.dispose();
}

@Override
public boolean touchDown(float x, float y, int pointer, int button) {
    return false;
}

@Override
public boolean tap(float x, float y, int count, int button) {
    return false;
}

@Override
public boolean longPress(float x, float y) {
    return false;
}

@Override
public boolean fling(float velocityX, float velocityY, int button) {
    return false;
}

@Override
public boolean pan(float x, float y, float deltaX, float deltaY) {
    camera.translate(-deltaX, deltaY);
    camera.update();
    return true;
}

@Override
public boolean panStop(float x, float y, int pointer, int button) {
    return false;
}

@Override
public boolean zoom(float initialDistance, float distance) {
    return false;
}

@Override
public boolean pinch(Vector2 initialPointer1, Vector2 initialPointer2, Vector2 pointer1, Vector2 pointer2) {
    return false;
    }

}

When I run the code I end up with multiple polygons as well as a weird "background"

What have I done wrong?

Answer 1

You need to clear the screen at the beginning of each frame. Refactor your render method to be something like this...

@Override
public void render() {

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

    polyBatch.begin();
    polySprite.draw(polyBatch);
    polyBatch.end();

}