Solved LibGDX: gaps between tiles when rotating them

Engines, Libraries and Tools
#1

Hi folks,

I have run into an issue with a tile grid I cannot seem to solve: gaps / lines appear between tiles when I rotate the grid. I think it has something to do with texture filtering, but cannot figure out how to solve it. The grid is a spaceship built out of tiles (hence why the grid has to rotate).

Here’s how the tile grid looks without rotating:

And here’s how it looks while rotating:

I’m using LibGDX and the textures are on a texture atlas with the following pack settings:

{
		wrapX: Repeat,
		wrapY: Repeat,
		filterMin: Linear,
        filterMag: Linear
}

This is the code I use to render the ship / grid:

Matrix4 m4 = new Matrix4();

   void drawShip(Ship ship, SpriteBatch batch) {
      float shipX = ship.body.getPosition().x * Constants.BOX2D_TO_SCREEN;
      float shipY = ship.body.getPosition().y * Constants.BOX2D_TO_SCREEN;
      float angle = ship.body.getAngle();
      m4.setToTranslation(shipX, shipY, 0);
      m4.rotateRad(0, 0, 1, angle);
      batch.setTransformMatrix(m4);
      int designWidthPx = ship.design.width * Constants.CELL_SIZE_PX;
      int designHeightPx = ship.design.height * Constants.CELL_SIZE_PX;
      for (int x = 0; x < ship.design.width; x++) {
         for (int y = 0; y < ship.design.height; y++) {
            Module module = ship.cells[x][y].module;
            if (module != null && ship.design.cells[x][y].topLeft) {
               TextureRegion tex = module.texture;
               batch.draw(tex, x * Constants.CELL_SIZE_PX - designWidthPx / 2 - Constants.CELL_SIZE_PX / 2, y
                     * Constants.CELL_SIZE_PX - designHeightPx / 2 - Constants.CELL_SIZE_PX / 2,
                     Constants.CELL_SIZE_PX / 2, Constants.CELL_SIZE_PX / 2, Constants.CELL_SIZE_PX,
                     Constants.CELL_SIZE_PX, 1f, 1f, directionToDegrees(ship.design.cells[x][y].direction));
            }
         }
      }
      m4.idt();
      batch.setTransformMatrix(m4);
   }

   public float directionToDegrees(int direction) {
      return -90f * direction;
   }

Does anyone have an idea on how I could resolve this?

#2

Am a friend of hackish solutions, tell me I’m wrong, but couldn’t you just let them overlap a little bit? Should at least remove the problem…

#3

Hmm, that might just work. However, I would prefer a somewhat less hackish solution :wink:

#4

Probably wrong but could it be a floating pointing rounding error. In tile maps if you position tiles with floats you sometimes get gaps.

Just a guess :frowning:

#5

Thanks for the tip, I had thought of that as a possible cause. However, luckily, my Google-Fu-skills paid off and I found the answer. Turns out on the TextureAtlas that contains my tiles there’s transparent pixels directly next to the tiles. While using linear filtering these pixels are also sampled and as a result the edge pixels of each tile are also made partially transparent.

The solution is easy, in case anyone else runs into this. Repack your textures using the duplicatePadding: true setting, which will duplicate the border pixels into the padding space next to it. The problem then goes away!

{
		wrapX: Repeat,
		wrapY: Repeat,
		filterMin: Linear,
      filterMag: Linear,
		duplicatePadding: true
}