The question is published on by Tutorial Guruji team.
So, I’m using LibGDX for my upcoming App.
I use a FitViewport to ensure the 16:9 aspect ratio. So players with other aspect ratios than 16:9 will have black bars at sites.
What is the best way, to draw a screen filling background image, that also covers the area, where the black bars would be?
camera = new OrthographicCamera();
viewport = new FitViewport(WIDTH, HEIGHT, camera);
viewport.apply();
camera.position.set(WIDTH / 2, HEIGHT / 2, 0);
camera.update();
Thats how I set up my camera/viewport currently.
I then draw stuff on it with a SpriteBatch.
Gdx.gl.glClearColor(1, 1, 1, 1);
That’s how I currently at least change the color of the black bars, to any RGB color.
Answer
In my opinion, the best idea is to create a second stage and it’s own Viewport only for background purposes. This second Viewport should not be FillViewport – it will strech your graphics from my experience. I think ExtendViewport is better in this case.
So how should it look:
Stage stage, backStage;
FitViewport viewport;
ExtendViewport backViewport;
...
stage = new Stage(); //this is your normal stage you have now
stage.setViewport( yourFitViewport ); //here you are assingning fit viewport
backViewport = new ExtendViewport( screenWidth, screenHeight );
backStage = new Stage();
backStage.setViewport( backViewport );
...
//now add to backStage your background Image
backStage.addActor( yourBackground );
Now just handle new stage in the render method.
backStage.act();
stage.act();
backStage.draw(); //backStage first - we want it under stage
stage.draw();
And update new Viewport in update or render like your old one. That’s all.
Read more about Viewports here: https://github.com/libgdx/libgdx/wiki/Viewports