Is there any way to Tile-map Control nodes to expand based on parameters or embedded text?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By PIZZA_ALERT

I would like to be able to make a control theme in Godot with a pixel art style. I would like to be able to design this theme simply by creating elements resembling tiles in a sprite (think the Tilemap feature!), applying this sprite to a Control node’s texture, and have a way of making this Control node (buttons, labels, etc.) expand to greater lengths/heights based on the amount of text inside or pre-set parameters for different scenarios.

This would look like me drawing the pixel art for 4 corners (up-left, up-right, down-left, down right) and 4 walls (up, down, left, right), then using a Godot built-in feature that works like the Tilemap editor where you tell Godot what chunks of the image/sprite are what, and then just setting parameters for different scenarios (max rect. height, width, text scrollability, etc.)

Like this, where the purple lines separate these 8 total zones, with the center (9th) zone being crossed out as it wouldn’t be used.

Any thoughts? Is this a thing? Should it be?

I may have found this as NinePatchRect.

PIZZA_ALERT | 2022-04-16 02:35

:bust_in_silhouette: Reply From: PIZZA_ALERT

I’m answering my own question! Yay!

The answer here is the NinePatchRect node, which is a control-type node. Add the node as a child to a new scene (or a StyleGuide scene if you’re doing that), set the texture as your text box (or whatever) image, and finally, set how many pixels are occupying each corner in the “Patch Margin” property in the inspector. Keep the Axis Stretch properties set to “stretch” in both directions. I’ve yet to figure out how to program with this, but for those also looking for something like this, I’m sure it’s all on YouTube!

One note, I’ve found that the Rect property allows you to shrink the texture image down by 33% (for instance, I can shrink my test image that is 100x100px to 66x66px) and this (obviously) shrinks the pixels down by this much as well. The border in the image linked in my original question is where I noticed this effect, so in order to prevent this in your project, set the “Min Size” property under the “Rect” dropdown to your original scale. Scaling above the original scale does not have this effect :slight_smile: