Hello. I am Zach777. A dev for Moonwards and Godot enthusiast. I wanted to share some insights about Godot UI resource and scene handling that I have implemented in Moonwards. There are also a couple useful tricks you can at the end of the post that will let you easily change the font used or the font’s size while in game. But first I wanted to talk about the method of UI theme and resource handling we are using at Moonwards and it’s benefits.

It is important for open source projects to have clear planning in how everything is set up. Newcomers should be able to look at the section of the project that they are interested in and understand exactly what it is doing and what it relies on. People working on UI in Godot should expect no less. Unfortunately Moonwards’ UI setup did not live up to that at first. Whenever a UI wanted to make a new element to override something in the main theme we would copy the main theme and change the one element. This method of theme handling grew naturally before I had joined the team. It was always a mess to deal with but it was not until the Hud was made that I realized we should refactor. Thankfully there is a theme handling method that is fairly easy to implement and works well with Godot’s OOP resource handling.

Godot UI can inherit visual settings from a parent’s theme. Which lets you make one theme that all UI use. The new UI theme handling standard Moonwards uses has one main theme that all other themes use. A UI node will be given a small theme with only a few classes in it whenever the UI node needs items not found in the main theme. This lets Godot use the parent theme’s classes on UI when the child theme does not override the parent element. This is because Godot lets a UI scene inherit the settings of a theme in it’s parent even if it has a theme of it’s own. The parent’s theme’s class will be used as long as a child node’s theme does not contain it.

A good example of how we use this feature of Godot’s UI is in the main menu.

In the main menu are large rectangular buttons I call prime buttons. These buttons do not look like any other buttons in the Moonwards project. The best way to handle this using themes is to set each button to use a PrimeButtons theme while the scene root uses the main Moonward’s theme. This allows the prime buttons theme to only change the specific items it needs to without overcomplicating things.

Notice how many item classes are in the Main theme in the top picture. Now look at how the Prime Buttons theme in the bottom picture only has 2 item classes in it (Button and Label). A node with the PrimeButtons theme will override the Button and Label classes in MainMoonwards theme but inherit all the other MainMoonwards theme classes.

Later down the line I would like to implement some useful tricks that are possible in the Godot engine into Moonwards. I will talk about these now.

One of them is easily changing font size in a running game. All you have to do is edit the resource that all your UI nodes are using and the change will percolate to the other nodes. Just make sure that the resource is not ‘local to scene’ as that option disables the ability for all nodes to inherit the resource changes.

We can even completely change what font is used while the game is running lol. All you have to do is create a new DynamicFontData and pass that to all DynamicFont’s your game uses’ font_data propery.

If you want to see a basic example of the code needed to implement the tricks I just wrote about, please download the project files here: https://github.com/Zach777/Godot-Font-And-Size-Changing-Example

Well thanks for reading all that. This has been my first time writing in a blog style format for my own fun. I hope it was not too evident it was my first time lol. Either way, here are the social media accounts that are relevant for this post below.

Zach777’s Mastodon account: https://fosstodon.org/web/accounts/280522 Zach777’s Twitter account: https://twitter.com/xXZach777Xx Moonwards Twitter account: https://twitter.com/moonwards1 Moonwards community : https://lemmy.ml/c/moonwards

If you have a Reddit account, please consider upvoting the post on Reddit: https://www.reddit.com/r/godot/comments/lz6ymm/some_tips_tricks_and_best_practices_for_ui/