libGDX repeated background texture drawing difficulties

Question

Like everyone else, I'm having trouble following how libgdx's coordinate transformations. I'm creating a scrabble-like game, and dragging a finger on the screen pans the camera. The tiles are Actors on a Stage, and I'm doing the camera transformations on the stage's camera. That all works. Now I'm trying to give it a fancy background for the tiles to sit on. I can't quite figure out the draw method to make it work.

//Assets class
static final Texture feltBackground = new Texture(
        Gdx.files.internal("felt_background.png"));
feltBackground.setWrap(Texture.TextureWrap.Repeat, 
        Texture.TextureWrap.Repeat);


//board rendering snippet
private void drawBackground() {
    batch.setProjectionMatrix(board.getCamera().combined);
    batch.begin();

    screenUpperLeft.set(0, 0, 0);
    screenLowerRight.set(Gdx.graphics.getWidth(),
            Gdx.graphics.getHeight(), 0);


    board.getCamera().unproject(screenUpperLeft);
    board.getCamera().unproject(screenLowerRight);
    batch.draw(Assets.feltBackground,
            0, 0,
            (int)screenUpperLeft.x, (int)screenUpperLeft.y,
            (int)screenLowerRight.x, (int)screenLowerRight.y);


    batch.end();
}

What I'm attempting in drawBackground is:

set boundary points to screen bounds
unproject those points into world space to find the region of the texture I should draw
draw that region to the screen origin

However, with the code like this I'm having various weird problems like the lower boundary of the background region starting offscreen, the upper boundary moving when the camera is zoomed, the texture panning faster than my finger's movement (although the boundaries of the background region pan correctly), the y axis pans mirrored, etc. Changing the code changes these symptoms, but I haven't found a pattern to try to get closer to being correct. Any words of wisdom for drawing like this?

Edit: Here are some screenshots to add clarity.

When I open the game, there is no background.

I can drag up, which moves up the upper boundary of the background (if there is a lower boundary, I can't ever find it)

I can drag the left boundary right, but like the bottom I can't ever find a right boundary (if it exists)

John John · Accepted Answer · 2016-11-29T07:24:57

Whenever you see weird synchronization issues between your camera and the stuff you're trying to draw, it's generally a symptom of confusing world coordinates with viewpoint coordinates (or vise versa) somewhere in your code.

You're using a SpriteBatch to do the rendering, right? When I look up the API for the version of SpriteBatch#draw() which you are calling, it says that those first two floats are the position that you're rendering the sprite in the world, and the four integers have to do with the source and height of the source image.

When you pass (0,0) as the position, it is drawing the image at 0,0 in your game world, which is not (0,0) on your viewport.

I would recommend a simpler approach- instead of trying to project or unproject the coordinates, set the draw location (those first two floats) to stage.getCamera().position.x and stage.getCamera().position.y.

libGDX repeated background texture drawing difficulties

1 Answers