I wanted to create a resizable window like this:
To achieve it, I created a square with borders and round corners and divided it in 9 separate parts like this:
Then, in Godot, I created 9 TextureRect nodes with those separate images and a parent node (which is a Control node). I set the anchors of the TextureRect nodes that represent the corners to Top Left, Top Right, Bottom Right and Bottom Left, so when I resize the parent the corners remain in the same position. After that, I activated the "Expand" property of the rest of those TextureRect nodes. And finally I set the anchor of the TextureRect in the center to Full Rect and the TextureRect nodes in the laterals to Left Wide, Top Wide, Right Wide and Bottom Wide, in a way that I achieve the effect of the first GIF.
In my first attempt, I configured that hierarchy in a way that the sizes of the TextureRect nodes are exact and no parts of the square overlap. That means that the parent node had the same area than the sum of the areas of its children. But in some devices (iOS and Android devices in my case) this happened:
Maybe it's hard to appreciate, but there's a transparent line at the bottom of the square.
My straightforward solution was to make each part overlap, so I make sure there are no transparent lines in my square. But I found one small issue with this approach. As soon as I modulate the alpha channel of the parent, this happens:
When 2 parts that are semitransparent overlap, their alpha channel gets mixed and change their color, showing the square structure.
My question is: how can I avoid this latter thing to happen? is there any better approach to make resizable windows?
Thanks in advance.