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.
0 votes

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?

Godot version 3.4.4.stable
in Engine by (48 points)

I may have found this as NinePatchRect.

1 Answer

0 votes
Best answer

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 :)

by (48 points)
edited by
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.