How to remove gaps between tiled textures?

Question

I'm using LibGDX to make a platformer. I'm using square tiles for the platforms but when they are drawn some of them have gaps between them. When I zoom in/out or move the camera around the gaps move position.

More details:

• Tiles are 32x32 and I have tried both 32x32 and 64x64.
• Tiles are lined up 32 pixels apart (e.g. first tile would be x=0 y=0, second x=32 y=0, and so on in both x and y directions).
• The gaps are not texture artifacts as I have checked this.
• I use the TexturePacker with padding.

My best guess is that it is a problem when converting the textures to screen coords but have no idea how to fix this and I couldn't find any solution. I have checked and double-checked my precision with tile sizes and lining them up.

Has anyone had the same problem or know how it fix it?

Ptarmigan

Answer 1

I got it fixed by setting the duplicatePadding field of the TexturePacker.Settings class to true.

Example code:

import com.badlogic.gdx.tools.texturepacker.TexturePacker;
import com.badlogic.gdx.tools.texturepacker.TexturePacker.Settings;

Settings settings = new Settings();
settings.maxWidth = 1024;
settings.maxHeight = 1024;
settings.duplicatePadding = true;

TexturePacker.process(settings, "source", "destination", "name");

Underclay

Ok and how do you actually use this...? What should go into "source" "destination" and "name"?? source = tileset I believe? – Agnes

You can use it in many ways, for example in your Launcher class, or like i did, created a new class and run this code in the main method. "source" is where you have your images, "destination" is where you want your texture file, and "name" is what you name the texture file. – Underclay

You can also use pack.json file instead of Settings class - LibGDX texture packer documentation – Slurry

Answer 2

Well, I'm here to save your day!

The solution is called "Edge padding". Now if you are working with tilesets, I can assure you that this will work.

Personally I'm using Tiled which allows me to adjust margin and spacing in my tilesets. The only downside by this is that you'll have to use GIMP with this plugin: http://registry.gimp.org/node/26044

This plugin will let you apply edge padding to your tileset and voila! No more ugly artifacts.

Niggling

Answer 3

Bleeding

Gaps

The short answer is that it may be your filter, which likely needs to be set to NEAREST.

Might also want to check out the working tutorials at Libgdx.

Unhesitating

Answer 4

It's called "texture bleeding". You need to add padding to your tiles so that when the texture bleeds, it can collect the correct pixel data to fill the gap.

Niggling

Answer 5

I know it's a bit late to answer on this post, but when I was looking for a solution I came here.

However, for me I found a much easier way to get rid of the flickering or gaps that appear randomly between the tiles.

I simply added a cast to the very long decimals I got for the player's position:

camera.position.set((int)robot.position.x, (int)robot.position.y, 0);

That made the player move very weirdly and to make him move smoothly again I added a cast to its render method aswell:

batcher.draw(robotSprite, (int)robot.position.x, (int)robot.position.y, 16, 16);

Et voilà! Working perfectly for me.

Amain

Answer 6

I would post my solution here and what I had tried for Libgdx about this problem.

--

T1. Make original spritesheet (no atlas file) that downloaded from somewhere to padding 2.

A1. This would be impossible for repacking the spritesheet that have no atlas, even if you find a slice/splitter tool, it should be a bunch of images that need to be repack properly for TiledMap(.tmx)

A1(Updated). Script that provided by @Nine Magics would be the best way to do this! (I use this as my final solution)

--

T2. Use TiledMapPacker that provided by libgdx-nighty or gdx-toolg, The batch code should be:

java -classpath "gdx.jar";"gdx-natives.jar";"gdx-backend-lwjgl.jar";"gdx-backend-lwjgl-natives.jar";"gdx-tiled-preprocessor.jar";"extensions/gdx-tools/gdx-tools.jar" com.badlogic.gdx.tiledmappacker.TiledMapPacker "PathToYourProject\android\assets\RawMap" "PathToYourProject\android\assets\Map" --strip-unused

A2. The output .tmx that could not be readable by Tiled If you are using complex folder path to category your .png files. And the output file could be possibly failed to load by AtlasTmxMapLoader.

--

T3. Camera position correction, make camera position to integer. The code liked @Julian or @strangecat from libgdx tiledmap flicker with Nearest filtering

A3. I use this solution for no problem, and also post my code that different from them.

    float cameraX = (int)(mainCamera.position.x * Game.PPM_X) / Game.PPM_X;
    float cameraY = (int)(mainCamera.position.y * Game.PPM_X) / Game.PPM_X;
    float cameraZ = mainCamera.position.z;
    mainCamera.position.set(cameraX, cameraY, cameraZ);

And also load it with TmxMapLoader.Parameters

    TmxMapLoader.Parameters params = new TmxMapLoader.Parameters();
    params.textureMinFilter = Texture.TextureFilter.Linear;
    params.textureMagFilter = Texture.TextureFilter.Nearest;
    params.generateMipMaps = true;
    assetManager.load(TILED_MAP_SETS.FIRST_MAP, TiledMap.class, params);

If you used PPM and want to move pixel by pixel, you could use this integer correction for your game, If not you could just convert the position to integer.

I almost wasted whole day to slove this, hope these investigation could help every game developers :)

Edit(2018/04/21) I found out that Unity is also having the same problem, but I haven't tested If Libgdx have 2x Anti-Alias setting by default. Libgdx might fix the issue as Unity by turning off the Anti-Alias.

Evelyne