Scalling down libgdx game to fit a smaller screen appears only the half of the stage?

Question

Hello I have made a game in 1280x720, but I want it to fit devices with smaller size, so far no luck with the current code it only shows the left half of the screen, it also does not work with bigger sizes, there it shows the scene in the left corner and the remaining is black screen, here is my code:

public class MenuStage extends Stage implements Screen {
private PlayStage playStage;
private UVeggFruit uVeggFruit;
private OrthographicCamera orto;
private Viewport vport;


public MenuStage(UVeggFruit uvf) {
    uVeggFruit = uvf;
    initMenu();

}


private void initMenu() {
    ButtonClickListener buttonClickListener = new ButtonClickListener();
    SceneLoader sc = new SceneLoader();
    CompositeItemVO sceneComposites = new CompositeItemVO(sc.loadScene("MainMenu").composite);
    CompositeActor UI = new CompositeActor(sceneComposites, sc.getRm());
    addActor(UI);
    UI.getItem("playbutton").addListener(buttonClickListener);
    UI.getItem("playbutton").addListener(new ClickListener() {
        @Override
        public void clicked(InputEvent event, float x, float y) {
            super.clicked(event, x, y);
            playStage = new PlayStage(uVeggFruit);
            uVeggFruit.setScreen(playStage);
        }
    });
    orto = new OrthographicCamera();
    vport = new ScalingViewport(Scaling.stretch, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), orto);
    vport.apply();


}

@Override
public void show() {
    Gdx.input.setInputProcessor(this);
}

@Override
public void render(float delta) {
    orto.update();
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    this.act();
    this.draw();
}

@Override
public void resize(int width, int height) {
    vport.update(width, height);
}

@Override
public void pause() {
}

@Override
public void resume() {
}

@Override
public void hide() {
     }
  }

Is it wrong that I put viewport in every stage, or I should put it in the application adapter and it will work for all stages? So basically what I want is that my stage renders as it would in 1280X720, but with smaller size, so how is this possible so I can see my whole stage no mater the screen size which is the general goal?

Answer 1

OK so I don't understand why you are extending Stage but lemme provide an exemple of how to use the View port to fit your needs what ever the screen size:

lets start with your show method you can get rid of this keyword and remove extend stage and do something like so instead :

create a public static attribut stage :

public static Stage stage;

then inside your show method :

stage = new Stage();
Gdx.input.setInputProcessor(stage);

I know it's the same but this is more readable, also you dont have to use OrthographicCamera() stuff if your UI mainMenu is structured inside a Table object like so :

 table.add(MenuUIStuff).top().spaceLeft(60).row();
 table.add(MenuUIStuff);
 table.add(MenuUIStuff).bottom().right().expandX();

and then in your show method dont forget to add your table to the actual stage:

stage.addActor(table);

all this needs to be in your show method ( again for better readability if you want to respect Libgdx style )

then in your render method :

stage.act(delta); // instead of this
stage.draw(); // same here 

now to answer your question the solution will be :

@Override
    public void resize(int width, int height) {
        stage.getViewport().update(width, height);
        table.invalidateHierarchy();
    }