How to make a diegetic FPS UI that can be lit or appear lit or some similar illusion that also accounts for variable screen resolution
For reference this image is a quick example of what I’m looking to accomplish. Yes I am one of those unnecessarily paranoid no name devs. No free concept art today :0
The UI is a simple “visor” of solid shapes with screens that should at least simulate a feeling that they exist within the world. Lighting and perhaps slight movement with the camera seems most important to achieving this kind of immersion.
I would be also be content with some sort of fake, or anything to take it beyond the classic UI overlay.
I have a prototype in Unreal using widgets parented to cubes all parented to the player camera. They can be raised and lowered: “opening” and “closing” the visor.
The main issue is that this method, with no adjustment, deals very poorly with changing the screen resolution. The only solution to my limited knowledge would be to check the screen resolution, and, using preset coordinates for each different resolutions, change the local position of these cubes to fit that screen.
I realize that the widget/UMG etc. system is designed for this, but I’m totally lost on a way to make it feel diegetic. I imagine one could check the environment color average? or just get a dominant color by environment and make the UI appear to reflect the environment.
Ideally I would prefer a hybrid UI or anything that can utilize the beauty of Unreal lighting.
Is my potential solution with physical cubes and variable coordinates a reasonable one or am I missing something very obvious? perhaps you have an arcane solution?
If you’ve done something similar and it’s not exactly what I’m describing feel free to share your methods, as it could help me or someone else along the way.
I’m not sure how appropriate the word diegetic is here, this has me a bit confused. I assume you’d like the hud to work with the world as if they were one in the same, not sure how that relates to story, at least from the picture and your explanation alone.
The existence of UMG is to address changing resolutions via anchors, you would need to make something for your own ends if you keep it in world space. Having everything under a single parent means you could scale the X and Y in relation to a given aspect ratio if you can access that.
There is also a material or post process route which could inform lighting. Some understanding of unreal post process would be needed to consider how you would construct it for you own needs.
I would personally leverage UMG. If scalability is your concern, then stick with vector based definitions instead of imagery. This, in large, could be handled by materials which adjust their scales based on aspect ratio. For example, in a material, you could define a pyramid or box ramp, clip it to a value which would achieve the slant on each hud element, then scale the X and Y accordingly with compensation for stretching. Defining it as a pyramid ramp makes it scalable, the rest is defining logic to appropriately control where the slant and flat portions are based on aspect ratio and resolution. There would be no pixels.
Your mesh approach is another way to address scalability but I see some limitations on scaling due to wide and not-so-wide screens, of which, I would dedicate towards one ratio and pad out for the rest. This way the only concern is resolution, which is handled due to it being vector based. If UMG had a smoother vector based approach, I feel that would make your goal easier.
Diegetic referring to it existing in the world. The only FPS example I know of that really leveraged this would be the Metroid game that showed the players face reflecting in the visor if they were near a bright light.
I think I understand your approach to a UMG only approach, but just to be sure…
The below image of the prototype UI may make my goals more clear.
The UMG elements are attached to Meshes so that some part of the UI will be lit.
I’ve not approached UI this way, so maybe there is something out there already, but since you want the elements to react to the world, I think 3d geometry would be the simplest. It looks like you need to know mouse position for clicks and that’s accessible in bp anyways.
Maybe all of the elements could just be modeled, including the gold trim. The text could be controlled with text renderers which exist in the world, but I don’t believe they are too flexible, but maybe enough for your goals.
In Unity, UI exists through a different camera - I think this is what UMG serves as, but you’re essentially after something like that while still receiving light of the environment. You may want to experiment with SceneTexture nodes for Post Process effects. There is a Specular choice which references lighting info, so it technically doesn’t have to exist in 3d, but defined by material and set up in the post process volume or your camera.
