Rebuilding UI

Yesterday I totally rebuilt the UI. It took about 7 hours, while I was learning how to operate with Godot's popup system, and figuring out how to make buttons that bypass the default behavior.

Before I had a menu on the left corner and a menu on the right corner. They worked, but they weren't very expandable or modular. I basically had one giant scene that handled all UI. Then I had this awkward popup that handled uploads. I needed to have messages on screen to teach people how to play. It was messy.

Now I have a single menu that easily hides away when you don't want it.  It easily moves around. I don't need to teach players how to use the UI because it's pretty similar to what people already do. I don't need to pin instructions on the screen because the thing most people do when they don't know what to do (click) is the thing you're supposed to do.

And the best part is it's highly modular. I can add all kinds of features quite easily if I need to. Each tab in the menu is functionally it's own little scene so adding additional tabs is trivial. I have learned how to use a lot of UI tools within Godot to make menus and systems pretty easily.

Some things I'd like to do if I continue this project:

• Switching scenes: easily switch between color swatches, various preview images, and custom uploaded scenes
• Set render resolution: move the "scene" to a viewport with an adjustable resolution and apply the shader as a viewport post process system. This will let you change resolution and have an image at a higher or lower resolution from the screen resolution.
• Download button: create a button that make "downloading" the current viewport as a PNG. This will make "screenshot" workflow easier. The workflow as it stand is "drag image into program, configure the pallet, take screenshot, use another program to crop/fix that screenshot." Those last two steps should just be a single step, but doing that might be challenging. I'll have to write the communication between Godot and Javascript to convert an in-engine image to a downloadable file.