2
\$\begingroup\$

I'm going to apologize in advance for the lack of screenshots, but this was a very hard thing to capture, but very obvious to see.

I'm using LibGDX to create a tile base rogue-like. Everything is going alone smoothly and working well, but there is one graphical glitch that is very bothersome. I have the camera LERPing towards the player, but this smooth movement causes very small gaps to appear for about a frame between the floor tiles that's quite distracting.

The tile rendering code looks something like this:

for(int y = 0, i = 0; y < mHeight; y++) {
    for(int x = 0; x < mWidth; x++, i++) {
        batch.draw(mTiles[i].textureRegion, x * TILE_SIZE, y * TILE_SIZE);
    }
}

Where mTiles is a 1D array representing the 2D dungeon, batch is the main SpriteBatch used for rendering, and textureRegion is the TextureRegion of the tile.

The camera code looks like this:

pos = mEntity.getPosition();
mCam.position.x = MathUtils.lerp(mCam.position.x, pos.x * TILE_SIZE, delta);
mCam.position.y = MathUtils.lerp(mCam.position.y, pos.y * TILE_SIZE, delta);

The problem is solves if I cast the result of the LERP to an int, forcing the camera to line up with the tiles, but it's not ideal. I also tried creating a new texture of the entire dungeon floor from the texture regions that make it up, but there doesn't seem to be any elegant way to do this.

Anyone else face a similar situation? I'll try and capture some screenshots and post them later.

\$\endgroup\$
  • \$\begingroup\$ This link is for Unity but there is a host of suggestions and provides a good summary of the potential problems. Here is another link to an SE QnA regarding the same problem in libGDX. \$\endgroup\$ – Fuzzy Logic Sep 22 '15 at 22:36
2
\$\begingroup\$

So many of the responses given by Fuzzy Logic boiled down to either adding padding around the textures, or rounding the camera values to whole numbers. Due to the pixel art style of my game, rounding the values worked the best. Here's the updated camera code:

GridPoint2 pos = mEntity.getPosition();
mCam.position.x += (int) ((pos.x * TILE_SIZE - mCam.position.x) / 2 + TILE_SIZE / 2) / 8;
mCam.position.y += (int) ((pos.y * TILE_SIZE - mCam.position.y) / 2 + TILE_SIZE / 2) / 8;

This also has the side effect of there being a buffer region where the player can move but the camera does not. Personally I like this, but I'm sure there's a way to avoid it if you don't.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.