White vertical lines and jittery horizontal lines in tile map movement

问题

I'm having trouble finding an answer as to why the tile sheets I am making for our tile maps create vertical white lines and jittery horizontal lines while moving around on screen, using libGDX.

Here is a video showing the white vertical lines: https://www.youtube.com/watch?v=34V64WacMo4 Here is one showing the horizontal jittery lines: https://www.youtube.com/watch?v=LiozBZzxmy0

For comparison, here is a project I worked on earlier this year without GDX. You can see the tilemap moves smoothly and without any noticeable seems: https://www.youtube.com/watch?v=VvdPdA_253k

When I take this very tileset into our engine, you can see the seems around the individual tiles. This is true even if I use the exact same tilesheet from this project in our current engine.

My partner and I have both been investigating what causes this and even though we found several possible answers, nothing has worked. The solution we have at the moment feels very wrong. I use Photoshop to create my tile sheet. I keep it very organized so that when it is imported into Tiled it is efficient to work with. Here is the test sheet I have been working with, the one used to create the examples above:

As an experiment, my friend created a few simple 32x32 tiles and used TexturePacker to pack them and then used those in Tiled. The end result of that was this file:

If you open that file in an image editor you will see it makes no sense, the tiles are not even uniform. The blue and green tiles are 34x34 while the red and yellow are 35x34. He said that in TexturePacker he had defined the padding and spacing both to 2. So first of all I am confused as to how 32x32 tiles get output at various sizes. He then said he imported that into Tiled and set the import settings to 33x33 with spacing and padding of both 1. The map created with those tiles seems to work in our engine. This raises several problems.

First of all I do not want to use TexturePacker because I do not create my graphics a tile at a time, I have a master tile sheet hand created in an organized layout. The output of TexturePacker is an unworkable jumble when imported into tiled. I feel I should be able to hand create organized tile sheets and not have to rely on TexturePacker. Additionally, using TexturePacker would mean I would have to export my master sheet, then manually carve it up into individual images, the amount of work that involves exponentially increases the work load so avoiding this would be best.

I also find that the output, turning 32x32 tiles into 34x34 and 35x34 tiles would distort my graphics. This can't be the correct way to do it. How do I create a tile sheet that when used in a tile map and used in GDX, that displays as smoothly as the one I demonstrated in my second video link above?

If interested, here is the current working fork of our app: https://github.com/vinbreauX/DULES

回答1:

I had this exact same issue, with the vertical lines appearing between my tiles when I was moving. To solve this, I used to following code:

public static void fixBleeding(TextureRegion[][] region) {
    for (TextureRegion[] array : region) {
        for (TextureRegion texture : array) {
            fixBleeding(texture);
        }
    }
}

public static void fixBleeding(TextureRegion region) {
    float fix = 0.01f;

    float x = region.getRegionX();
    float y = region.getRegionY();
    float width = region.getRegionWidth();
    float height = region.getRegionHeight();
    float invTexWidth = 1f / region.getTexture().getWidth();
    float invTexHeight = 1f / region.getTexture().getHeight();
    region.setRegion((x + fix) * invTexWidth, (y + fix) * invTexHeight, (x + width - fix) * invTexWidth, (y + height - fix) * invTexHeight); // Trims
                                                                                                                                                // region
}

These methods (one for an array of textures and one for just a single texture) slightly adjust the image so that bleeding does not occur. The adjustment is so slight (0.01f) that it is no where near visible, but it does a great job of getting rid of the vertical lines. When you load your textures, just run them through the fixBleeding() method and your problems should be solved.

来源：https://stackoverflow.com/questions/27391911/white-vertical-lines-and-jittery-horizontal-lines-in-tile-map-movement

标签

graphics

libgdx

sprite

tiling