top of page

UI & UI Editor

UIEditor.png

Summery

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.

 

Available Elements:

 

Unassigned

Sprite

Animated Sprite

Text

 

Buttons

Checkboxes

Pop Ups

 

Bar

Scrollbar

Sliders

Cliprects

 

Elements

Unassigned:

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

Sprites:

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.

Animated Sprites:

A sprite sheet-based animated sprite. The Designer simply specifies amount of frames to be shown and playback settings.

Unassigned.png

Base settings that all elements use.

 

sprite.png

Sprite settings. Shows the asset search for easier access to sprite textures

 

AnimatedSprite.gif
AnimatedSprite.png

Animated sprite settings.

 

Texts:

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:

 - Unselected

 - 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.

Button Function: 

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.

Grow Scale:

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.

text.png

Text settings.

 

Buttons.png
functiontype.png

Popups:

Simply enables its children when hovering with its bounding area.

Bars:

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.

 

Cliprects:

Only renders the UI elements within its designated area.

 

Button settings. Shows an example of a lambda function.

 

Bar.png
EkayaBar.png

Bar settings. Shows an example from "Ekaya and Pebbles" health and experience bars.

 

In game examples of UI elements in "Ekaya and Pebbles"

 

bottom of page