Click detection with a keep aspect centered texture

Help UI
1

Godot Version

v4.2.1

Question

I’m trying to design a UI for a 2d pixel-art game that will work on multiple different aspect ratios. Through experimenting, it looks like the best way to do this is to make the UI texture “Keep Aspect Centered”. The problem is the “Keep Aspect Centered” option seems to completely ignore the whole UI positioning system, so if I for example add a button to that texture, the button will be in wildly different positions depending on the aspect ratio, completely defeating the purpose.

I then decided to look into just doing click detection via a script and forsaking subcomponents entirely since they don’t work with this system, but even trying to find the relative position of the click on the texture is extremely difficult because the click event’s position is relative to the size of the entire texture, not just the visible texture rectangle.

How is this option even expected to work at all in any real-life scenario? Am I missing something completely?

Example:

image
image978×553 3.82 KB

You can see the slots on the little backpack I want click detection for, and a button that’s a child of the texture. The button is way outside the bounds of the visible texture even though it’s a child of the texture.

2

I’m not sure if I fully understand what you mean but I tried this:

TextureRect (Stretch Mode “Keep”, Anchors Preset “Center”)
|- GridContainer
|-- ColorRect
|-- ColorRect2
|-- ColorRect3

When I resize the window, the grid container and its children follow the texture rect correctly and they don’t lose their center position when the aspect ratio changes. Anchors Preset can of course be anything depending on where you want to position it.

3

The problem is that it isn’t just the center positioning, it also has to fit the sizing on different aspect ratios. I was using HBoxs and the layouting tools, but even using anchors the size of the square attached is sometimes incorrect relative to the original texture.