Viewport and Camera setting

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;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;

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;

    Viewport viewport;
    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();

        viewport = new FitViewport(GAMESCREEN_WIDTH, GAMESCREEN_HEIGHT);
        viewport.apply();
        camera.position.set(GAMESCREEN_WIDTH / 2, GAMESCREEN_HEIGHT / 2, 0);
        //camera.position.set(0,0,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, 5119, 720);
        batch.draw(jetski, background.getWidth()/2, background.getHeight()/2,128,128);
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
        viewport.update(width, 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

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();
}