Godot Version
4.2.2
Question
I have a square (512x512) texture for a box I’d like to use in varyiously-sized UI pieces. I think I can do this by theming a PanelContainer using a StyleBoxTexture and supplying my texture. There’s a handy 9-part grid that looked perfect for slicing up the texture to separate the corners from the continuous edges to avoid distortion. Unfortunately, adjusting the Texture Margins also massively distorts the texture:
What’s going on here? How can I adjust the texture margin without that huge distortion of the texture edges?
I’d probably help to have the texture you’re using. Or at least I couldn’t reproduce the issue with Godot’s icon.svg.
This is the texture I’m seeing the issue with:
Same. Trying to use a large texture to customize a panel. The preview looks weird, but everything works fine. I set the minimum panel size equal to the texture size to avoid distorting the proportions, and scale it. That mess. I think in my case two TextureRect in a container would be the best solution…
I might not understand your issue, then.
If you just supply a texture (without setting texture margins) the texture will be uniformly scaled up and down with your PanelContainer. So, if the container is 512 x 512 pixels big, the texture will display at its original size. If you scale the container down to 51 x 51 pixels, the texture will only display at 10% of its actual size, so the black border will measure about 1.6 pixels instead of 16. Nothing is distorted, though.
Now, if you set the left texture margin to 20, you tell Godot to copy over the 20 leftmost pixels as is, and don’t rescale them at all. Therefore, your container now has a minimum width of 20 pixels and yes, will distort the texture because everything beyond that 20 pixels margin is still uniformly scaled as before.
But if you set the margins big enough (around 45 pixels for your texture) and on all four sides, that problem will vanish, since those regions now include all the black border pixels and the only thing that gets uniformly scaled is the white center area now. That means, no matter how big or small your PanelContainer is, the borders will always look the same. It also means you cannot go beyond a container size of 90x90 pixels, however, since that is the reserved area for the texture margins you have set.
1 Like
