UI/UX and the SixInput system in Racecraft

Hey guys, I’m Antonio Moro, the creative director and interface designer behind Racecraft and other Vae Victis titles, like Victory: The Age of Racing. I’m going to describe you how we designed and created the user interface in Racecraft, with multi platform support and VR in mind.

When we first started to think about Racecraft we wanted it to be compatible with all the possible platforms and input systems around. So we needed to design an interface that can work well on desktop systems and consoles and also be usable with game controllers, keyboards and steering wheels… and with a VR helmet on your head. It wasn’t an easy task.

We wanted Racecraft to be VR compatible, allowing you to interact with every aspect of the game with a VR helmet on your head.

This is very difficult as you have two major problems to face: VR helmets resolution and general usability with an helmet on you head, when you don’t actually see the controller you’re using (a steering wheel, a game pad or a keyboard).

So the UI (User Interface) needed to be usable at low resolutions and the UX (User Experience) needed to be super easy and linear, so you always know what to do and how to do it, without actually seeing the controller you’re using.

We developed what we call “SixInput”, a proprietary input system composed of just six main commands.

We developed what we call “SixInput”, a proprietary input system composed of just six main commands that you can assign to whatever controller you want to use in Racecraft. Those basic commands allow you to move around the interface (left, right, up, down), select something and go back / cancel the selection.

For example, you can use a steering wheel to use Racecraft interface when you have you wear your VR helmet, steering to move the selection left or right, using the brake and throttle pedals to move up or down and just two main buttons on the wheel (almost every steering wheel on the market has at least two configurable buttons) to select or cancel something on the screen.

The UI needed to be simple and minimal so we opted for a classic “tile-based” design that is perfect with the kind of selection we opted for with SixInput.

Racecraft Main Screen (WIP)

This “tile” approach is very common and easy to understand: there’s always at least one element (usually a “tile”) selected on the screen and you can clearly see it as it’s in red color. The general design is based on black and white, so the selection (in red) it’s always very clear.

You can move around, select something or go back with the six commands defined by SixInput.

This approach works well at every resolution too: it’s always readable at lower ones and it’s still good looking at higher ones.

There’s different ways to select or change options in the game. For example here you can see how you change parameters of a particular game mode, you select that parameter and then cycle through the different options just using your “action 1” key/button:



In this other example you just move around the available options and then select one by using your action 1:



In this list you first select one element (a racetrack in this example) and then move to the different tools associated to that particular element (delete, favorite, share, etc):

Racecraft My Tracks list (mockup)


As you probably already noticed, every main element of the interface is composed on a grid:

Racecraft UI Grid
Racecraft UI Grid

This gives consistency to every single screen of the game and allows us to better design new elements.

We’re now working hard to implement the final interface in the first early access release of Racecraft, what you’ve seen in this article are just design mockups, I really can’t wait to read your feedbacks once the real deal will be available in the game 😉