2
\$\begingroup\$

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();
    }
}
\$\endgroup\$
5
  • \$\begingroup\$ What does your code look like? \$\endgroup\$
    – jzx
    Aug 14, 2015 at 11:03
  • \$\begingroup\$ @jzx Updated... \$\endgroup\$
    – jobr97
    Aug 14, 2015 at 11:08
  • \$\begingroup\$ Why are you modifying GAMESCREEN_WIDTH and HEIGHT before passing it to the viewport? They need to be the same in viewport as to what you set your background-sprites height to. just leave that aspect ratio stuff away. \$\endgroup\$
    – VaTTeRGeR
    Aug 14, 2015 at 11:23
  • \$\begingroup\$ @VaTTeRGeR I updated the code and it still does only show a black screen \$\endgroup\$
    – jobr97
    Aug 14, 2015 at 11:30
  • \$\begingroup\$ You should have left your GAMESCREEN_W/H at 16 and 9. You just need to draw in world coordinates since you have applied your cameras projection matrix to your batch. Try batch.draw(background, 0, 0, 32, GAMESCREEN_HEIGHT); and change the stuff back to world coordinates. You could also upload the project to look at and try it out. (oh and change the 32 to something dynamically calculated or so) \$\endgroup\$
    – VaTTeRGeR
    Aug 14, 2015 at 11:45

1 Answer 1

2
\$\begingroup\$

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();
}
\$\endgroup\$
3
  • \$\begingroup\$ I dont have enough reputation to vote up, but thanks a lot :D \$\endgroup\$
    – jobr97
    Aug 14, 2015 at 11:59
  • \$\begingroup\$ No problem, does it work now? \$\endgroup\$
    – VaTTeRGeR
    Aug 14, 2015 at 12:03
  • 1
    \$\begingroup\$ yes! All perfect \$\endgroup\$
    – jobr97
    Aug 14, 2015 at 13:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .