Understand LibGDX Coordinate system and drawing sprites

Question

So I am super stoked to start using LibGDX for my first android title for OUYA and PC, but I am running into some snags with LibGDX. (All of my questions can be answered by looking at source, but I am really trying to understand the design choices as well).

To start with, the coordinate system. I created a project using the Project Setup jar, and it creates an OrthographicCamera like so

camera = new OrthographicCamera(1, h/w);

From my reading, I understand that LibGdx uses bottom left corner for 0,0 and yUp. Fine. I see that it is pretty easy to change to y down if I want to, but I am not understanding the next bit of code that was created.

For the default sprite that gets created the position is set like so.

logoSprite.setOrigin(logoSprite.getWidth()/2, logoSprite.getHeight()/2);
logoSprite.setPosition(-logoSprite.getWidth()/2, -logoSprite.getHeight()/2);

When I run this basic program, I see the logo image I have added is centered on the screen. What I am trying to understand is why the values are negative in set position, and why is it using the sprite width and height instead of the graphics w and h of the view port? If I change to the screen width and height, then the image is drawn in some odd position in the lower right hand side of the screen.

My next question is sprite.setSize vs sprite.setScale. Why is the difference between the two? (They appear to do the same thing, except setScale leaves getWidth and getHeight unchanged).

Since my game will be using a 2D camera heavily for panning, zooming and rotation, I am trying to understand as much as I can about the libgdx framework before I start writing any code.

As a side note, I have a game development and math background and I have made several 2D and 3D games using XNA. I am finding LibGdx a bit frustrating as it does not abstract away OpenGL as much as I was expecting it to, and so far the 2D drawing I have been experimenting with seems to be more confusing than it should be!

I also wanted to note that I am planning to use spine for my animations. Should that change my choice to use y-up or y-down?

Answer 1

If you want to draw a sprite in center of screen, do this in your create method

logosprite.setposition(scrw/2-logosprite.getwidth()/2,scrh/2-logosprite.getheight/2);

here scrw is your viewport's width,

and scrh is your viewport's height,

this way your sprite will be in center of screen

sprite.setsize is used for setting size of the sprite and sprite.setscale is used when we scale a large/small texture so that its quality remains good in all devices(hdpi.mdpi,xhdpi,ldpi)..

no need to worry if you are using spine it works smoothly in libgdx..

Answer 2

You can use just this code if possible

    logoSprite.setPosition(Gdx.graphics.getWidth()/2 - image.getWidth()/2, 
Gdx.graphics.getHeight()/2 - image.getHeight()/2);

To center the sprite into the middle of the screen Where "image" is the Texture you have loaded/declared initially.

As for why it is coming in a odd position is due to the fact that you are using a camera. Which changes the view a lot just go through the documentations of libgdx about camera here

Answer 3

In my case, I needed to set position of camera and then call update() method. Then never forget camera's (0,0) is its center. Everything is being placed that way. My camera code:

   private void cameralariUpdateEt() {
        cameraGame.position.set(cameraGame.viewportWidth * 0.5f,
                cameraGame.viewportHeight * 0.5f, 0);
        cameraGame.update();

        cameraScore.position.set(cameraScore.viewportWidth * 0.5f,
                cameraScore.viewportHeight * 0.5f, 0);
        cameraScore.update();
    }

Call this method from inside render();

Answer 4

Step 1: Set the sprite origin to the position you would like it to rotate around.

// camera center point is (c.x, c.y)
logoSprite.setOrigin(c.x, c.y);

Step 2: make sure to set your sprite center to origin

logoSprite.setOriginCenter();

Step 3: Rotate your sprite

logoSprite.setRotation(Angle);

Step 4: Set the sprite position, [subtract half the sprites width and height to center the sprite]

logoSprite.setPosition(c.x - logoSprite.getWidth() / 2, c.y - logoSprite.getHeight() / 2)