I was trying to create a basic UI in a 2D environment, because I am very new and wanted to learn about this.
As such, I began by laying a CanvasLayer node as a child of the base Node2D, a Panel as a child of CanvasLayer, the VBoxContainer as a child of that, and finally, a button inside it.
The main problem is that when I try to write inside the button, the text gets stretched out and occupies far more than it should. I haven’t touched any properties, and the problem presents itself both after resetting the engine, and trying to recreate it in a fresh scene.
Any help?
I think what I want to happen is more akin to the button “box”, the clickable area, to stretch horizontally, up to the limit of the VBoxContainer, but limit its height to that of the text. In turn, what it does is it scales the text up, and with it, the whole button.
VBoxContainer makes sense only if you have multiple Buttons as children to that container. If it’s just one Button, you can skip the container.
You should instead play around with the Anchor Presets
I’m sorry, that was a quick reproduction. Even with multiple buttons, they all have the same problem, being the same size and even overflowing from the bottom. Whenever I can, I’ll send another screenshot showing that.
In general, it is best to “Contain” UI elements. For example, switch (right-click → change type) your Combat_Actions_ui from a Panel to a PanelContainer. Since you appear to be using positioning as opposed to layout approach, give the PanelContainer an appropriate size and placement. For your VBoxContainer, set it to be a FullRect (expands to fill the PanelContainer.) For the buttons, you need to decide if they fill the VB evenly or not. I suggest that you allow each of them to expand in both directions. If you want a gap between them (recommended) then use the Separation override (say 10 for example). From an artistic perspective, you can use a TextureRect as a sibling (above) the VB giving your “panel” a nice background (or a Panel with your style of choice.) If it we me, I’d place a MarginContainer as a child of the PanelContainer, give is some nice margins (again, those overrides) and place the VB into the MarginContainer. Doing this way gives you some options for design. As for the fonts, you can change the font face, font-size, font-color to suit your needs from the various inspector sections. UI takes a bit practice; however, it’s fairly robust especially in terms of auto sizing and adapting to to display sizes.
