[FIXED] libGDX camera zoom is different on different devices:

Issue

I'm making a game on both desktop and android and the same code results in two different screens (cam.zoom is the same in both): src="https://i.stack.imgur.com/PWKAL.png" alt="Left is my desktop and right is an android device" />

The desired result is the left screen and the code used to render is like so: (the image is 8000x4000 and is a place holder for my map)

public class MainMenuScreen implements Screen {
    private final Application application;
    private SpriteBatch batch;
    private ShapeRenderer sr;
    private OrthographicCamera cam;
    private Viewport viewport;

    private Button startGame;
    private Texture background = new Texture(Gdx.files.internal("background.jpg"));

    public MainMenuScreen(final Application application) {
        this.application = application;
        cam = new OrthographicCamera(WIDTH, HEIGHT);
        viewport = new FitViewport(WIDTH, HEIGHT, cam);

        batch = this.application.batch;
        sr = this.application.sr;

        startGame = new Button(-50, -25, 100, 50);
        startGame.setColour(new Color(0.01f, 0.35f, 0.47f, 1));
        startGame.setText("Start game", this.application.font);
        startGame.setHasBorder(true);
        startGame.setBorderThickness(3);
        startGame.setBorderColour(new Color(0.02f, 0.62f, 0.79f, 1));
        startGame.setTextColour(new Color(0.02f, 0.62f, 0.79f, 1));

    }

    public void update() {
        Vector2 mousePos = Extras.getMousePos(viewport);
        if (startGame.isClickedOn(mousePos)) {
        }

    }

    @Override
    public void render(float delta) {
        ScreenUtils.clear(0, 0, 0, 1);
        batch.setProjectionMatrix(cam.combined);
        sr.setProjectionMatrix(cam.combined);

        update();
        batch.begin();
        batch.draw(background, -background.getWidth() / 2, -background.getHeight() / 2);
        batch.end();
        startGame.render(this.sr, this.batch);
    }

How do I make sure all different devices have the same zoom in the camera? A possible solution I don't know how to implement yet could be setting cam.zoom to a value dependent on the screen size somehow but there has to be a better way for this using libGDX itself.

Solution

First, are you trying to make the button size's same on all device's screen resolution? or you want to make camera zooming have same value?

Ok, How the variable WIDTH and HEIGHT was declared?
if you have declared both with one spesific size. Its will be not same if you're trying in another resolutions.

EXAMPLE:

//Constant Spesific Value of WIDTH and HEIGHT Size.
public static final int WIDTH = 1280, HEIGHT = 720;

///////////////////////////////////////////////////

//Non-Constant Value of WIDTH and HEIGHT Size.
public static int WIDTH, HEIGHT;
...

//Define Both In Main.class
public MainGameScreen(){
  WIDTH = Gdx.graphics.getWidth();
  HEIGHT = Gdx.graphics.getHeight();
}

However, LibGDX's screen resolution can be calculated. Some object size in your game must be spesific, when calculating the size between both WIDTH and HEIGHT you need to know, how the size will be same in all device with one spesific calculation.

EXAMPLE:

/* Button (256x72) in Screen Resolution (1280x720)
   Button (160x48) in Screen Resolution (800x480) */

startGame = new Button(0,0, WIDTH/5, HEIGHT/10);

//Button (400x100) in All Screen (Constant Value)

startGame = new Button(0,0, 400, 100);

So, i suggest you to make a calculation to sizing some objects in your game. Because its will be different if you trying to make value in constant.

Ok, the next is, OrthographicCamera
Which you want to make same value of zoom right? the cam.zoom is a floating value. Its not a constant value, but it was a variable value that can be changed in all time.

You can trying this code, if you want to zoom camera directly on game

if(Gdx.input.isTouched()){
  //Zoom Out
  cam.zoom += Gdx.graphics.getDeltaTime();
  //Zoom In
  cam.zoom -= Gdx.graphics.getDeltaTime();
}

Or if you talking about static-zoom, in a spesific value (not directly changed)

cam.zoom = 1f; //for 1 value of Zoom Out

I hope you understand what i means and im sorry if my answers can't be helpful for you, cause im still learning too, all about LibGDX.

Answered By - Alf Equilfe
Answer Checked By - Marie Seifert (JavaFixing Admin)