Libgdx background issue

Question

So i am creating a splash screen and i want the background to fill the whole screen.

But by using this code it does not work, it only fills a portion of the screen.

Here's the code:

For initializing the camera & other stuff:

public SplashScreen(Jump game)
{
    this.game = game;   

    cam = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

    cam.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

    sb = new SpriteBatch();
}

And here is the code for drawing the background to the screen:

public void render(float delta) 
{
    Gdx.gl20.glClearColor(0.2F, 0.6F, 1F, 1F);

    Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT);

    cam.update();

    sb.begin();

    sb.setProjectionMatrix(cam.combined);

    sb.draw(Assets.splash_spr_background, 0, 0);

    sb.end();

}

And lastly here is the code for initializing the background sprite:

public static Texture splash_tex_background;

public static Sprite splash_spr_background;

public static void init()
{   
    splash_tex_background = new Texture(Gdx.files.internal("Splash Screen/background.png"));

    splash_tex_background.setFilter(TextureFilter.Linear, TextureFilter.Linear);

    splash_spr_background = new Sprite(splash_tex_background);
}

This does not work obviously (that's why im posting this) and here is how it looks when i run the program:

What it looks like when i run the program

And now my questions are the following:

·How do i make the background fill the whole screen?

·What have i done wrong/forgot to type?

Usually you would edit/reformulate your first question. If that's not possible, then write a new question, but at least close the others... — noone, May 13 '15 at 17:23
I will close the others right now but focus on the question please, i really need this fixed. :) — Adam Brodin, May 13 '15 at 17:26
The problem is that your image is not the same dimensions as the window (sprites do not automatically resize to the window size), and you can fix it by using a Viewport. Haven't you been told that in your other copies of this question? — Tenfour04, May 13 '15 at 17:36
@Tenfour04 Yes but i do not understand how i implement them or use them to make the sprite fill the whole screen, everyone just redirects me to the documentation when does not help me get started. — Adam Brodin, May 13 '15 at 17:42

score 1 · Answer 1 · answered May 13 '15 at 18:49

A Viewport manages the camera's dimensions so you can work in your own world units and not worry about the size and shape of the various screens your game will be played on. You instantiate the Viewport by giving it the fixed width and height of the game that you want to be visible. (Does not apply to FillViewport, but just don't use that one.)

So the fixed width and height are constants that should not be defined based on the graphics.getWidth() for example. Just declare them as fixed constants at the top of your class.

private static final float WORLD_WIDTH = 1280;
private static final float WORLD_HEIGHT = 720;

In your case, you have a fixed background size. In order for that to work on all screens, you would need to use a StretchViewport or a FitViewport. These have the downsides of distorting your game or putting black bars around the game, respectively.

So I recommend using an ExtendViewport instead, but then you will need to do something different with your background. For example, if you're using a 4:3 world size ratio, draw a 16:9 background image that is the same height as your world height. Or if using a 16:9 world size ratio, draw a 4:3 background image that is the same width as your world size. These are the two extreme screen ratios for phones and tablets.

But to continue the example simply, let's just use a StretchViewport.

Set it up like this:

Viewport viewport;

public SplashScreen(Jump game)
{
    this.game = game;   

    cam = new OrthographicCamera(); //don't need to give your camera dimensions. Viewport will manage its size

    viewport = new StretchViewport(WORLD_WIDTH, WORLD_HEIGHT, cam);

    sb = new SpriteBatch();
}

Then in your resize method, you tell the viewport to update the camera based on what the window's dimensions are:

public void resize(int width, int height) {
    viewport.update(width, height, true); //Put true here if you want (0,0) aligned with bottom left corner of screen
}

Libgdx background issue

1 Answers1