如何防止 LibGDX 中的瓦片地圖中的紋理滲色

Question

我知道關於這個主題有很多問題（和答案），但他們都有不同的解決方案，而且似乎沒有一個對我有用。

我正在使用libGDX開發一個小型測試項目，我嘗試在其中添加一個簡單的瓷磚地圖。 我使用Tiled創建了 tilemap，這似乎工作得很好，除了紋理滲色，有時會導致黑色線條（背景顏色）出現在瓷磚之間。

---

到目前為止我已經嘗試過：

我閱讀了幾個 SO 問題、教程和論壇帖子，並嘗試了幾乎所有的解決方案，但我似乎並沒有讓這個工作正常。 大多數答案都說我需要在瓷磚之間進行填充，但這似乎並不能解決它。 我還嘗試使用不同的參數加載瓷磚地圖（例如，在加載它們時使用最近的過濾器）或舍入相機的 position 以防止舍入問題，但這確實使情況變得更糟。

---

我目前的設置：

您可以在GitHub上找到整個項目。 該分支稱為“tile_map_scaling”

目前我正在使用一個由這個圖塊圖片組成的圖塊集：

它在每個圖塊之間有兩個像素的空間，用作填充和邊距。

我的 Tiled tileset 設置如下所示：

我使用兩個像素的邊距和間距來（嘗試）防止此處流血。

大多數情況下它渲染得很好，但有時在圖塊之間仍然有這些線，就像這張圖片一樣（有時它們似乎只出現在地圖的一部分上）：

我目前正在將磁貼 map 加載到資產管理器中，沒有任何參數：

public void load() {
    AssetManager manager = new AssetManager();
    manager.setLoader(TiledMap.class, new TmxMapLoader(new InternalFileHandleResolver()));
    manager.setErrorListener(this);
    manager.load("map/map.tmx", TiledMap.class, new AssetLoaderParameters());
}

...並像這樣使用它：

public class GameScreen {

    public static final float WORLD_TO_SCREEN = 4.0f;
    public static final float SCENE_WIDTH = 1280f;
    public static final float SCENE_HEIGHT = 720f;

    //...

    private Viewport viewport;
    private OrthographicCamera camera;
    
    private TiledMap map;
    private OrthogonalTiledMapRenderer renderer;
    
    public GameScreen() {
        camera = new OrthographicCamera();
        viewport = new FitViewport(SCENE_WIDTH, SCENE_HEIGHT, camera);

        map = assetManager.get("map/map.tmx");
        renderer = new OrthogonalTiledMapRenderer(map);
    }

    @Override
    public void render(float delta) {
        //clear the screen (with a black screen)
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    
        moveCamera(delta);
        renderer.setView(camera);
        renderer.render();
        //... draw the player, some debug graphics, a hud, ...
        moveCameraToPlayer();
    }

    private void moveCamera(float delta) {
        if (Gdx.input.isKeyPressed(Keys.LEFT)) {
            camera.position.x -= CAMERA_SPEED * delta;
        }
        else if (Gdx.input.isKeyPressed(Keys.RIGHT)) {
            camera.position.x += CAMERA_SPEED * delta;
        }
        
        // ...

        //update the camera to re-calculate the matrices
        camera.update();
    }


    private void moveCameraToPlayer() {
        Vector2 dwarfPosition = dwarf.getPosition();
        
        //movement in positive X and Y direction
        float deltaX = camera.position.x - dwarfPosition.x;
        float deltaY = camera.position.y - dwarfPosition.y;
        float movementXPos = deltaX - MOVEMENT_RANGE_X;
        float movementYPos = deltaY - MOVEMENT_RANGE_Y;
        
        //movement in negative X and Y direction
        deltaX = dwarfPosition.x - camera.position.x;
        deltaY = dwarfPosition.y - camera.position.y;
        float movementXNeg = deltaX - MOVEMENT_RANGE_X;
        float movementYNeg = deltaY - MOVEMENT_RANGE_Y;
            
        camera.position.x -= Math.max(movementXPos, 0);
        camera.position.y -= Math.max(movementYPos, 0);
        
        camera.position.x += Math.max(movementXNeg, 0);
        camera.position.y += Math.max(movementYNeg, 0);
        
        camera.update();
    }
    
    // ... some other methods ...
}

---

問題：

我在瓷磚地圖上使用了填充，還嘗試了不同的加載參數和四舍五入相機 position，但我的瓷磚地圖中仍然存在這個紋理出血問題。
我錯過了什么？ 或者我做錯了什么？

對此的任何幫助都會很棒。

Answer 1

您需要在您的 tilesheet 中填充您的 tile 的邊緣。 看起來您已經嘗試過這樣做，但填充是透明的，它必須是填充像素的顏色。

因此，如果您有這樣的圖像（其中每個字母是一個像素，平鋪大小是一個）：

AB
CB

然后填充它應該看起來像這樣

 A  B 
AAABBB
 A  B
 C  C
CCCCCC
 C  C

被填充的像素必須用相同顏色的像素填充。

（我將嘗試創建一個包含 git-repo 修復程序的拉取請求。）

Answer 2

作為對bornander 回答的一點補充，我創建了一些 python 腳本，它們完成所有工作以生成一個tileset 紋理，該紋理具有正確的邊緣填充（bornander 在他的回答中解釋），但還沒有填充。

以防萬一任何人都可以使用它，可以在 GitHub 上找到它： https://github.com/tfassbender/libGdxImageTools

Answer 3

還有一個可以擠出瓷磚的npm package。 它是為 Phaser JS 游戲庫而構建的，但您仍然可以使用它。 https://github.com/sporadic-labs/tile-extruder