UI & UI Editor
In my role for "Spite - The Yellow Plague," "Ekaya and Pebbles," and my current project at The Game Assembly, I am responsible for implementing the graphical user interface (GUI) and heads-up display (HUD) elements into the game. These elements are all built from scratch using C++ with C# integration to access the UI components, and are rendered using DirectX11. Currently, we are in the process of rebuilding the UI to work with Vulkan.
In addition to the UI, I also developed an in-engine editor. This tool enables us to make changes and adjustments to the UI elements in real-time, without the need to leave the game engine.
Overall, my role has been crucial in ensuring that players have a seamless and enjoyable experience when interacting with the game.
A container element and is useful tool for grouping together underlying elements and facilitating the placement of multiple elements. This element helps to organize and structure the UI
Is a simple graphic element that can be customized with a texture, color, and alpha. When no texture is assigned, it will display the given color, making it a versatile tool for quick layout tests.
A sprite sheet-based animated sprite. The Designer simply specifies amount of frames to be shown and playback settings.
Base settings that all elements use.
Sprite settings. Shows the asset search for easier access to sprite textures
Animated sprite settings.
Alignment: Aligns the text to either left or center.
Max Width: How big the size of the text can be before a row break.
Buttons & Checkboxes:
These elements exist in three different states:
- Hover: Player is simply hovering the mouse over the button
- Clicked : The player has clicks the button. Switches back to hover on release of mouse button.
The name of the function is registered in the 'UIFunctionRegistry'. When a button is pressed, the registered lambda function is called from the registry and executed.
All interactive elements have the option to incorporate simple tweening by increasing their scale gradually over a specified duration when a user hovers over the element.
Simply enables its children when hovering with its bounding area.
Bars is given a value between 0 and 1 and displays it by scaling the fill element to the correct percentage size of the bar element.
Sliders & Scrollbars:
Similar to bars, sliders are interactive elements with a control feature that allows users to adjust a value within a certain range. Sliders come with controls for setting the minimum and maximum values.
Scrollbars take an input from another element and move it depending on its position. Scrollbars are best used in conjunction with cliprects, as they allow users to navigate through content that exceeds the boundaries of a defined area.
Only renders the UI elements within its designated area.
Button settings. Shows an example of a lambda function.
Bar settings. Shows an example from "Ekaya and Pebbles" health and experience bars.
In game examples of UI elements in "Ekaya and Pebbles"