CODEWITHSUNDEEP
javaandroidlibgdx
StackNinja
StackNinja

Reputation: 91

LibGDX tile map flickering when camera moving

I'm attempting to make a short game for my family for christmas using libgdx and when going forward through the level the edge of the screen flickers but when going backwards there is no flickering and it's quite annoying.

Here is a demo of what I mean.

Also, here is my code:

if (direction == "right") {
    body.setTransform(body.getPosition().x + 1 / PPM, body.getPosition().y, body.getAngle());
    b2dCam.position.x += (1 / PPM);
    camera.position.x += (1*(PPM/(8/2)));
} else if (direction == "left") {
    b2dCam.translate(-1 / PPM, 0);
    camera.translate(-1*(PPM/(8/2)), 0);
}

tmr.setView(camera);
tmr.render();
camera.update();
b2dCam.update();
b2dr.render(world, b2dCam.combined);

cntrlOverlay.act();
cntrlOverlay.draw();
world.step(1 / 60f, 6, 2);

Any help would be greatly appreciated, thanks.

Upvotes: 2

Views: 1951

Answers (2)

StackNinja
StackNinja

Reputation: 91

I just solved this issue by calling camera.update before everything else so instead of:

tmr.setView(camera);
tmr.render();
camera.update();
b2dCam.update();
b2dr.render(world, b2dCam.combined);

cntrlOverlay.act();
cntrlOverlay.draw();
world.step(1 / 60f, 6, 2);

I now use:

    camera.update();
    tmr.setView(camera);
    tmr.render();
    b2dCam.update();
    b2dr.render(world, b2dCam.combined);

    cntrlOverlay.act();
    cntrlOverlay.draw();
    world.step(1 / 60f, 6, 2);

Upvotes: 1

spectacularbob
spectacularbob

Reputation: 3218

Two things come to mind.

  1. Do your tiles have at least 2px of padding around them?

When OpenGL pulls textures from an image, it blends the pixels surrounding the texture region you are using with the edge of the texture region. Annoying huh? But there are reasons for it. I couldn't tell for sure, but your video looks like you are getting horizontal gutters (the flickering at the bottom and between the house and the ground).

To fix this, each tile on your image asset needs to have at least 2 pixels of padding all around it. To create the padding, create a 2px wide border around each tile in your image and then copy the edge pixels of the tile into this 2px wide border.

  1. VSync

If you still have issues after trying suggestion 1, I have had some flickering issues with libgdx scrolling when vsync was disabled. You can make sure it is enabled in your "Launcher" classes with:

LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
cfg.vSyncEnabled = true;

Upvotes: 0

Related Questions