0 votes

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.

asked Feb 17, 2019 in Engine by Samuel Pedrajas (27 points)
edited Feb 17, 2019 by Samuel Pedrajas

1 Answer

+1 vote
Best answer

I just found a node called NinePatchRect that does exactly what I needed. I didn't know this functionality comes out of the box with Godot.

answered Feb 17, 2019 by Samuel Pedrajas (27 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.