Can't give my pictures the right location in libGDX

Question

I have this code here

 sb.draw(title, (PPlane.WIDTH / 2) - (title.getWidth() / 2), (float) (PPlane.HEIGHT / 10));
 sb.draw(playBtn, (PPlane.WIDTH / 2) - (playBtn.getWidth() / 2), PPlane.HEIGHT / 2);

This gives me a picture in the middle (playBtn) and a picture beneath it (title). But I want the picture title to be above picture playBtn. So what i did was:

 sb.draw(title, (PPlane.WIDTH / 2) - (title.getWidth() / 2), (float) (PPlane.HEIGHT / 1.2));
 sb.draw(playBtn, (PPlane.WIDTH / 2) - (playBtn.getWidth() / 2), PPlane.HEIGHT / 2);

I changed the number that divide PPlane.HEIGHT in draw.title so it would appear above playBtn, but instead it just dissapeared.

I also tried to change the cam.setOrtho to True with the first code but that didn't work either.

What should I do to fix this?

Answer 1

In order to make the title appear with the image you need to use the location of the image plus an offset. The reason (PPlane.WIDTH / 2) - (title.getWidth() / 2) works to center the image is because you're finding the midpoint of the PPlane and then subtracting an offset equal to half of the title's width which has the effect of centering the image horizontally.

So to find the correct vertical positioning of the title you need to use the vertical position of the playBtn (which in this case is PPlane.HEIGHT / 2) and add an offset of the height of the playBtn so that the title is positioned just above it.

The final code should look like:

sb.draw(title, PPlane.WIDTH/2 - title.getWidth()/2, PPlane.HEIGHT/2 + playBtn.HEIGHT );
sb.draw(playBtn, PPlane.WIDTH/2 - playBtn.getWidth()/2, PPlane.HEIGHT/2);

You may need to adjust the offset by a few pixels to account for transparency around your title text.