The Power of Nine-Patching in Godot

AKA: stretching UI without ugly distortions :)

Ever tried resizing a UI panel and ended up with weirdly stretched corners? Using a NinePatchRect node can fix this by letting you define fixed corners and stretching just the “middle” of the texture — a great solution for your UI panels, buttons, and speech bubbles.

To use this tool, the idea is the following:

• Create a NinePatchRect node.
• Set its Texture property to the image you want to nine-slice. Ideally, this image should thus have corners and a “middle” area that can be stretched (or tiled) properly, no matter what size and ratio the UI element is.

• Use the properties in the Patch Margin section of the NinePatchRect node’s inspector to give Godot the size (in pixels) of the corners to keep as-is when nine-slicing.

And well, that’s it! You can now create as many variations as you want with multiple NinePatchRect nodes, and you’ll see that no…