Search code examples
androidlibgdxviewportpixel

Viewports and pixel sprites - libgdx


I'm new with libgdx and I have a big problem. I'm developing a game using pixel sprites and they look nice in my phone but if I test the game in another phone the sprites looks very stretched and bad.

I've testing viewports but I don't get it working as I want. The thing I want to do is make my sprites look good in every mobile phone. The only viewport that seems to work like I want was FillViewport but when I use this viewport I can't move the camera to botton-left position and when I draw my sprites in 0,0 position they appear in the middle of the screen. Also, I'll use tiled maps with pixel tiles too and I'm getting the same issue with them... i've spent days working in this but I think it's time to get help because I can't make it working by myself

Any help or tips please?

This is my actual code

@Override
public void show () {
    batch = new SpriteBatch();
    float w = Gdx.graphics.getWidth();
    float h = Gdx.graphics.getHeight();

    camera = new OrthographicCamera();
    viewport = new FillViewport(320,480,camera);
    viewport.apply();
    camera.position.set(camera.viewportWidth/2,camera.viewportHeight/2,0);

    tiledMap = new TmxMapLoader().load("TESTMAP.tmx");
    tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap);

    img = new Texture("badlogic.jpg");
}

@Override
public void render(float delta) {
   // Gdx.gl.glClearColor(193 / 255f, 208 / 255f, 160 / 255f, 1);
    Gdx.gl.glClearColor(1,1,1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    camera.update();

    tiledMapRenderer.setView(camera);
    tiledMapRenderer.render();

    batch.setProjectionMatrix(camera.combined);
    batch.begin();
    batch.draw(img,0, 0);
    //batch.draw(pad, player.x, -40);
    batch.end();

}

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

}

Solution

  • FillViewport is the only viewport that crops part of the world view (what the camera sees), so centering the camera on the world view like you did does not necessarily put 0,0 at the bottom left of the screen.

    I think you probably want ExtendViewport instead.

    I cannot think of a situation where FillViewport would be worth the hassle, because you would always be contending with some of your game getting cropped off on some devices. But if you must, you can adjust for the cropping to get 0,0 in the bottom corner by doing something like this:

    camera.position.set(
        viewport.getWorldWidth()/2 + (float)viewport.getScreenX()/(float)viewport.getScreenWidth()*viewport.getWorldWidth(),
        viewport.getWorldHeight()/2 + (float)viewport.getScreenY()/(float)viewport.getScreenHeight()*viewport.getWorldHeight(),
        0);
    

    As you can see, FillViewport is cumbersome to work with.

    By the way, no need to apply your viewport or update your camera in the show method, since you do it in resize anyway.