Popcar's Hub

Creating GodotOS - Devlog 1

GodotOS is a fake operating system interface I'm creating in Godot 4. It's a proof-of-concept project that, while it may never be used in a serious project, proves that Godot is a fantastic tool for creating complex user interfaces. It's also a great exercise and learning opportunity.

I've always been a fan of spoof operating systems, whether it be Windows XP clones when flash games were a thing, or modern fake operating systems in games like Kingsway and Hypnospace Outlaw. I've gotten comfortable enough with Godot's UI system that I finally decided to make my own.

Goals

From the start I decided GodotOS will be a toy, not a serious project. It's something for people to mess around with for a dozen minutes and maybe play some games on. I didn't want to promise too much since I wasn't sure how far I could take this project, but to start I wanted to put simple goals to create a prototype I can actually show off. This includes:

I've managed to finish all of these in just one week, which is better than I expected!

Getting Started

Making an OS interface is a huge task. I broke it down and created a priority list of things to implement. First, I created a simple layout for folders on the desktop. I then created a flow container and put the first file in it. When it's double clicked, it would print to the console.

That's good enough on files for now. I started creating a window, which is just a panel. I removed the print and made double clicking the file instantiate a new window. After that, I added a top bar for the window that you can click and hold to drag around by simply following the mouse when held.

This went on and on for a while. It's important in development to keep things as simple as possible and slowly build everything on top of each other rather than try making everything at the same time. I generally used panels for the vast majority of the UI, since they're easy to deal with and have flexible theming.

End of day one!
Screenshot showing two windows and a taskbar.

Smooth Sailing

As I'm adding more functionality I make sure to Tween everything to make actions aesthetically pleasing. Tweening creates a smooth transition from one thing to the next, so simple actions like opening a new window, minimizing a window, pressing the start button, focusing on a window etc. all use Tweens for fading and moving the window slightly. Even though there still isn't any theming done for GodotOS, it already feels polished and usable. I actually created a project to compare all Tween types a while ago, which was great exercise leading up to this.

With common functionality done, adding new features was a breeze. With inherited scenes (essentially prefab variants if you're a Unity person), I could copy the window I made and quickly create variants of it. Now I had a file manager, a text editor, and an image viewer!

The text editor is just a Window with a TextEdit component.
Screenshot showing how the text editor is made.

Problem #1: Centering Text Vertically

Of course, not everything can work flawlessly from the first try. For one, I forgot how to center RichTextLabels vertically because Godot still doesn't have a proper way to do it. I needed it to center file and folder names. After a lot of back and forth (and taking a short break to rant about it on Discord), let me tell you how to do it proper.

  1. Turn on Fit Content in the RichTextLabel's inspector

  2. Set the X custom minimum size to be your default size

  3. Add a CenterContainer as the RichTextLabel's parent and move it if needed. Your label and container will resize as much as needed vertically downwards.

  4. If you need to clip your label (to stop it from extending vertically forever), add a Control parent to the CenterContainer, size it to cover your boundaries, then turn on Clip Contents

Et voila.
Screenshot showing vertically centered text

Problem #2: File Managers Are Hard

I had a bunch of issues with the file manager since GodotOS deals with real files and folders. I discovered slowly that my strings for paths weren't done properly and would sometimes have an extra / or miss a file's extension.

The real problem though was editing file and folder names. This was a lot harder than expected, because it turns out I had to reload a lot of things to not cause errors and bugs.

There are a few other edge cases but the short version is that I need to update any window that's related to the renamed file/folder with the new path, and update the title. This took a while and at some point I considered if it was even worth implementing renaming files. After some trial and error I finally managed to fix it by looping over every window, checking it, and refreshing it if necessary. Is it efficient? No, but who cares? It's not likely you'll have more than 5 windows open at a time anyways.

What I didn't manage to fix is the TextEdit field. It turns out there's no way to align a TextEdit like a RichTextLabel, horizontally OR vertically. I've yet to find a solution, but I have seen a hilarious suggestion to make the text invisible and instead update the RichTextLabel every time you write a letter.

Not centered...
Screenshot showing the disappointing-looking TextEdit

Problem #3: Texture Masking Is Still Hard

I had to mask textures to create the boot animation (which you can see in the first few seconds of the cool video at the top of the page). An easy way to mask sprites/textures has been often requested for Godot, but unfortunately there still isn't an easy way to do it for Control nodes like TextureRect. I had to resort to a roundabout way of using sprites and a canvasgroup and scaling it properly with code.

I really hope the proposal gets accepted and someone does work on an easier way to mask in the future. The current implementation is obscure and annoying, but hey, at least it works.

Final Thoughts

Creating a GUI in Godot is just a joy. There are a few odd limitations here and there, but it's hands down the most intuitive UI system I've used, even compared to professional tools like .NET

I'm quite happy with how well the project is going so far in the ~1 week of work put into it so far. The next step is to add a few games within windows via Viewports, but that can wait until after I take a break.


Thanks for reading! You can find more updates on this project in the Godot discord / Showcase channel.

By the way, I'm looking for a job as a Godot game developer. Please contact me if you're interested.