LibGDX: Parallax effect with tiled maps

Viewed 758

Need to make parallax effect in the game with LibGDX and tiled map. Background should move with different speed then foreground. In the docs https://github.com/libgdx/libgdx/wiki/Tile-maps said:

By rendering each layer separately and modifying the view for every layer, you can also achieve a parallax effect.

Current implementation: with PlayScreenVariantOne all works but background moving with same speed like foreground

public class PlayScreenVariantOne implements Screen {

    private TextureAtlas atlas;
    private OrthographicCamera gameCam;
    private Viewport viewport;
    private TmxMapLoader mapLoader;
    private TiledMap map;
    private OrthogonalTiledMapRenderer renderer;
    ...

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

        renderer.setView(gameCam);
        renderer.render();

        game.batch.setProjectionMatrix(gameCam.combined);
        game.batch.begin();

        player.draw(game.batch);
        game.batch.end();
        hud.stage.draw();

    }
 }

Parallax implementation: with PlayScreenVariantTwo foreground and background rendered with same speed. Parallax effect does not work! :*(

public class PlayScreenVariantTwo implements Screen {

    private TextureAtlas atlas;
    private OrthographicCamera gameCam;
    private Viewport viewport;
    private TmxMapLoader mapLoader;
    private TiledMap map;
    private OrthogonalTiledMapRenderer renderer;
    ...

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

        int[] backgroundLayers = { 7 };
        int[] ground = { 9 };

        renderer.setView(gameCam.combined, (gameCam.position.x - gameCam.viewportWidth / 2 - 2), gameCam.position.y - gameCam.viewportHeight / 2, gameCam.viewportWidth, gameCam.viewportHeight);
        renderer.render(backgroundLayers);

        renderer.setView(gameCam.combined, (gameCam.position.x - gameCam.viewportWidth / 2) / 10, gameCam.position.y - gameCam.viewportHeight / 2, gameCam.viewportWidth  * 10, gameCam.viewportHeight);
        renderer.render(ground);

        game.batch.setProjectionMatrix(gameCam.combined);
        game.batch.begin();

        player.draw(game.batch);
        game.batch.end();

        hud.stage.draw();

    }
 }
1 Answers

Did you try to simply multiply X (or Y, what ever you need) coordinate for background with factor:

  renderer.setView(gameCam.combined, (gameCam.position.x*0.5 - gameCam.viewportWidth / 2 - 2), gameCam.position.y - gameCam.viewportHeight / 2, gameCam.viewportWidth, gameCam.viewportHeight);

or

  renderer.setView(gameCam.combined, (gameCam.position.x - gameCam.viewportWidth / 2 - 2)*0.5, gameCam.position.y - gameCam.viewportHeight / 2, gameCam.viewportWidth, gameCam.viewportHeight);

I added that "*0.5", so background would move twice slower. Not sure which one of those 2 rows will give you better results - you have to try for your self, but that's the ide - multiply background coordinates, X or Y, which one you need to set different speed.

Related