This site is currently in read-only mode during migration to a new platform.
You cannot post questions, answers or comments, as they would be lost during the migration otherwise.
–1 vote

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.

in Engine by (28 points)
edited by

1 Answer

+2 votes
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.

by (28 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 Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.