Java – libGDX – Texture drawing with SpriteBatch result flipping

When I try to draw a Texture using SpriteBatch, the result flips as follows:

Here’s what I did:
I created a MyRect object that draws the bounding rectangle and the image.

Here's the MyRect class preview:

public class MyRect {
private Vector2 position;
private int width;
private float height;

private Texture img;
private Sprite sprite;

public MyRect(int x, int y, int width, int height){
    img = new Texture("badlogic.jpg");
    sprite = new Sprite(img);

position = new Vector2(x,y);
    this.width = width;
    this.height = height;
}

public void draw(ShapeRenderer shapeRenderer, SpriteBatch batch){
     Gdx.gl.glClearColor(0, 0, 0, 1);
     Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    shapeRenderer.begin(ShapeType.Line);

 Draw Background color
    shapeRenderer.setColor(55 / 255.0f, 80 / 255.0f, 100 / 255.0f, 1);
    shapeRenderer.rect(position.x, position.y, width, height);

shapeRenderer.end();

batch.begin();
     batch.disableBlending();
    batch.draw(img, position.x, position.y, 
            width, height);
    batch.end();
}
}

The parameters ShapeRenderer and SpriteBatch are passed through the GameScreen class.

GameScreen Preview:

public class GameScreen implements Screen{
private MyRect myRect;
private ShapeRenderer shapeRenderer;
private SpriteBatch batch;
private OrthographicCamera cam;

public GameScreen(){
    myRect = new MyRect(10,10,50,50);

int gameHeight=100;
    cam = new OrthographicCamera();
    cam.setToOrtho(true, 136, gameHeight);

batch = new SpriteBatch();
    batch.setProjectionMatrix(cam.combined);

shapeRenderer = new ShapeRenderer();
    shapeRenderer.setProjectionMatrix(cam.combined);
}

@Override
public void render(float delta) {
     TODO Auto-generated method stub
    myRect.draw(shapeRenderer, batch);
}
}

Why is this? Am I doing something wrong?

Your camera is upside down because you called setToOrtho(true, …) instead of setToOrtho(false, ...).

Using an inverted camera works (it might be more comfortable if you’ve used Flash or other Y-down systems before), but you’ll need to flip all TextureRegions (aka Sprites): sprite.flip(false, true). 。 Alternatively, you can use TexturePacker to create a TextureAtlas (look in libgdx documentation) and set the flipY option so that it flips them for you ahead of time. Ultimately, to improve performance, you’ll need to use TextureAtlas anyway.

By the way, when you start drawing multiple instances of MyRect, you will need to move spriteBatch.begin() and end() and shapeRenderer.begin() and end(). Depart from the drawing method of a single MyRect, otherwise you will experience performance issues. Therefore, two drawing methods will be required (one for sprite batch processing and one for shape renderers).