search

RavioliMavioli / malware-slayer

Action platformer and terminal simulator game made in Godot Engine
Apache License 2.0
85 stars 5 forks source link

Reorganize terminal interface using containers #2

Open dfgworm opened 6 months ago

dfgworm commented 6 months ago

Godot's UI system really shines when you use Containers as your first go-to for everything. It becomes a breeze once you mingle with them a little bit.

Most things can really be boiled down to a bunch of BoxContainers and MarginContainers. PanelContainers can be used to beatify things. There is also a bunch of other more specialized containers: GridContainer - can sometimes nicely replace a bunch of BoxContainers, but only sometimes. ScrollContainer - a scrollable thing, very easy to use. TabContainer - a rectangle with children as tabs, works really well. SplitContainer - creates a movable split between 2 children. plus some more, it's worth randomly checking new things out and not just containers. Godot has a lot of neat features.

Firstly, do not be afraid of nesting a large amount of containers in each other and actively changing how things are parented, it's completely normal. In scripts, do not rely on exact paths, instead right click important nodes and select 'Access as Unique Name'. This will allow you to easily access these nodes from code in this scene using %. For example var title: Button = $TTY/Text/Title/HBoxContainer/Title can be changed to var title: Button = %Title after that you can shuffle Title around as much as you want and introduce more containers as necessary. Obviously there can only be one node with the given name marked as Unique in the scene. This will work as long as script is within the same scene saved as a single PackedScene. Though such nodes can also be accessed externally using get_node. terminal.get_node("%Title")

Second, containers often rely on children for their own sizing. To get things to work exactly how you want you can use children Layout properties: custom minimum size, shrink direction, expand flags and stretch ratio. Those things can be hard to explain, just experiment with them on your own. If it doesn't seem to help, try nesting more containers.

I would suggest remaking terminal interface with just containers, without regular controls and their annoying anchors and position transforms. I think those are only useful when a bunch of unrelated things are placed on completely arbitrary points of the screen, like placement of main interface elements on user screen.

dfgworm commented 6 months ago

Not planning to do this myself, just a suggestion. Would be good practice i think.

dfgworm commented 6 months ago

Btw, you are not supposed to use Node2D nodes like Sprite2D in interface. There is TextureRect control for that. Node2Ds don't have some useful UI things like layout properties.

RavioliMavioli commented 6 months ago

Thank you for the suggestion and for providing more information about containers and nodes!

The terminal UI was a template and still not fully done yet. So I just slapped bunch of controls and nodes there. 'Access as Unique Name' would be very helpful when creating nested containers. I will refactor and implement them soon.