Unheard Software

Menus & Interface

BANNER

Hey brain slashers!

We are here to show you how we are working on the next update. Honestly, it's taking us longer than expected. "It's just labels and buttons, how hard can it be" - Someone Said. So in this devlog we want to go over the rabbit holes we had to go through and how is it looking now. Strap in.

Our constraints

Before we go over the individual changes, we want to tell you what rules we have for this game UI & UX.

The game allows minimum window size of 640x360 (that means 640 pixels in width and 360 pixels in height). That's a for standard FHD display (1920x1080) one ninth of the space. And in this small space we have to fit all the buttons, visuals and legible text in a way where it does not feel crowded.

WINDOW RESIZING CENTERED GIF

There is not just English, we have translations, and each language has different length for different words. Something simple as "Accessibility" is in German for example "Barriereeinstellungen". We have to work with these inconsistencies in mind, allow all the text to be displayed at all times.

Controller support is another large caveat. We have to make all buttons accessible to a device that does not have a pointer. All the different states of buttons have to be easily identifiable, so the user knows what is happening on the screen at any given moment.

Theme and main menu

We wanted to add some vibe to the UI theme, so instead of the generic gray panels and buttons, we went with road sign design. With that, we added a full road sign pole to the main menu with all the primary actions. Each sign representing one button.

To fill the rest of the screen we gave MC a pistol and made him stand on the side aiming at the currently hovered sign.

MAIN MENU BUTTON HOVER + MC GIF

The background has been also changed, we added the fog of war here, since it's pretty important part of the game and makes the whole menu experience more cozy. Navigating between menus smoothly transitions from one position on the map to the other.

For the window size issue, a solution we use across the entire game is UI-scaling. Basically, depending on how large is the window, we change how much we can scale the interface so it fills up the space, but so it's not overflowing. We have two different settings; fractional and integer scaling. We won't go over what those mean here, but it's configurable in the Video settings.

While we like the current menu design, we might have to change it in the future, when we introduce android into the supported platforms. The buttons are simply too small for thick fingers at the moment.

Multi-paged menus

For pages such as settings or multiplayer we had to figure how to fit all their sections into one view. Originally on the settings page we had the sections on the left side as buttons that would change the current page. The multiplayer menu was separated into sections that could be toggled to be visible. That was not very intuitive to players that were trying to navigate via a controller.

We have changed these menus, split all the content into adequately named pages and put a bar at the top to change the current page. Due to our space constraints, we are only showing 3 page names in the bar: previous, current and next. The pages in the bar wrap around, so when you reach the last one, and go to the next one, you are back to the first page.

TAB SELECTOR BAR SHOWCASE GIF

We wanted to make each modal type (warning, info, selection) clearly distinguishable so user can see what's happening before even reading a text.

Reason to make it modal window is that not everything requires the entire screen space. For example we had a menu for just changing the lobby settings, that being switching between friend-only and private steam lobby. That can be just a popup window, not an entire menu.

LOBBY SETTINGS MODAL WINDOW

Steam Input

We are also trying to get the Steam Input working. We had some version of Steam Input working from the release, but we have difficulties in distributing the default configuration.

Hopefully when the update comes, we will have all these issues sorted out and be able to release the update with full controller support.

GAME CLIP GIF

When is this coming out?

Hard to tell. While most of the menus have been changed already, we are planning few more content additions to the game update.

Hopefully, it wont take too long, and if so, we will be here back with another devlog. Oki? Alright, see ya in the change-logs!

Unheard Software

Thanks for the read

#gamedev #godot #indiedev #ripper #shooter #topdown #unheard #unheardsoftware