First Iteration of GUI

Godot's GUI

Godot Engine provides a built-in GUI system which can automatically rearrange, resize and rescale Control Nodes by using Container Nodes. We can have a lot of fun trying to understand them and how they work, especially by trial and error. But once you understand them you can do some neat interface behaviors.

Moon Cheeser GUI Concept

In Moon Cheeser I decided to make a very simple GUI with only the most necessary items being displayed:

• An advertising button
• The Moon or the Game Title
• A button leading to the Achievements Screen, which also is the Skins Screen
• A sound slider to manage sound output
• Play and Credits buttons, which will lead to the respective screens
• Some language options to localization

Implementation

The first iteration of the concept led to a thoughtful discussion about how it would look in other resolutions and how I could handle that.

By  studying how Containers work and what they are capable of, and also how  Controls use  anchors to rearrange and rescale the children nodes I came out with something that looked like a solution:

1. Use only Containers to automatically rearrange everything
2. A Margin Container will control the rectangle which will constrain the elements inside it
3. The Margin Container's size will always be the same of the game's window's size
4. The Margin Container will emit a signal every time its size change, telling the current size 
5. By using the signal I can trigger the visibility of the other UI elements, hiding or showing them

This is how I implemented it:

Then the other UI elements just need to check for this signal and do the proper behavior, for instance, that's what happens when the Node in charge of the left portion of the screen receives a signal and the resolution is equal or lower than a LOW resolution:

Result

This is more or less the result I could reach with this technique. I still have to change some behaviors and make a  mobile version, but I really liked it:

That's it, this is my report for this week's devlog. I hope you enjoyed! If you want to know more about it, check the Moon Cheeser wiki :>