libGDX - Drawing Texture via SpriteBatch Result Flip

Question

When I tried draw a Texture using SpriteBatch it was result flip like this:

Here what I do: I create MyRect object which draw bounding rectangle and an image.

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

Parameters ShapeRenderer and SpriteBatch pass by 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 happen? Am I doing it wrong?

Answer 1

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

It is valid to use an upside-down camera (which might be more comfortable if you've used Flash or some other Y-down system before), but then you need to flip all your TextureRegions (aka Sprites): sprite.flip(false, true) . Alternatively, you can create a TextureAtlas using TexturePacker (look it up in libgdx documentation) and set the flipY option, so it flips them ahead of time for you. Eventually, for performance you will need to use a TextureAtlas anyway.

By the way, when you start drawing multiple instances of MyRect, you are going to need to move the spriteBatch.begin() and end() and shapeRenderer.begin() and end() out of the individual MyRect's draw method or you will run into a performance problem. And as such, there will need to be two draw methods (one for sprite batch and one for shape renderer).

Answer 2

apparently, the only thing I see different than how I would do, is try to change: this meybe if it works"for test"

cam.setToOrtho(false, 136, gameHeight);

this is how I use the camera.

I do not know whether to use true, you have to do some different way, to draw the batch, in anyway. if the camera false, it looks good, I think it has to flip the image before to draw uv