UI Programmer
Mood 666
C++ | Unreal Engine
About
Madness is power.
Mood 666 is a intense FPS in the style of Doom with a cyberpunk flavour. You play as a special operative charged with infiltrating and neutralizing all hostiles. As you kill enemies, you will build up your "Mood meter" which will give you bonuses at certain intervals. The speed and ferocity of the combat increases as your mood does. Staying on the offensive ensures your Mood does not fade, keeping you in the fight for longer.
Development
- Player HUD
- Menus
- UI Shaders
Player HUD
Introduction
Mood 666 was the first time I was solely responsible for the UI in a game project and I am very proud of the work I did and thankful to the team I worked with that I was allowed to focus my skills in this area.
My work on this game can be summarised into three categories:
The Player HUD uses a parent UI widget that is populated by other widgets that contain their own logic. By and large, the parent HUD widget only handles the display of specific sub-widgets.
- All of the HUD and UI widgets are created in C++ and then designed and arranged in blueprint.
- Each widget is self-contained and can be re-used in any context.
- Widgets will only accept a request to play an animation if an animation is not currently playing to avoid resetting the animation.
The most interesting part of the HUD, and the one that drives the unique parts of the game is the "Mood Meter" in the bottom left. It was made using a series of radial sliders that each measured one third of the maximum value for the "Mood Meter" of 666. The text is updated by receiving info if the player is taking or dealing damage.
One of the more eye-catching parts to be in the game is what I referred to as a "showstopper" effect. We achieved this with a slow motion effect when increasing the "Mood meter" past one third of the maximum value.
Each of the pop-ups are the same widget playing a different animation as requested from the main parent widget.
Each of the animations are declared in C++ and key-framed in Blueprint using UMG's built in variables for widget animation. Almost all animation are entirely dependent on the "Transform" property that is inherited by all UserWidget classes which allows for manipulation of position, scale and shear. These are purely visual manipulations, logically the UI stays in place.
The colour of the HUD will change after one of these "showstopper" events. I did this by looping through the child widgets of the main parent and changing the values depending on the current value on the Mood meter.
Menus
Similar to the player HUD, the menus are all created in C++ and designed in blueprint.
- All components of the menu are made in C++ and then designed and expanded in blueprint.
- I created a custom button that all buttons in the menus derive from.
- All buttons react to player input in ways that can be specified per button.
- A button can either use the default features or they can be overwritten with different logic and functionality.
- Each option saves to a local file that will be loaded on start, making settings save between sessions.
UI Shaders
The project used three different UI shaders.
UI Glow
Used in both the HUD and the menus. Effect was achieved by reading each element on the canvas and copying it in a radial pattern around the centre of the element. The shader allowed for adjusting of the values including the amount of copies in the radial, the distance from the centre and the opacity of each copy.
Parabolic Screen Curve
Used in the HUD. The effect was achieved by manipulating texture coordinates in the green channel in the shape of the curve. This is then applied to the screen in a "severity" that can be decided by a designer. This has the added effect of also causing a "stretching" effect when UI elements touches the bottom and top edges of the UI canvas. (This effect can be seen in the animations above!).
Glitch Effect
The third UI shader that is used on the HUD and in certain menus. This is my take on a classic distortion effect that is often used to simulate malfunctioning screens. It has a low intensity persistent effect on the HUD, which combined with the parabolic curve evokes the image of a helmets visor. The effect is also utilized in the event that the player takes damage for extra feedback. This effect is more intense but only plays for a short interval. It is made by multiplying a texture with the texture coordinate of the shader. The severity of the effect can be controlled by selecting a displacement texture with more extreme differences and by adjusting multiplication values.