Libgdx Camera / Viewport / TiledMap

Question

我正在尝试基于TiledMap制作游戏（使用Camera和Viewport）。 我的游戏应该缩放，以便整个屏幕都被填满（没有黑条）[就像在Banana Kong]。我找到了应该解决这个问题的ExtendViewport（我认为）。

在尝试了很多事情之后，我找不到正确的解决方案。始终地图缩小到小或/和错误的位置。当我在计算机上缩放窗口时，它应该用Tiled Map填充整个高度，然后填充整个屏幕长度，看看TiledMap的可绘制部分（提到纵横比）。

这是我的代码到目前为止，如何使它工作？

public class LoadingScreen implements Screen {
//Reference to MainGameClass
private MainGameClass game;

//Camera and Viewport
private OrthographicCamera gamecam;
private Viewport gamePort;

//Tiled MaP
private TmxMapLoader maploader;
private TiledMap map;
private OrthogonalTiledMapRenderer renderer;

public LoadingScreen(MainGameClass game) {
    this.game = game;

    //Camera and Viewport
    gamecam = new OrthographicCamera();
    gamePort = new ExtendViewport(MainGameClass.WIDTH, MainGameClass.HEIGHT, gamecam);

    //Tiledmap
    maploader = new TmxMapLoader();
    map = maploader.load("MarioBros.tmx");
    renderer = new OrthogonalTiledMapRenderer(map, 1);
    gamecam.setToOrtho(false);
}

@Override
public void show() {

}

public void update(float dt) {
    //gamecam.position.x += 1;
    gamecam.update();
    renderer.setView(gamecam);
}

@Override
public void render(float delta) {
    update(delta);

    //Clear Game Screen with black
    Gdx.gl.glClearColor(0,0,0,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    renderer.render();

    //Begin GameBatch
    game.batch.setProjectionMatrix(gamecam.combined);
}

@Override
public void resize(int width, int height) {
    gamePort.update(width,height);
    gamecam.setToOrtho(false);
}

@Override
public void pause() {

}

@Override
public void resume() {

}

@Override
public void hide() {

}

@Override
public void dispose() {

}
}

希望有人可以提供帮助

编辑1：

手机的高度应始终为整个高度的圆角。然后，您看到的地图长度也应始终填满整个屏幕。所以在移动设备上，你可以看到更多的水平，水平的高度总是和手机一样高。

当我用鼠标在Pc上手动缩放窗口时，应该更新VIew！

Answer 1

要将视口限制为地图区域，需要几个步骤。

首先，我们需要计算出地图的整个宽度，以便知道我们需要显示多少地图。

int totalMapWidth = totalHorizontalTiles * pixelPerTile;
int totalMapHeight = totalVerticalTiles * pixelPerTile;

现在我们有了我们想要视口大小的地图大小，所以我们可以与totalMapWidth和totalMapHeight进行比较。

viewport.getWorldWidth();  // our viewport width
viewport.getWorldHeight(); // our viewport height

最后我们需要相机的缩放值。

float zoom = camera.zoom;

使用以上所有数据，我们可以在应用缩放的情况下评估视口宽度。

float evalWidth = viewport.getWorldWidth() * cam.zoom;
float evalHeight= viewport.getWorldHeight() * cam.zoom;

最后一步是将相机位置夹在地图区域内的位置。

cam.position.x = MathUtils.clamp(cam.position.x, evalWidth / 2f, 
                    totalMapWidth - evalWidth / 2f);
cam.position.y = MathUtils.clamp(cam.position.y, evh / 2f,
                                    totalMapHeight - evh / 2f);

当缩放到合理的水平时，这应该会停止相机显示地图外的区域。如果用户缩小太远以至于地图小于视口宽度或高度，则将显示外部区域。要停止此操作，您还需要通过限制变焦来锁定缩放级别。

float minZoom = 0.1f; // this is the zoomed in value
float maxZoom = 1; // this is zoomed out level

现在夹住相机

camera.zoom = Math.clamp(camera.zoom, minZoom,maxZoom);

Answer 2

tileWidth=16;
tileHeight=16;

Total Tiles on map (10 * 6 screen) * 6; // on screen 10 * 6 tiles

因此摄影机视口尺寸应为：

viewportWidth= 10 * 16 ;
viewportHeight= 6 * 16 ;

cam=new OrthographicCamera();
cam.setToOrtho(false,viewportWidth,viewportHeight);

TmxMapLoader tmxMapLoader=new TmxMapLoader();
TiledMap tiledMap=tmxMapLoader.load("untitled.tmx");

tiledMapRenderer=new OrthoCachedTiledMapRenderer(tiledMap);
tiledMapRenderer.setView(cam);

渲染

tiledMapRenderer.render();

我建议每个屏幕/页面使用最小15 * 10个图块，其中包含32像素的tileWidth或tileHeigth。当你增加没有。在游戏中你可以获得更好的精确度。

修改

您可以这样使用ExtendViewport：

public class MyTest extends ApplicationAdapter {

    OrthogonalTiledMapRenderer renderer;
    OrthographicCamera cam;
    ExtendViewport viewport;

    float viewportWidth,viewportHeight;

    @Override
    public void create() {

        viewportWidth=16*10;
        viewportHeight=6*16;

        cam=new OrthographicCamera();
        viewport=new ExtendViewport(viewportWidth,viewportHeight,cam);

        TmxMapLoader loader=new TmxMapLoader();
        TiledMap map=loader.load("untitled1.tmx");

        renderer=new OrthogonalTiledMapRenderer(map);
        renderer.setView(cam);
    }

    @Override
    public void render() {

        Gdx.gl.glClearColor(1,1,1,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        renderer.setView(cam);
        renderer.render();
    }

    @Override
    public void resize(int width, int height) {
        viewport.update(width,height,false);
        viewport.getCamera().position.set(viewportWidth/2f,viewportHeight/2f,0);
        viewport.getCamera().update();
    }
}