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