libgdx, several stages in one screen

Question

I use two stages in one screen. One - for game actors, another - for control buttons and so on. I use FitViewport for game stage.

What function "resize" should I use? Something like this:

public void resize(int width, int height) {
    FitViewport vpC = new FitViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    stageC.setViewport(vpC);
    stageC.getViewport().update(width, height, true);

    FitViewport vpG = new FitViewport(MyWorld.WIDTH, MyWorld.HEIGHT);
    stageG.setViewport(vpG);
    stageG.getViewport().update(width, height, true);

}

doesn't give correct result.

Actors distorted or buttons don't have right coordinates. That depends on what viewport I place first in func resize - vpC or vpG.

What correct method should I use?

noone noone · Accepted Answer · 2014-08-17T06:21:48

Please read the Viewports wiki article once more. Especially the "Usage" part.

You are not supposed to create new viewports on every resize event. This pretty much destroys the functionality of the viewport. Furthermore the way you are currently using the FitViewport for vpC (please start to use better variable names), it should behave like a ScreenViewport. FitViewport has a "virtual resolution" which you define once. Then on resize events, when updating the viewport, it will scale this virtual viewport to fit the screen, while maintaining the aspect ratio. (maybe causing black bars).

The last flag of the Viewport.update(...) method should also only be true in case of UI. You do not want the camera to be centered in case of a "game" Stage.

public void show() {
    stageC = new Stage(new ScreenViewport());
    stageG = new Stage(new FitViewport(MyWorld.WIDTH, MyWorld.HEIGHT));
}

public void resize(int width, int height) {
    stageC.getViewport().update(width, height, true);
    stageG.getViewport().update(width, height, false);
}

However there is one more problem. Since you are using two different viewport scaling strategies for your stages, you need to "activate" them individually before rendering. This can be avoided by using the same FitViewport for both stages (easiest solution, probably what you want anyway).

public void render(float deltaTime) {
    // this will "activate" the viewport
    stageC.getViewport().apply();
    stageC.act();
    stageC.draw();

    // now switch the viewport and activate the other one
    stageG.getViewport().apply();
    stageG.act();
    stageG.draw();
}

libgdx, several stages in one screen

1 Answers