graphics - 平铺 map 移动中的白色垂直线和不稳定的水平线

Question

我无法找到答案，为什么我为图 block map 制作的图 block 表在使用 libGDX 在屏幕上移动时会创建垂直白线和不稳定的水平线。

这是显示白色垂直线的视频:https://www.youtube.com/watch?v=34V64WacMo4这是显示水平抖动线的一个:https://www.youtube.com/watch?v=LiozBZzxmy0

为了进行比较，这是我今年早些时候在没有 GDX 的情况下完成的一个项目。您可以看到图 block map 移动流畅，没有任何明显的痕迹:https://www.youtube.com/watch?v=VvdPdA_253k

当我将这个图 block 集放入我们的引擎中时，您可以看到各个图 block 周围的外观。即使我在当前引擎中使用该项目中完全相同的图 block 表，情况也是如此。

我和我的搭档都在调查导致此问题的原因，尽管我们找到了几种可能的答案，但没有任何效果。我们目前的解决方案感觉非常错误。我使用 Photoshop 来创建我的平铺表。我把它保持得井井有条，这样当它导入到 Tiled 中时，就可以高效地使用。这是我一直在使用的测试表，用于创建上面的示例:

作为实验，我的 friend 创建了一些简单的 32x32 图 block 并使用 TexturePacker 来打包它们，然后在 Tiled 中使用它们。最终结果是这个文件:

如果您在图像编辑器中打开该文件，您会发现它毫无意义，图 block 甚至不均匀。蓝色和绿色图 block 的尺寸为 34x34，而红色和黄色图 block 的尺寸为 35x34。他说，在TexturePacker中，他将填充和间距都定义为2。所以首先，我对32x32图 block 如何以各种尺寸获得输出感到困惑。然后他说他将其导入到 Tiled 中，并将导入设置设置为 33x33，间距和填充均为 1。使用这些图 block 创建的 map 似乎可以在我们的引擎中工作。这会带来几个问题。

首先，我不想使用TexturePacker，因为我不会一次创建一个图 block 图形，我有一个以有组织的布局手工创建的主图 block 表。当导入到tiled中时，TexturePacker的输出是一个无法工作的困惑。我觉得我应该能够手动创建有组织的图 block 表，而不必依赖TexturePacker。此外，使用TexturePacker意味着我必须导出我的主表，然后手动将其分割成单独的图像，所涉及的工作量呈指数级增加工作量，因此最好避免这种情况。

我还发现，将 32x32 图 block 转换为 34x34 和 35x34 图 block 的输出会扭曲我的图形。这不可能是正确的方法。如何创建一个图 block 表，当在图 block map 中使用并在 GDX 中使用时，它的显示效果与我在上面第二个视频链接中演示的一样流畅？

如果有兴趣，这是我们应用程序当前的工作分支:https://github.com/vinbreauX/DULES

Answer 1

我遇到了同样的问题，当我移动时，我的图 block 之间出现了垂直线。为了解决这个问题，我曾经使用以下代码:

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
}

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