When we started working on Beat the Beats, we had one clear mission: we wanted a super cohesive experience from the moment you start up the game. This implies treating UI and menu time as seriously as the gameplay itself.
Guest Article by Lucas González Hernanz
Lucas González Hernanz is a Spanish game developer with over 15 years of experience, having worked on titles such as Lego Star Wars Saga, Lego Marvel, Little Big Planet, and Limbo. In 2016, he co-founded Parallel Circles, a massively small indie studio focused on creating highly polished gameplay experiences with a strong emphasis on interactivity and feel. The studio’s latest title, Beat the Beats is available on Meta Quest and PSVR 2.
Spending time in menus may not be where the ‘core fun’ happens, but it is fundamental to creating a solid immersive experience and setting the tone. UI time is the prelude to the match and helps to get you in the mood for jumping into the boxing action.
Here is a breakdown of the most relevant points we followed to integrate our UI and make the most of VR’s special qualities, from creating elements you can punch to avoiding all kinds of black transition screens.
Depth
Virtual reality offers something that no other media has: a real sense of depth.
However, most of the VR interfaces don’t use it further than implementing curved 2D menus. That makes sense, as most of them come from 2D systems, but we wanted to integrate out UI into the medium as much as possible to create a very different experience. We utilise the depth in menus as part of our main design language. Here are a few examples of the main uses for it:
- Highlight elements: Depth animations help catch the player’s attention without overlapping other elements or requiring additional shaders.
- Hover elements: Bringing the selected element slightly forward is both intuitive and effective.
- Menu layers: When multiple layers are present, the active one moves forward while background layers are pushed back. Making the context more readable.
- Positioning: Elements enter and exit with depth-based animations. The direction reflects their layer, helping players build a coherent structure of where they are within the menu.
- Movement without overlap: A common UI issue is moving elements within a list without overlapping others. This is often solved with hide/show transitions. In our case, elements simply move forward in depth, allowing smooth repositioning without conflicts.
View post on imgur.com
For developers, the implications of using the Z (depth) position in UI depend heavily on the engine’s UI . Most UI systems were originally designed for flat screens and operate purely in 2D. To introduce depth, there are a few approaches: rewriting the UI system, combining traditional UI elements with 3D objects, or (as we did) building the entire UI using standard 3D objects.
This can represent a significant amount of work depending on the project. If you choose this path, it’s important to have a clear understanding of all the elements you’ll need from the start. I’d recommend beginning with prototyping on the engine UI system and only committing to this approach once the menu structure and flow are well defined and stable.
Our choice to use standard 3D objects as UI, helped us with the next point.
Physical Interaction
VR allows richer and more diverse interactions than flat screens ever could. This opens up a vast field to explore, especially in a playful medium like games. In this aspect, some titles have done a great job, such as Superhot VR, but there are still many games that could benefit from integrating more physical interaction.
In our case, since we were developing a boxing game, it felt natural to incorporate this kind of physical interaction into the interface. The perfect opportunity presented itself with the Album Unlocking moment. Instead of pressing a floating button, you actually punch to unlock it, you shatter it, you destroy it like an enemy. The UI becomes something you engage with physically, not through an abstraction.
View post on imgur.com
Once the idea was clear, it took less than a week to implement it in the game and we have been receiving a lot of positive feedback, so I really think that the effort was worth it.
Fluidity
UI flow is extremely important for creating a pleasing experience from the moment the player starts any game. This requires offering a smooth, responsive, and juicy interface. It’s something we’ve done in the past, we love making every transition feel fluid and alive.
But beyond that, for fluidity, it is also important to take loading times into account. Loading times always tend to bother players, but this is even more critical in VR for two reasons:
- They break the physical presence and thus the magic of VR
- The player is effectively blindfolded, and thus has nothing to fill the downtime with (like a phone or a drink)
To make a fully undisturbed flow possible, we took this quite seriously in Beat the Beats. We decided to fully avoid loading screens altogether and instead transition seamlessly into each album’s world, taking inspiration from the shop transitions in Splatoon.
View post on imgur.com
This required a bit of planning and extra technical development. Our minimal style turned out to be a perfect match, as we do not depend on complex meshes or tons of textures to create the atmosphere we are after. In a way, it is like the demo scene techniques. We rely heavily on specific algorithms (mainly shaders) and re-use of the same assets to create the mood while at the same time keeping a low resource budget. It took some extra effort, but the result is a super smooth and solid experience.
Closing Thoughts
Designing for VR means rethinking assumptions. It has been an interesting journey, and it definitely took extra work and planning to create a distinctive interface, but I think the result is totally worth it.
It’s not about translating flat interfaces into 3D space. By treating UI elements as physical, spatial, and dynamic components of the world, we ensure that immersion doesn’t start when the gameplay begins. It starts the second you put the headset on. I truly think that UI has a lot of potential to expand in VR media. The wide range of interaction possibilities creates a brilliant landscape to explore. Each game could bring its own style and personality to this field. From our perspective, the interface isn’t a layer on top of the game. It is part of the game itself.
