UI Implementation | Matias Hollmann Portfolio

Gods Unchained

My contributions involved implementing the UI assets in-game and ensuring that they were performant and functional across all supported resolutions and platforms. I also created a streamlined pipeline that was easy for UI/UX artists to work with, allowing them to make changes without the need for tech art assistance.

Tutorial

The Gods Unchained tutorial required designers to have maximum flexibility in positioning and styling different popups. They also needed to control when these popups were displayed and how they were dismissed - all without the need for code changes. This was especially important as new tutorial levels were added with the introduction of new game mechanics, and giving designers full control was a must.

Check out this short video of the tutorial UI in action:

The tool system — Here we can see the tool in action. It can be used in engine for testing purposes, and during runtime it loads the data from the localization document and its functionality is defined by flowgraphs.

Here are some key highlights of the functionality:

All elements within the tooltip can be controlled through the localization sheet.
UI element and VFX functionality can be managed through flowgraphs.
A full API was provided, allowing engineers to interact with the system without being concerned about visual controls.
Smart layout enables it to function seamlessly across any aspect ratio or resolution.

Check out another example of this UI in action:

Complex use case — The system also allows for complex layouts including different amounts and configuration of 3D elements, to display Cards when required for the tutorial.

The Void

Below we can see the Void area. It is quite complex in terms of implementation, as the 3D card objects need to follow the UI layout, and the background VFX needs to sort properly with the 3D and UI elements.

Loading Screen

In Gods Unchained, the loading screen provides important information about the upcoming match, including the player’s username, avatar, and chosen God. Immediately following the loading screen is the mulligan phase, during which players select their hero power and can replace starting hand cards.

Given that the loading screens are frequently updated with each new expansion, we established streamlined tooling and processes that enable easy swapping of displayed art. The Lore/imagery section at the beginning of each match is randomly selected from a set, which may change with new expansions.

The system is fully localized, and both images and text can be changed without the need of further code changes.

Game End Screen

The fun always comes to an end.

When the game is over, you will see the Victory/Defeat screen depending on the outcome of the match.

I was responsible for implementing this screen, making sure that the layering of UI, VFX and 3D elements is correct, as well as dynamically adjusting the colors based on game result and your current God.