Java – Libgdx viewport that does not work

Libgdx viewport that does not work… here is a solution to the problem.

Libgdx viewport that does not work

2 months ago, I stumbled upon the issue that the game I was developing would not scale on other devices.
So I decided to implement the viewport because people say it’s the best way to do it, and it’s an easy way.
But about 2 months have passed since I started and still not a single valid example. I’ve read every page I can find, read the wiki multiple times and asked several people, but never got an answer that helped me get it to work.

So the problem is that I need to do 3 things, first I have a stage, which is where I’m going to put all my Actors (buttons and other stuff), then I need my camera, in this case an OrthographicCamera, and then I need a viewport to scale everything.

Here is my latest test: http://pastebin.com/ZvZmeHLs

My creation

@Override
    public void create () {
            cam = new OrthographicCamera(800, 600);
            viewport = new FillViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), cam);
            viewport.update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), true);
            stage = new Stage(viewport);

atlas = new TextureAtlas("LoadingScreen.pack");
            Logo = new Image(atlas.findRegion("VeslaLogo"));
            stage.addActor(Logo);
    }

and I resize

@Override
    public void resize(int Width, int Height) {
            viewport.update(Width, Height, true);

Logo.setSize(700, 500);
            Logo.setX(Width / 2 - Logo.getWidth() / 2);
            Logo.setY(Height / 2 - Logo.getHeight() / 2);
            Logo.setOrigin(Logo.getWidth() / 2, Logo.getHeight() / 2);
    }

I

first thought it would work, on the nexus one it looked good with everything on the screen, but when I tested it on the s4 mini it was too big. Now I don’t know if it’s because I don’t know about viewports or if I’m thinking too complicated. The only thing I knew was that I was completely lost and didn’t know what else I could try. So it would be great if someone could push me in the right direction or could explain to me why this didn’t work.

ps: I also tested with fixed size, but for some reason it makes no difference

Fixed-size one: http://pastebin.com/mpjkP9ru

private int VIRTUAL_WIDTH = 600; 
private int VIRTUAL_HEIGHT = 900; 

@Override
    public void create () {
            stage = new Stage(new StretchViewport(VIRTUAL_WIDTH, VIRTUAL_HEIGHT));
            cam = new OrthographicCamera(VIRTUAL_WIDTH, VIRTUAL_HEIGHT); 
    }

and I resize

@Override
    public void resize(int Width, int Height) {
            Width = VIRTUAL_WIDTH;  
            Height = VIRTUAL_HEIGHT; 

stage.getViewport().update(Width, Height, true); 
    }

If you need more examples or anything, let me know that I’m in a state and I’ll try anything to get it to work

EDIT: I managed to get it to work with the help of @donfuxx. For those interested in code: http://pastebin.com/8v2PB2t9

Solution

In the code you posted, you seem to have mistakenly executed the resize method because you were updating the viewport with a constant (!) value (so you always set the width/height to 600/900, not surprisingly, you don’t see adjustments for different screen sizes):

@Override
public void resize(int Width, int Height) {
        Width = VIRTUAL_WIDTH;  
        Height = VIRTUAL_HEIGHT; 

stage.getViewport().update(Width, Height, true); 
}

You should follow the recommendations in viewports wiki and set the appropriate width/height values:

@Override
public void resize(int width, int height) {
     use true here to center the camera
     that's what you probably want in case of a UI
    stage.getViewport().update(width, height, false);
}

By the way: also remove the logo resizing code from the resize method!

Update: I also noticed that you’d be better off initializing the viewport and camera like this (using the viewport constructor with camera parameters):

 cam = new OrthographicCamera(VIRTUAL_WIDTH, VIRTUAL_HEIGHT);
 viewport = new StretchViewport(VIRTUAL_WIDTH, VIRTUAL_HEIGHT, cam); notice cam param here!
 stage = new Stage(viewport);

Instead of:

 stage = new Stage(new StretchViewport(VIRTUAL_WIDTH, VIRTUAL_HEIGHT));
 cam = new OrthographicCamera(VIRTUAL_WIDTH, VIRTUAL_HEIGHT);

Related Problems and Solutions