Viewport & Camera settings

Question

For my first game in LibGDX and Android I got a Problem:

I have a background picture which is 2560px * 720px. The screen is 1280 * 720. How do I have to set the viewport and camera in order to get the following result: The picture is fited in height and shows the first 1280px in width.

I tried so many things and it really confused me.

Gamescreen.java

package com.joelbrun.jetskirider.screens;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.ui.Label;

public class Gamescreen implements Screen {


    public Texture jetski, wave, background;
    public SpriteBatch batch;
    public OrthographicCamera camera;
    public Label score;
    public static final int GAMESCREEN_WIDTH = 1920;
    public static final int GAMESCREEN_HEIGHT = 720;
    public static final int OBSTACLE_TYPES = 5;
    private Texture[] texture;

    @Override
    public void show() {
        texture = new Texture[OBSTACLE_TYPES];
        for (int i=0; i<OBSTACLE_TYPES; i++){
            texture[i] = new Texture(Gdx.files.internal("game/obstacles/obstacle" + Integer.toString(i+1)+".png"));
        }
        background = new Texture("game/background.png");
        jetski = new Texture("game/jetski.png");
        batch = new SpriteBatch();
        float aspectRatio = (float)Gdx.graphics.getWidth()/(float)Gdx.graphics.getHeight();
        camera = new OrthographicCamera();
        camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        //camera.position.set(GAMESCREEN_WIDTH / 2, GAMESCREEN_HEIGHT / 2, 0);


    }

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

        camera.update();
        batch.setProjectionMatrix(camera.combined);
        batch.begin();
        batch.draw(background, 0, 0, 1280*2, 720);
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
        //camera.position.set(GAMESCREEN_WIDTH / 2, GAMESCREEN_HEIGHT / 2, 0);
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {
        batch.dispose();
        background.dispose();
        jetski.dispose();
        wave.dispose();
    }
}

Answer 1

So I got the answer on Stackexchange from user VaTTeRGeR:

It should work if you change these parts in show():

viewport = new ScalingViewport(Scaling.fillY, GAMESCREEN_WIDTH, GAMESCREEN_HEIGHT, camera = new OrthographicCamera());

and add a resize method:

@Override     public void resize(int width, int height) {         int SCREEN_WIDTH = width;       int SCREEN_HEIGHT = height;

  viewport.setWorldSize(GAMESCREEN_WIDTH, GAMESCREEN_HEIGHT);
  viewport.update(SCREEN_WIDTH, SCREEN_HEIGHT,true);  }

It's important, that you set your Sprites height to GAMESCREEN_HEIGHT and you may need to move around your camera a bit but that shouldn't be that hard.

private void moveView(Vector3 v) {        camera.translate(v);        camera.update();    }

A big THANKS to him

Answer 2

Can't you just draw the image at 0,0?

private Texture backgroundTexture;
private SpriteBatch batch;
private OrthographicCamera camera;

@Override
public void show() {
  backgroundTexture = new Texture(Gdx.files.internal("backgroundIMage.png"));
  batch = new SpriteBatch();
  camera = new OrthographicCamera();
  camera.setToOrtho(false, Gdx.graphics.getWidth(), gGdx.graphics.getHeight());
}

@Override
public void render() {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    batch.setProjectionMatrix(camera.combined);
    batch.begin();
    batch.draw(backgroundTexture, 0, 0);
    batch.end();
}

This is not a complete class, but it should give you an idea of what to do. To move the image you would then just move it along the x-axis.