positioning a sprite in libgdx

Question

I've got a problem to draw a sprite to my project.

I have a map (960x900) divided into tiles (64x64).

As you can see in the picture, when i click on the bottom left corner of the purple square, the position is (0;0), and when I click on the top right corner of purple square, the position is (36;47)

The problem is that the picture of the purple square has a size of 32x32, and when I draw this picture with libgdx on the screen, the size doesn't match.

Another example: the square with black border has a size of 64x64. So if I draw the purple square in front of the black, the purple should be the half (in height and in width) of the black, no?

Does anyone know why libgdx resizes the purple square?

Sprite sprite = new Sprite(new Texture("assets/purpleSquare.png"));

i draw it in a method

public void render(SpriteBatch batch) {
    batch.draw(sprite, 0, 0);
}

I don't know why the picture is resized by libgdx.. I have also tried to do

batch.draw(sprite, 0, 0, width, heigth);

To precise the sprite's size but it doesn't work too..

Answer 1

The size on screen bears no direct relation to the size of the original image. When you draw a sprite you provide the SpriteBatch with a position, width, and height in world coordinates. The sprite will be stretched to fit these world coordinates, regardless of the original image size.

When you click the screen, you are clicking in screen coordinates. The relation between screen and world coordinates is determined by the projection matrix that you use with the SpriteBatch. The projection matrix is typically controlled with a Camera or Viewport object, which you can use to convert between the two coordinate systems using the project and unproject methods.

Answer 2

I'm happy to see that after many hours i found a solution, even if i know which is not correct.

I would like some help to understand the problem's origin.

With this parts of code :

public void update(float delta) {       
    batch.begin();

    drawBackground(); // Draw the background
    drawButton(); // Draw the play/pause button

    batch.end();

    drawMap(); // draw a tmx map made with tiled

    batch.begin();

    if(!world.isInitial()) {
        renderMonster(); // method which draw the monster
    }

    renderTower(); // method which draw the tower's level

    batch.end();
}

1. I don't understand why i have to do "batch.begin()" and "batch.end()" twice.
2. I dont' understant why with this code, the purple square is resized.

With this code :

public void update(float delta) {       
    batch.begin();

    drawBackground();
    drawButton();

    batch.end();

    drawMap();

    ------->sb = new SpriteBatch();

    sb.begin();

    if(!world.isInitial()) {
        renderMonster();
    }

    renderTower();

    sb.end();
}

this line that i add fix the bug with the purple square. If i work with two SpriteBatch (because with one, if i reinitialize SpriteBatch in update method, my pause/play button diseapper) and i initialise the second (SpriteBatch sb) in the update method.

It is correct to initialise a SpriteBatch every time i'm passing on the update method ? There's no method with a SpriteBatch to avoid this problem ?