FPS User Interface

About

These gifs are match flow-related UI elements that I coded for Frontlines. Elements include:

• A leaderboard overlay
• Killfeed
• Capture point progress indicators
• Match score progress + timer
• Map Voting
• Loading screen

I used Rodux (Roblox equivalent of Redux.js) for managing the state, and I also programmed a UI element to render that at runtime to make debugging easier.

Gifs

Glock animation bug. I was testing my killfeed and gameplay UI

Even more Gifs

And even more gifs

SO MANY ERRORS… from Nick’s code ;^)

I think we were looking for a memory leak?

The modelers were so talented

Capture Point Logic

The first thing I made during the ROBLOX 2021 Spring Accelerator (for Frontlines) was capture-point logic. The gifs below show my process for testing both the UI and the model.

In-game there was one circular progress indicator per capture point. The diamond moving along the scale was purely for testing, and demonstrates the underlying mathematical model – if the other team owns the point, you have to return the point to neutral before you can capture it for your team. (this was per Frontlines’ specs).

Later I had to normalize the capturing power of a teammate such that if every player in the game stood on one point, no one would capture it – even if there were more people on one team than the other.

If I remember correctly, the circular progress indicator used a ROBLOX UI feature called Gradients for the transparency, but that required creating two halves for the circle. If you look closely, when the capture point progress is completed, there’s still a small gap left before it resets, which I believe was due to there actually being two halves of the circle + clipping.

Gifs