DEMEO PC EDITION - Main Menu

Brief

The main menu was the first thing that was started for the Demeo PC project.

Now on the one part, we had an existing VR game with all the screens and functionalities to work with, which definitely makes the exploration phase easier but we still have to port over a wildly different experience to flatscreen whilst:

  • Making an interface that would be easy to navigate with controller.

  • Allowing easy navigation between systems

  • being accessible for those with vision-issues.

  • working on varying resolutions

so easier but not easy entirely. And so began the explorations..

Explorations

With the above points to take into consideration, there were some layouts explored each with a different feel. Some focused more on navigation and content, others made space for art as seen with other RPGs in our benchmark research.

You can see these explorations below.

The last candidate was chosen to refine after meeting with stakeholders, it was felt that it had a similar feel to the VR game so existing users would be able to navigate the PC version intuitively.

With this, the wireframe was cleaned up and given pixel dimensions and notes for the artists and programmers for when we began prototyping.

The idea was the main menu has a static element and the content changed depending on the tab the player was in. This made it easy to understand what page you on and allow the player to switch between systems easily as the navigation element was always available.

We also add a safe space for screens and controller prompts for future work on consoles if that would happen.

Side panel layouts

Each screen was then added into this space with new information, so each screen layered upon the template shown above. This content space although not very large, did make it much better for smaller devices it would eventually release on.


The Play Menu - Top Level

The Play Menu, existing in VR also, allows the player to play both on their own or with others.
We also prioritize the Quickplay option in VR as we want to help players join multiplayer groups, the intended experience for VR.

With this, and allowing space for animations to show hover state (we didnt want to do visual changes only) we separated the area into the 5 options we support for Play in Demeo. We would use a larger tile for the recommended tile.

The layout of the Play Menu

And the localization limits for the artists.

With the main menus, we also made sure to support 32:9 support, as it’s a small but growing userbase. This was done with more art on the sides of the screen.

A slight deviation

Since the PC version was going to be the same experience but likely a different audience, we swapped quickplay and skirmish - singleplayer as the main game tile.
The reserved spaces under the tiles also came in handy for our support of showing Discord and Installed Mods - thank god for safe zones.

Final Art - Live in Product


Multiplayer

Quickplay

With quickplay, we wanted to keep it simple for players to play. With Demeo, the players play “Adventures” which are like D&D Adventures. Each one features a Boss and a unique tileset. This could be just a text select but the experience is always improved with visual accompaniments. Here we decided to use the Adventure Books to pair with the UI to make it feel more tactile and immersive.

Searching for a game

We decided to use a similar system as our VR game in our PC Edition. We have physical elements used to convey system status. When searching for a game we use our established throbber loading screen.

errors

One of the most important things with heuristics and any matchmaking system is the system state. We need players to know when things go wrong and a way to rectify them.
We supported the main errors such as “Room Does Not Exist”, “Room Full”, “Could not Connect” etc. but we also always have a catch-all case for other things that can go wrong.


Singleplayer - Skirmish Mode

Choosing a party of heroes

Skirmish mode was a slightly different game mode than the normal session of Demeo. The player can control the entire party of the champions, one turn by one. This required some unique UI and flows for choosing the champions, and their turn order. This was something that was a bit confusing for players in the VR version so we wanted to iron out the bumps in the PC version and hopefully migrate back to the main game.

If it’s broke don’t fix it

The first thing to try was just copy the flow over from how it was done in VR. this was to save time but ultimately with the first prototyping tests, it was clear that this was both lackluster and as confusing as the VR flow.

Think outside the box

We came back eventually later in the project and we focused more on the champions themselves. DEMEO in essence is a physical interactive game so we thought about maybe we just pick up the characters and place them into slots.

As this was later in the project with a lot of established assets, with some rough drawings and bringing it in to Figma with assets we were able to iterate quickly to map out a new screen experience that was more visual and easier to work with.

Skirmish Mode Default State

Skirmish Mode Character Selected


Save Game

Saving and loading games came into DEMEO VR about two thirds into the project and that was something that we had to factor into the PC also. It wasn’t an issue as I had worked on the VR flows so the system and tech was familiar so it was just factoring into how it would be done on the flatscreen flows in the screen estate and interactions we had established thus far.

Just break it up

This flow that we have shown before have been main menu to the screen of the system selected. A very easy and shallow architecture. This new system would then ask the player after selecting which game mode, if they want to do a new game or continue. This would allow us to preserve our screen flows for the new game flows and only mean we create a new continue flow! We could also explain each game mode to help clarify further to new players, a win/win perhaps!

Skirmish

For the game modes we wanted to explain that the save files are consumed upon load. This was the intent from game design to give it more of a rogue like feel.

Host Game

For the game modes we wanted to explain that the save files are consumed upon load. This was the intent from game design to give it more of a rogue like feel. Since hosted games can be resumed for multiplayer games, we had to prepare for groups that might swap out players who were not in the original group. We clarified that new players will just start a new character instead in case they thought that the player would take over a champion.