渲染中的Libgdx TiledMap错误 [英] Libgdx TiledMap bug in render

问题描述

我使用libgdx库进行类似于Mario的游戏.

一切正常，但有时(尤其是在摄像机快速移动时)，我的TileMap在渲染过程中出现了一个小错误.

一张价值一千个单词的图片，所以在这里是: http://postimg.org/image/4tudtwewn/

我尝试增加FPS，但是没有变化.我不知道那是哪里来的.

这是我的代码:

 public void show() {
    TmxMapLoader loader = new TmxMapLoader();
    this.plan = loader.load("maps/level-"+this.world+"-"+this.level+".tmx");
    this.renderer = new OrthogonalTiledMapRenderer(this.plan);
    ...

public void render(float delta) {
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    this.renderer.render();// rendu de la carte
    Batch batch = this.renderer.getSpriteBatch();
    ...
 

解决方案

当相机的位置与屏幕空间坐标(像素)不完全对齐时，就会发生这种情况. 这样会导致一些精灵被舍入到下一个像素，而其他一些(连接到这些像素)被舍入到上一个像素，从而导致可见的丑陋毛刺.

我想出的最简单的解决方法是确保相机"位置始终与屏幕空间坐标完美对齐.

public class TileMapCamera extends OrthographicCamera {

    // Map tile size to round to
    private int tileSize;

    /**
     * Create a pixel-perfect camera for a map with the specified tile size
     * @param tileSize
     */
     public TileMapCamera(int tileSize){
        this.tileSize = tileSize;
     }

     @Override
     public void update(){
         // Round position to avoid glitches
         float prevx = position.x;
         float prevy = position.y;
         position.x = (int)(position.x * tileSize) / (float)tileSize;
         position.y = (int)(position.y * tileSize) / (float)tileSize;
         super.update();
         position.set(prevx, prevy, 0);
    }
}

这适用于基于图块的坐标视口:

mapViewport = new FitViewport(16, 15, new TileMapCamera(map.getProperties().get("tilewidth", Integer.class)));

如果使用的是基于像素的坐标视口，则应将摄影机位置四舍五入到最接近的整数.

I do a Mario like game with the libgdx library.

All works fine but sometime (especially when the camera goes fast) my TileMap has a little bug during the render.

A picture worth thousand word, so here it is : http://postimg.org/image/4tudtwewn/

I have tried to increment FPS, but there is no change. I have no idea where that is come from.

Here is my code :

public void show() {
    TmxMapLoader loader = new TmxMapLoader();
    this.plan = loader.load("maps/level-"+this.world+"-"+this.level+".tmx");
    this.renderer = new OrthogonalTiledMapRenderer(this.plan);
    ...

public void render(float delta) {
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    this.renderer.render();// rendu de la carte
    Batch batch = this.renderer.getSpriteBatch();
    ...

解决方案

This happens when your Camera's position is not perfectly aligned with screen-space coordinates (pixels). This results in some sprites being rounded to the next pixel while some other (that were connected to those) being rounded to the previous one, resulting in visible ugly glitches.

The easiest fix I could come up with is making sure that the Camera position is always perfectly aligned with screen-space coordinates.

public class TileMapCamera extends OrthographicCamera {

    // Map tile size to round to
    private int tileSize;

    /**
     * Create a pixel-perfect camera for a map with the specified tile size
     * @param tileSize
     */
     public TileMapCamera(int tileSize){
        this.tileSize = tileSize;
     }

     @Override
     public void update(){
         // Round position to avoid glitches
         float prevx = position.x;
         float prevy = position.y;
         position.x = (int)(position.x * tileSize) / (float)tileSize;
         position.y = (int)(position.y * tileSize) / (float)tileSize;
         super.update();
         position.set(prevx, prevy, 0);
    }
}

This works for a tile-based coordinate viewport:

mapViewport = new FitViewport(16, 15, new TileMapCamera(map.getProperties().get("tilewidth", Integer.class)));

If you're working with pixel-based coordinate viewports, you should round the camera position to the nearest integer instead.

这篇关于渲染中的Libgdx TiledMap错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！