瓷砖地图移动中的白色垂直线条和抖动水平线条 [英] White vertical lines and jittery horizontal lines in tile map movement

问题描述

我无法找到答案，为什么使用libGDX在瓷砖地图上制作瓷砖时会在屏幕上移动时创建垂直白线和水平线。

以下是一段显示白色垂直线条的视频：

解决方案

我有这个完全相同的问题，当我移动时在我的瓷砖之间出现竖线。为了解决这个问题，我习惯了以下代码：

  public static void fixBleeding（TextureRegion [] [] region）{
（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）; //修剪
 // region 
} 
  

这些方法（一个用于一组纹理和一个纹理）稍微调整图像，以免出血。调整非常轻微（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=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

解决方案

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.

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