Resizing window messes up image placement

Godot Version

4.2

Question

tl;dr - resizing the window messes up image placement
image image

i was pretty proud. i made a hidden object game, one of those games where the background is a chair and the foreground is laundry and people have to see if they can find your laundry. It worked great until i made a Web deploy. The Web deploy for some reason doesn’t match the designed screen resolution, even though i hard coded it on Itch’s site. The background image (full window TextureRect) resized but the images that go on top of it didn’t move with it, ruining the whole “find the hidden object” part of the game.

i tried it locally by just resizing the screen and yep, i have a problem.

Any ideas on a solution?

Details:

  • Scene is all UI components
  • Hidden objects are texture buttons
  • Hidden objects are manually placed over the correct spot on the background image (can’t use anchors)
  • Hidden objects are clipped to the size of their texture. i had full-screen (and mostly blank) images originally and that played hell with button handling.
  • The hidden object is on both the background and foreground because i’m not good enough to do the art properly.

If anyone is super curious, here’s the code: GitHub - baylorw/Godot-Hidden-Object-Game: A tech demo of a hidden object game in Godot.

i don’t even know where to start with solving this.

You will have to use anchors in addition to placement, in your case I think you want all anchors to match as Full Rect.

You could also try limiting the viewport size and scale mode in the project settings.

This was really bothering me. i tried anchoring the individual objects and that didn’t work but your idea for project settings did.

Solution 1: Don’t let users resize the screen (Project → Project Settings → Display → Window → Resizable=off)

Solution 2: Set Stretch → Mode=Viewport

With the second, they can resize the UI all they want but the rendered area stays in the same aspect ratio and regardless of growth or shrinking the other items on the screen stick to where they’re supposed to be.

1 Like