平铺地图移动中的白色垂直线和抖动水平线

本文介绍了平铺地图移动中的白色垂直线和抖动水平线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我很难找到答案，为什么我为我们的平铺地图制作的平铺表在使用 libGDX 在屏幕上移动时会产生垂直的白线和抖动的水平线.

这是一个显示白色垂直线的视频:

解决方案

我遇到了同样的问题，当我移动时，我的瓷砖之间出现了垂直线.为了解决这个问题，我习惯了以下代码:

public static void fixBleeding(TextureRegion[][] region) {for (TextureRegion[] 数组: 区域) {对于(TextureRegion 纹理:数组){修复出血(纹理)；}}}公共静态无效修复出血(纹理区域){浮动修复 = 0.01f；浮动 x = region.getRegionX();浮动 y = region.getRegionY();浮动宽度 = region.getRegionWidth();浮动高度 = region.getRegionHeight();浮动 invTexWidth = 1f/region.getTexture().getWidth();浮动 invTexHeight = 1f/region.getTexture().getHeight();region.setRegion((x + fix) * invTexWidth, (y + fix) * invTexHeight, (x + width - fix) * invTexWidth, (y + height - fix) * invTexHeight);//修剪//地区}

这些方法(一种用于纹理数组，另一种用于单个纹理)会稍微调整图像，以免出现渗色.调整非常轻微(0.01f)，几乎看不到，但它在消除垂直线方面做得很好.当您加载纹理时，只需通过 fixBleeding() 方法运行它们，您的问题就会得到解决.

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=34V64WacMo4Here 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

解决方案

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.

这篇关于平铺地图移动中的白色垂直线和抖动水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！