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\$

1 Answer 1

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\$
3
  • \$\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, 2014 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\$ Sep 20, 2014 at 17:49
  • \$\begingroup\$ Never mind! I thought something with the resolution has to be wrong. But I was wrong. \$\endgroup\$
    – Dampfnudel
    Sep 20, 2014 at 18:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .