LibGDX Background size wrong in Android

Question

I have taken some code from a book on LibGDX, and adapted it for my own project, unfortunately, I have got a little stuck.

I have a class called MenuScreen (see below) which of course displays the Menu Screen. It is basically the same as the original code, just adapted for the Images I am using. In the project that was in the book, the Background image used for the Menu displayed correctly, filling an 800x480 Window on the Desktop, and filling the Screen of my Nexus 7.

With my project, the Image displays fine on the Desktop, but much smaller on the Nexus 7. I have a recent build for this project, and I understand that there has been some changes regarding the Viewport. I assume it is displaying now at actual size on the screen, but it is in fact now a lot smaller than is should be anyway... I have a 2012 N7, which has a resolution of 1280 x 800, but is displaying at about 550 x 300, even though the image itself is 800 x 480.

Could someone please point me in the right direction to get this image displaying correctly ?

public class MenuScreen extends AbstractGameScreen {
private static final String TAG = MenuScreen.class.getName();
private Stage stage;
private Skin demoSkin;
private Skin skinLibGdx;

private Viewport viewport;
private Image imgBackground;
// options
private Window winOptions;
private TextButton btnWinOptSave;
private TextButton btnWinOptCancel;
private TextButton optionsButton;
private TextButton startButton;
private Slider numBlocks;
private CheckBox chkShowFpsCounter;


public MenuScreen (Game game)
{
    super(game);
}

@Override
public void render(float deltaTime) {
    Gdx.gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    stage.act(deltaTime);
    stage.draw();
    Table.drawDebug(stage);

}

@Override
public void resize(int width, int height) {
    stage.getViewport().update((int)Constants.VIEWPORT_GUI_WIDTH, (int)Constants.VIEWPORT_GUI_HEIGHT, false);
}

@Override
public void show() {
    stage = new Stage();
    rebuildStage();
}

private void rebuildStage() {
    demoSkin = new Skin(Gdx.files.internal(Constants.SKIN_PHYSICSDEMO_UI), new TextureAtlas(Constants.TEXTURE_ATLAS_UI));
    skinLibGdx = new Skin(Gdx.files.internal(Constants.SKIN_LIBGDX_UI), new TextureAtlas(Constants.TEXTURE_ATLAS_LIBGDX_UI));
    // build all layers
    Table layerBackground = buildBackgroundLayer();
    Table layerControls = buildControlsLayer();
    Table layerOptionsWindow = buildOptionsWindowLayer();

    // assemble stage for menu screen
    stage.clear();
    Stack stack = new Stack();
    stage.addActor(stack);

    stack.setSize(Constants.VIEWPORT_GUI_WIDTH, Constants.VIEWPORT_GUI_HEIGHT);

    stack.add(layerBackground);
    stack.add(layerControls);
    //stage.addActor(layerOptionsWindow);

}

private Table buildOptionsWindowLayer() {
    winOptions = new Window("Options", skinLibGdx);
    // Make options window slightly transparent
    winOptions.setColor(1, 1, 1, 0.8f);
    // Hide options window by default
    winOptions.setVisible(false);
    //showOptionsWindow(false, false);
    // Let TableLayout recalculate widget sizes and positions
    winOptions.pack();
    // Move options window to bottom right corner
    winOptions.setPosition(Constants.VIEWPORT_GUI_WIDTH - winOptions.getWidth() - 50, 50);
    return winOptions;
}

private void showOptionsWindow (boolean visible, boolean animated) {
    float alphaTo = visible ? 0.8f : 0.0f;
    float duration = animated ? 1.0f : 0.0f;
    Touchable touchEnabled = visible ? Touchable.enabled : Touchable.disabled;
    winOptions.addAction(sequence(touchable(touchEnabled), alpha(alphaTo, duration)));
}

private Table buildControlsLayer() {
    Table layer = new Table();
    startButton = new TextButton("Start Simulation", skinLibGdx);
    optionsButton = new TextButton("Options", skinLibGdx);
    layer.add(startButton);
    layer.row();
    layer.add(optionsButton);
    return layer;
}

private Table buildBackgroundLayer() {
    Table layer = new Table();
    imgBackground = new Image(demoSkin, "background");
    layer.add(imgBackground);
    return layer;
}

@Override
public void hide() {
    stage.dispose();
    skinLibGdx.dispose();
    demoSkin.dispose();
}

@Override
public void pause() {
    // TODO Auto-generated method stub

}

@Override
public InputProcessor getInputProcessor() {
    return stage;
}

}

Which value does these vars Constants.VIEWPORT_GUI_WIDTH,Constants.VIEWPORT_GUI_HEIGHT have? — couceirof
They are 800 x 480. As I said, in the project I adapted it from, this filled the screen of the Nexus. — Douglas Brett

Tanmay Patil Tanmay Patil · Accepted Answer · 2014-07-20T16:55:17

You need to set size of the background image separately.

imgBackground.setSize(imageWidth, imageHeight);

Since you are changing Viewport size in resize method, for a screen with higher resolution, image will become even smaller. So image size must be set to be large enough.

You can calculate required image size by multiplying original image size by scaling factor (ratio of actual resolution and assumed resolution).

Good luck.

LibGDX Background size wrong in Android

1 Answers