App layout looks fine in preview but breaks on my phone

Godot Version: 4.4.1

Hello everyone!
I’m working on an Android game — it’s just a simple painting game.
The problem is: everything looks fine in the preview in Godot, but when I install the APK on my phone, the layout is off and elements are not in the correct place.
I’m new to Godot, so I really appreciate any help.
Thanks in advance!:folded_hands:




The layout looks kind of correct to me:

  • your text is centered at the top
  • your buttons are centered in a vstack in the middle

The main problem looks to me to be the cloud positions; they’re where they are in your preview, but they aren’t in screen-relative positions, so on the larger display they’re all crowded up in the corner.

Basically, your UI is being centered and your cloud decorations aren’t.

The fix for this is probably having the clouds store their position in normalized device coordinates, which is a fancy way of saying “positions between 0.0 and 1.0 for x and y”. In their script, in _process(), set their real positions to the normalized positions multiplied by the screen size. That way, they’ll always fill the whole screen regardless of how big it is.

1 Like