3
\$\begingroup\$

I'm trying to understand how LibGDX handles screen size / resolution, etc. Coming from XNA this seems very confusing to me. Basically I want to support 480x800 for my game. If the screen size is different it should scale the resolution and use letterboxing. To do this I use a FitViewport. And that's the code:

public static final int VIRTUAL_WIDTH = 480;
public static final int VIRTUAL_HEIGHT = 800;
Viewport viewport;
SpriteBatch spriteBatch;
ShapeRenderer shapeBatch;
Texture img;

@Override
public void create()
{
    viewport = new FitViewport(VIRTUAL_WIDTH, VIRTUAL_HEIGHT);
    spriteBatch = new SpriteBatch();
    shapeBatch = new ShapeRenderer();
    img = new Texture("test.jpg");
}

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

@Override
public void render()
{
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    shapeBatch.begin(ShapeType.Filled);
    shapeBatch.setColor(Color.GRAY);
    shapeBatch.rect(0, 0, viewport.getWorldWidth(), viewport.getWorldHeight());
    shapeBatch.end();

    spriteBatch.begin();
    spriteBatch.draw(img, 0, 0);
    spriteBatch.end();
}

Now if I set the game resolution to be 480x800 right at the beginning, it basically works except that if I change the window size, the resolution keeps to be 480x800. So it stretches the image but keeps the aspect ratio: screen1

And if I run the game with any other resolution like for example 700x500 I get this: screen2

What is going on behind the scenes? (And sorry if my english is bad)

\$\endgroup\$
3
\$\begingroup\$

You could try using a Camera when drawing your images. Create a new OrthographicCamera like so:

OrthographicCamera cam = new OrthographicCamera(VIRTUAL_WIDTH, VIRTUAL_HEIGHT);

Now when you create your viewport, pass the camera into the constructor.

Viewport viewport = new FitViewport(VIRTUAL_WIDTH, VIRTUAL_HEIGHT, cam);

Now in your render method:

@Override
public void render(){

    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    spriteBatch.setProjectionMatrix(cam.combined); //Important

    shapeBatch.begin(ShapeType.Filled);
    shapeBatch.setColor(Color.GRAY);
    shapeBatch.rect(0, 0, viewport.getWorldWidth(), viewport.getWorldHeight());
    shapeBatch.end();

    spriteBatch.begin();
    spriteBatch.draw(img, 0, 0);
    spriteBatch.end();

}

Now to resize the viewport:

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

or if you would like to keep the camera center:

@Override
public void resize(int width, int height)
{
    viewport.update(width, height, true);
}
\$\endgroup\$
  • \$\begingroup\$ Thanks, that solved the problem about the distorted image. But the resolution keeps to be the same. That's probably a dumb question but how do I change the resolution of the buffer on wich everything gets drawn? I can't find anything on Google. \$\endgroup\$ – Dampfnudel Sep 20 '14 at 17:15
  • \$\begingroup\$ @Dampfnudel I'm not quite sure what you mean. Don't you want the resolution to stay the same so that everything is not distorted? \$\endgroup\$ – grimrader22 Sep 20 '14 at 17:49
  • \$\begingroup\$ Never mind! I thought something with the resolution has to be wrong. But I was wrong. \$\endgroup\$ – Dampfnudel Sep 20 '14 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.