Libgdx SpriteBatch won't position correctly on Screen

Question

I have been trying to position my spritebatch correctly regardless of screen size but it simply wont scale..This is what I want to achieve on every screen size..I want my Sprite Object to be positioned at the center of the x-axis on every screen size and on the first half of the screen (above dotted line) and have it scale as well..I have also noticed that spritebatch doesn't respect my gameheight and gamewidth instead opting for screenwidth and screenheight. The dimensions for my sprite anim are 900 by 700 and I am hoping it can scale for lower resolutions

Code :

batch.draw(animation.getKeyFrame(elapsedTime, true), 20, app.midPointY + 350, app.screenWidth, 465);

Answer 1

The problem I see in your code is that you have hard coded values (20, 350 and 465). These values don't take into account the resolution of the screen. Then, when you have different resolutions, you'll have different results... You won't have automatic scaling with hard coded values.

To resolve your problem, you need to take into account the screen dimensions in your code, using Gdx.graphics.getWidth() and Gdx.graphics.getHeight().

Let's say you want to position your animation on the top half of the screen, a space of 5% of the screen width on the left and on the right of your animation. Your code will become :

batch.draw(animation.getKeyFrame(elapsedTime, true), 
           0.05f * Gdx.graphics.getWidth(),    //Leave a space of 5% of the screen width to the left of the animation
           Gdx.graphics.getHeight()/2 + (0.9f * Gdx.graphics.getWidth() * animation.getKeyFrame(elapsedTime, true).getRegionHeight() / animation.getKeyFrame(elapsedTime, true).getRegionWidth()),    //For this, see explanation below the code
           0.9f * Gdx.graphics.getWidth(),    //Since in this example I decided to leave a space of 5% the screen width on each side, the width of the animation is 90% of the screen width
           0.9f * Gdx.graphics.getWidth() * animation.getKeyFrame(elapsedTime, true).getRegionHeight() / animation.getKeyFrame(elapsedTime, true).getRegionWidth());   //With this term, I keep the original proportions of the animation. The protportion being 900/700

You'll notice that the 3rd term is very long, and looks scary :

Gdx.graphics.getHeight()/2 + (0.9f * Gdx.graphics.getWidth() * animation.getKeyFrame(elapsedTime, true).getRegionHeight() / animation.getKeyFrame(elapsedTime, true).getRegionWidth())

Actually this code line is there because you want to automatically scale your animation to the screen. The term 0.9f * Gdx.graphics.getWidth() * animation.getKeyFrame(elapsedTime, true).getRegionHeight() / animation.getKeyFrame(elapsedTime, true).getRegionWidth() is only the definition of the height of your image based on the width of the image, that you can find as a last term of the batch.draw();

Actually, we could simplify the code by defining an animationRatio in the create() of your method. We could simply put animationRatio = 700/900 but once again, we have hard-coded values, and if one day for any reason you change your animation, and use an animation with different size, it will mess everything up. To resolve this problem, in your create(), just add this line

animationRatio = animation.getKeyFrame(elapsedTime, true).getRegionHeight() / animation.getKeyFrame(elapsedTime, true).getRegionWidth()

Then your code becomes much simpler and readable :

batch.draw(animation.getKeyFrame(elapsedTime, true), 
           0.05f * Gdx.graphics.getWidth()
           Gdx.graphics.getHeight()/2 + 0.9f * Gdx.graphics.getWidth() * animationRatio,    
           0.9f * Gdx.graphics.getWidth(),
           0.9f * Gdx.graphics.getWidth() * animationRatio);