如何将图像放在屏幕中央

Question

I am trying to put an image (playBtn) in the center of a screen, With the code below my result is more towards the top right. please see my code below

 public class FlappyBird extends ApplicationAdapter {

        Texture img;
        public static final int WIDTH = 1440;
        public static final int HEIGHT = 2560;



    }

Above, I have setup my WIDTH & HEIGHT which I believe is not the right way to do so. Still, this gives me the required values but I can't seem to work with the playbth and place it in the center

   public class MenuState extends State {
        private Texture background;
        private Texture playBtn;


        public MenuState(GameStateManager gsm) {
            super(gsm);
            background = new Texture("bg.png");
            playBtn = new Texture("playbtn.png");
        }



        @Override
        public void render(SpriteBatch sb) {

            sb.begin();
            sb.draw(background, 0, 0, FlappyBird.WIDTH, FlappyBird.HEIGHT);
            //sb.draw(playBtn, (FlappyBird.WIDTH / 2) - (playBtn.getWidth() / 2), FlappyBird.HEIGHT / 2);
            sb.draw(playBtn,(FlappyBird.WIDTH/2)-(playBtn.getWidth()),FlappyBird.HEIGHT / 2);
            sb.end();


        }
    }

Answer 1

Practically all objects are positioned from one of their left corners. So while the image itself appears to be unaligned, it is actually the top-left or bottom-left corner of the image that you have centered, depending on how your programming language works with the Y axis.

I threw a couple quick diagrams together to get a better visual representation. For this example, the Y axis increases downwards, so point (0,0) would be the top-left of the window instead of the bottom-left.

Say you have a window that is 200px wide and 100px tall, and you have a 20px by 20px object that you want to place in the exact center of the window. The general assumption is to place the object at half the width and height of the window, but doing so will get you a result similar to this:

This is, however, a very simple issue to fix. Simply position the object from half the width of the window, minus half the width of the object for the X axis, and half the height of the window minus half the height of the object for the Y axis:

As mentioned before, some programming languages differ where the Y axis increases upwards and decreases downwards. If this is the case for you, then you will have to take the bottom-left corners of your objects into account instead of their top-left corners, but I believe the equations should still be the same.