Greetings.

Recently I (hastly) took upon myself to develop an simple system for managing UI in a cross-platform game.
As with everything, it turned out to not be simple at all.

I know about layout elements, anchoring and the usual fluff.
But I can't quite decide how to achieve a unified UI look reusing as many complex UI elements as possible, accounting for platform specific features whenever possible in a PC+Mobile cross-platform game.
The most obvious example of what I need I found in Genshin Impact, screenshots from which I'll use abundantly.
I have same screens but one for console and one for mobile, both in 1920x1080

I'm looking for the following qualities of such a system:

• Different assets and font size (icons and text for menu items can be small on PC, but need to be bigger relative on mobile due to smaller screen size)
  Example below has bigger icons and text on mobile, including item, character and even crafting background overlay. Text has a bigger font as well.

• Entirely different layout (character selection is horizontal on console, but vertical on mobile)

• Entirely different interaction elements (actions on console are hinted with the corresponding keys in lower right corner, but on mobile these are tappable buttons instead)

• Varied spacings, container sizes, etc (item cards are bigger on mobile and have bigger spacing between them)

• Shared UI elements that are reused across different platforms, even though they are rendered at different sizes (as to not make 2 copies of each element for PC and mobile)

Surely there aren't 2 separate UI systems that are hardcoded into each edition of the game?
I'm looking for a sane architectural approach to writing a UI system that can handle all of the above. Did anyone try to solve this already? What was your approach?

Low-level solutions are fine, but for now I'm lookштп for a concept that could then be implemented in any game engine (mine is Godot if that matters)

Dreadpon said:
Did anyone try to solve this already?

People have had good solutions for several decades now. The problem isn't new.

Dreadpon said:
Surely there aren't 2 separate UI systems that are hardcoded into each edition of the game?

Two? No, that number is far too low. Often the ratios are 4:3, 3:2, 16:9, 16:10, 17:10, and 1:1, coupled with scaling that considers both pixel density and physical size.

Also touch-based and mouse-based and controller-based can get different treatments.

Done well, the actual layout used is a very small thing. Have a system that generically handles screens, then load the corresponding data entry that says where the buttons go on the system.

Dreadpon said:
I'm looking for a sane architectural approach to writing a UI system that can handle all of the above. Did anyone try to solve this already? What was your approach?

UI triggers events. Events don't care about layout. Buttons generate events, controllers can generate events, other systems can generate events.