top of page

 

Main contribution: UI/UX

By: Moth Pit

Team: 21 people

Duration: 14 weeks

Engine: LLL Engine (C++)

Introduction

 

For this project we borrowed an Engine from another group (Thanks "Safety First" for LLL Engine!) which meant that in addition to making a game we had to learn a new Engine. For this project I was initially set on doing either Scripting tools or AI, since we had taken courses in these areas since the last project and I wanted to try and put that new knowledge to use. But as it turned out a big part of our group wanted the same. and no one wanted to do UI/UX. The perks of being more of a generalist programmer is that I enjoy many things, and UI/UX is one of my favorite areas so I was more than happy to do that instead.

*** This game is not done, so everything below is still WIP and things will change. ***

UI System

The UI system

 

Fellow programmer Erik Ljungman from "Safety First" knew the engine well and had done their UI system last project and was going to remake it for this project. Since we were using the same engine we decided to collaborate and do it together. He had a pretty clear idea of the improvements he wanted to do, a flexible system that was easy to make new features for and with good debugging tools.

 

My main contribution was the idea of using what I called canvases as bases for the UI. A container of sort that framed the different elements of the UI, both logically and visually. So instead of always relating everything to the screen it relates to its parent canvas instead. That means we could easily manipulate elements in the UI, like fading, moving, loading/unloading etc. A cool feature that Erik designed is the ValuePtr system that allows the UI and the game to interact in a really easy way by mapping strings to pointers. Overall I am very happy with what we created and I feel we met the goals that we set up for the system.

Main Menu

 

For the main menu I used a main canvas with buttons that show and hide all the submenus that are contained in child canvases. Then use the services we create to determine functionality of the elements and finally commands to trigger when interacted with. Overall I am very happy with how it turned out. The subtle shader in the background adds some nice depth too it as well.

 

This is still a WIP. The setting menu still have some touches that are not done, like the volume sliders will be filled, the hover on some elements not added yet etc.

Shader backgrounds

 

Oskar, who is one of our TA artists, hade made some very cool background shaders for the menus and I really wanted to include those. That was not possible in the engine from the beginning. I talked about the process of getting them to work in my specialization here. The one below is in the death screen and is probably my favorite. Comparison with early mockup for fun.

This is still a WIP. The positioning of elements and the colors are not finalized.

Notifications

 

When you pick up objects in the game or unlock new objectives we have some really cool animations that Kate did. By using the ValuePtr system we created for this project together with the Animation system I did in my specialization they are easy to trigger at the right time and really adds some nice feedback to the game.

More to come...

 

This project is not yet completed and there is a lot more cool stuff to come. Specifically an in game menu with maps, quest tracking, inventory visualization and more. Stay tuned...

bottom of page