In-engine UI and mockups

 

As part of a freelance work, I was designed to create the complete UI of a CRYENGINE powered third person game which resulted in the creation of seven UI elements which have various level of advancement when the project was canceled.

My exact role was first to design the UI elements in a practical sense, create a coherent and shared aesthetic, make a unified framework in Action Script and finally makes all the elements in Adobe Flash, integrate them to the engine and script their interaction with the game with FlowGraphs.
Another task that I was responsible of was the creation of a document explaining to the programmers how to make the UI interact with the various game code and systems.

At the time when the project was canceled, all the elements were designed, most of them were in the aesthetic phase, the Action Script Framework was finished and the main menu was ported to Scaleform in-engine and working.

The following is a selection of the UI elements I made in various completion states.

Main menu and option menu

The menu is the most complete of all of them and showcases the modularity of this system where each interactive element can be added or changed dynamically with the Flowgraph system allowed by the Action Script framework that I made.
It worth noting all the UI elements included in the framework are custom made.

option_menu_visual_mockup.jpg 

Aesthetic Mockups

The following images are Photoshop mockups which aim to represent the aesthetic of the HUD and so called “platoon window”.

Note: The following pictures use an Arma 3 screenshot as a background which is not representative of what those UI elements would have looked like in the final game. 

HUD_visual_mockup.jpg 

platoon_window_visual_mockup.jpg 

Design Mockup

The following image is a Photoshop mockup that have been used to design the layout and functionalities of the individual UI elements.

vehicle_editor_visual_mockup.jpg