Java – Libgdx fills the screen with images

Libgdx fills the screen with images… here is a solution to the problem.

Libgdx fills the screen with images

I’m new to Libgdx and had some issues filling the image to the entire screen. If I import a 1900×1200 image, it fills the screen, but if the image is 1024×512, the image does not stretch to the screen. Here is the code I used. I thought “background.setSize(stageWidth, stageHeight)” would scale the image to the screen, but that didn’t happen. Can you tell me what I’m doing wrong? I’ve tried toggling “setFillParent” (as described in another article) but it still doesn’t work. Also included here are screenshots currently displayed (on desktop implementations and Android): http://tinypic.com/r/b7j20z/8

Thanks for your help!

package com.mygdx.game;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.scenes.scene2d.actions.MoveToAction;
import com.badlogic.gdx.scenes.scene2d.ui.Image;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.StretchViewport;
import com.badlogic.gdx.utils.viewport.Viewport;

public class MyGdxGame implements ApplicationListener{      

private Stage stage;

@Override
    public void create() {        
        stage = new Stage();

float stageHeight = Gdx.graphics.getHeight();
        float stageWidth = Gdx.graphics.getWidth();

 Background
        Texture board = new Texture(Gdx.files.internal("data/frame.png"));
        Image background = new Image(board);
        background.setOrigin(0, 0);
        background.setSize(stageWidth, stageHeight);
        background.rotateBy(0);
        background.setPosition(0, 0);
        stage.addActor(background);

}

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

@Override
    public void render() {       
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
    }

@Override
    public void resize(int width, int height) {
    }

@Override
    public void pause() {
    }

@Override
    public void resume() {
    }

}

Solution

After a little thought, the most likely cause of your problem is that you added the image directly to the root of the stage. The root of the stage is a group that does not handle any type of layout management, which can be the reason why your image is not sized correctly.

I recommend that you create a Table instead, and then use setFillParent() so that it takes up the entire screen. You can then simply use table.background(drawable) to set the background using the table’s built-in function table.background. However, you must remember that Texture does not count as a table drawable, so you must use the class TextureRegionDrawable to get a valid drawable background. Here is an example:

table.background(new TextureRegionDrawable(new TextureRegion(board)));

Related Problems and Solutions