CODEWITHSUNDEEP
graphicslibgdx
Sergey
Sergey

Reputation: 11

LibGDX draws dots instead of lines

I would like to implement some kind of eraser,so in my render method I make the upper layer transparent.

@Override
public void render () {
  cam.update();
  Gdx.gl.glClearColor(1, 1, 1,1);
  Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
  if (Gdx.input.isTouched()) {
    pos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
    pixmap.setColor(new Color(1, 1, 1, 0.5f)); //transparency
    pixmap.fillCircle((int)pos.x, (int)pos.y, 10);
  }
  texture3.draw(pixmap, 0, 0);
  batch.begin();
    batch.draw(texture, 0, 0);
    batch.draw(texture3, 0, 0);
  batch.end();
}

But I got points when make swipes. It requires to do very slow speed to make lines instead of dots. So I expect continuous line instead of dots. Can you advice something please? Dots instead of line

Upvotes: 1

Views: 119

Answers (1)

Luis Fernando Frontanilla
Luis Fernando Frontanilla

Reputation: 1160

This is caused because of the frequency at which the input state is updated, the solution here would be to manually calculate the missing points needed to make a line, you could do this with a linear interpolation between each pair of dots, additionally you could calculate how many extra dots are necessary depending on how far is the newest dot from the previous one, in my example I use an arbitrary number of extra dots (20) like so:

public class TestDraw extends Game {

    private Pixmap pixmap;
    private Texture texture;
    private SpriteBatch batch;
    private Vector2 lastPos;

    @Override
    public void create() {
        pixmap = new Pixmap(1000, 1000, Pixmap.Format.RGBA8888);
        texture = new Texture(pixmap);
        batch = new SpriteBatch();
        lastPos = new Vector2();
    }

    @Override
    public void render() {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        if (Gdx.input.isTouched()) {
            pixmap.setColor(new Color(1, 1, 1, 0.5f)); //transparency
            int newX = Gdx.input.getX();
            int newY = Gdx.input.getY();
            pixmap.setColor(Color.RED);
            pixmap.fillCircle(newX, newY, 10);

            // If the distance is too far, fill with extra dots
            if (lastPos.dst(newX, newY) > 10) {           // Here far is 10, you can adjust as needed
                int extraDots = 20;                       // How many extra dots to draw a line, I use 20, adjust as needed or calculate according to distance (for example lastPos.dst(newX,newY) * 5)
                for (int i = 0; i < extraDots; i++) {
                    float progress = (1f / extraDots) * i;
                    int dotX = (int) MathUtils.lerp(lastPos.x, newX, progress);
                    int dotY = (int) MathUtils.lerp(lastPos.y, newY, progress);
                    pixmap.setColor(Color.BLUE);
                    pixmap.fillCircle(dotX, dotY, 10);
                }
            }
            // Store last position for next render() call
            lastPos.set(newX, newY);
        }
        texture.draw(pixmap, 0, 0);
        batch.begin();
        batch.draw(texture, 0, 0);
        batch.end();
    }
}

Adecuate to your code as needed, I didn't know what was texture3 so I didn't include in my example

Also another option which I don't like too much because of rendering and storage cost is using a Polygon to draw the lines.

Upvotes: 1

Related Questions