Libgdx Viewport with stage not working

Question

2 months ago I stumbled upon the problem that my game that I was working on did not scale with other devices. So I decided to implement viewports since people said that it was the best way and also an easy way. But it's been around 2 months since I started and still don't have a working example. I have read every single page I could find, read the wiki multiple times and ask several people but never got an answer that helped me getting it to work.

So the problem is that I need to do 3 things, First I have a stage, this is were I would place all my actors on (buttons and stuff), then I need my cam in this case a OrthographicCamera, and then I need a viewport to scale everything.

This is my lastest test: http://pastebin.com/ZvZmeHLs

My create

@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 my 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 that it was working, on a nexus one it looked good, had everything on screen but when I tested it on a s4 mini it was way to big. Now I don't know if this is because i'm just not understanding viewports or that I'm thinking way too complicated. The only thing that I know is that I'm totally lost and have no idea 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 isnt working.

ps: I also tested it with fixed sizes but this didn't make any difference for some reason

Sample of the 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 my resize

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

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

If more example or anything is needed please let me know, I'm in a state were I would try anything to get it working

Edit: I managed to get it working with the help of @donfuxx . for those interested in the code: http://pastebin.com/8v2PB2t9

Answer 1

In your posted code you seem to do the resize method wrong, because you are updating the viewport with a constant (!) value (so you always set the width/height to 600/900, no surprize you don't see adjustments to 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 instead do it like it is suggested in the the viewports wiki and set the proper 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);
}

BTW: also get rid of that Logo sizing code inside your resize method!

Update: Also I noticed that you should better initialize your viewport and camera like this (use the viewport constructor that has the camera parameter):

 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);

Answer 2

I personally have designed my app for 1920x1080 and just scale everything down on smaller screens. My camera for the spritebatch:

camera = new OrthographicCamera(screen_width, screen_height);
batch.setProjectionMatrix(camera.combined);

ensures that on every screen the sprites are drawn between -screen_width/2.0 and screen_width/2.0 (same for height)

using the default stage constructor draws every actor between 0 and screen_width

stage = new Stage();

then I set the scale to:

float global_scale = 1920.0f/screen_height;
actor.setScale(global_scale);

There are obviously other ways to do this, like with a viewport.