Image Scaling inside a HBoxContainer

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

Hello,
I’m currently designing my main menu. However, I can’t wrap my head around how the HBoxContainer works. My Node hierarchy can be described as follows:

Menu Container (Type: Control) > HBoxContainer (Type: HBoxContainer) >
TextureRect (Type: TextureRect, SourceType: ImageTexture)

Whenever I add an image source which exceeds the container limits, my HBoxContainer is always resizing itself to fit the image. Furthermore I can’t change the height or the width of it by any means. I don’t know. Am I missing something?

:bust_in_silhouette: Reply From: njamster

Whenever I add an image source which exceeds the container limits, my HBoxContainer is always resizing itself to fit the image.

This is exactly what I would expect from it. However, if you don’t want this to happen, you should set the rect_clip_content-property to true on your “Menu Container”-node. Then, the rect_size of that node will define how much of the HboxContainer is rendered, the rest is simply cut off. If you want to scroll through it, change the type of your “Menu Container”-node into a ScrollContainer.

Furthermore I can’t change the height or the width of it by any means.

If, by “it”, you’re referring to the HBoxContainer: Why would you want to do this in the first place? It scales automatically with the content.

If you’re referring to the TextureRect: That’s indeed a bit unintuitive. Setting the rect_size- or scale-properties won’t have the effect you’re likely going for. What you can do instead, is setting the expand-property to true, selecting “Keep Aspect” as a stretch_mode and then set rect_min_size to your liking.

I’d like to add that the expand-property is NOT the v and h_expand properties under size_flags, but a property of the TextureRect class, at the top of the inspector. This cost me some time trying to figure out.

Unrelated, but “expand” seems like a bad choice of name for that property, since having it enabled also lets the TextureRect shrink, like I needed it to. “Resizeable” might be a better name for it.

astrosticks | 2020-03-14 14:57

But what if I want something that tiles, but also shrinks to the rest of the UI?

Cloud | 2020-10-26 19:54