Unreal's Official Unofficial Menu System

Learning Unreal 5 has been a bit of an emotional rollercoaster. I've been thouroughly impressed with the tool. Unreal 5 has so much built in over the years by the legion of more experienced game devs; whom carved out a path through the treacherous jungle of technology.

About once every other week I say "wow! I can't believe that (random functionality I'm taken by) is built-in!" However, at least once a day I get supremely frustrated by the Unreal way of doing things, usually accompanied by a well placed vocal curse.

CommonUI isn't gonna meet W3C standards

This is actually okay, but I need to say it outloud to get it through my web developer skull; "CommonUI is not a web framework, this UI isn't going to run in a web browser".

The reason this matters so much is that HTML, CSS, and javascript are a well oiled symbiotic machine that has been running human interfacing visuals for decades. Since I work with those well oiled tools for building dynamic and complex user interfaces, my expectations for other interface building tools reach for the sky.

Lowering those expectations was the first step in making real progress with the CommonUI. I had to let go of pixel perfect control over the screen because of some kind of automatic resizing algorithm built-in. The designed menu was supposed to slide out and (pixel) perfectly join another part of the menu.

This became stupendously difficult to troubleshoot and develop since Unreal doesn't have a way to specify screen size in play mode! Leaving me to manually size my window to simulate alternative resolutions like 1280x720. If you haven't ever tried to size a window manually to an exact size, then continue to never do that; you've found the better way to live life!

Unreal UI widgets are quite difficult to simply set a size or even ratio. I think because of the aforementioned automatic resizing logic. Similarly to HTML and CSS, we could stuff the actual elements like text and images within horizontal/vertical boxes. Then wrap those in a size box. Wait, don't forget to wrap size box into a scale box, and if you did forget... Delete the entire widget and start over because Unreal's editor doesn't let you edit the first child in a UI blueprint!? FURY.

CommonUI is the best thing since sliced bread

Automagical controller support! Yeah, it JUST WORKS despite whatever wacky menu design I come up with. I nested a custom animated slideout drawer within Unreal with CommonUI's activatable widget, and wouldn't ya know it just works the first time with no additional effort on my part.

If you've never programmed a controller input system before, then know that automagical controller support is a MASSIVE workload removed from our plate. This alone almost makes it worth the aforementioned pains.

Another super awesome win is the automatic support for sharing styles and typical states such as hover, pressed, disabled. Dealing with UI state is always a heap of code and/or configuration tracking. CommonUI having it so intuitively built-in is a very lovely foresight indeed. This does come with the added overhead of extra assets per visual state, but I'll take that for the great reduction in complexity.

Combining UI Material Shaders with CommonUIs styles is a mega win. Translating some of my GLSL (shader language) from this blog website into HLSL (another shader language) has resulted in some very smooth animated menu icons and interactions all run on the GPU to boot!

CommonUI curb stomps UnityUI

So no matter what woes I may bring up or run into about CommonUI, all of those are surmountable. There is always a performant, functional, supported way forward. Usually it is a matter of my making a paradigm shift from how I do web UI development to Unreal5 CommonUI's way.

Unity's UI was so bad it may as well been non existent. The previous SteelPinon client had our own custom 3D UI where I was literally tracking the mouse position with ray casting and collision checking on a second render-culled camera!

Needless to say this was alot of math to just get something simple like "click a button", not to mention other states like hover/disabled/pressed had to be custom wired too. This was a deep dark dive. I'll say that the Custom 3D Unity UI we had built did work, but it was super cumbersome to troubleshoot and complex to manage. (it did have perfect pixel control tho - hahaha)

Mike n Leo Fruits of labor

Mike designed this wonderful mechanical eagle pinion ages ago. I spend so much time working through problems within the SteelPinion project, that it can be difficult to recall how much time has passed since its original conception and illustration. Once this design got into Leo's hands, it was modeled within a fortnight. Truly exceptional work from both of these artists!

What's Next

Leaving Unity was hard, but we are starting to see some light with the Unreal 5 engine. The focus is going to be on fleet building, which would implement the models being created. Having the fleet builder working would be half the game! Since at the end of the day, SteelPinion is meant to be one-part high quality fleet builder and one-part tactical battle simulator.