Realistic Assault Rifle Pack Upgraded UI

My friends at Infima Games have been creating incredibly high-quality asset packs for 1st Person Shooters for both Unity and Unreal Engine for quite some time now.

At some point, they approached me with an idea for what would turn into the Realistic Assault Rifle Pack – an asset pack that resembles modern tactical shooters, both in graphic fidelity, as well as mechanic breadth and depth.

Back at that time, I proposed a basic User Interface which got implemented, but now that the team was working on their biggest update to the pack yet, I proposed a higher-quality UI which I offered to implement for them.

Previous Version (1.0) & Goals

The first release of the Realistic Assault Rifle Pack (RAR) featured a more simple user interface (v1.0), which I designed as well.

However, this version was designed with less complexity and really just to have some kind of interface to demonstrate the implemented player stats (Health & Stamina, Ammo, Grenades, etc.).

We soon all agreed that we wanted to create a more polished, custom UI when the time allows, in order to fit with the style of a modern tactical shooter.

Image link

In-engine capture of the UI running on top of the gameplay layer, mostly using basic Unreal Engine UMG components.

Final Version (2.0)

As the rest of the team was working to expand the Realistic Assault Rifle Pack with new animations, code clean-up, etc. I got to working on building the updated UI.

My first steps involved an assessment of what has already been implemented in a way that I could re-use logic, and what I would have to rebuild from scratch.

The main parts of my work included:

  • •  New Layouts for already existing components (Weapon Data, Fire Mode, Grenade Count, Dynamic Weapon Icon Rendering)
  • •  Building the logic for dynamically populating the Health- and Stamina-Bars depending on set values, as well as dynamically reducing the opacity of elements in the bars, to reflect value depletion
  • •  UI Shader setup which renders all on-screen elements with a Holographic/Glow Effect

 

Note: as I had to make this UI compatible for all Unreal Engine 5 versions (currently 5.0 – 5.7), I was not able to utilize newly implemented features, such as SDFs for my UI components.

Image link

In-engine capture of the UI running on top of the gameplay layer, using my custom created components and affected by the UI Hologram Shader.

Video Demo

Capture of the latest build of the project to display the dynamic effects on the new User Interface, including the dynamically adapting progress bars for Health and Stamina, Ammo Counter, changing Weapon Icon Render, etc.