Madlands VR Reimagine

Oculus Rift S | 3D UI | Unity 3D Prototyping

Brief

Madlands Mobile is an FTP SLG set in a post-apocalyptic wasteland where players build their bases, collect their heroes, and form alliances to survive and re-conquer the brave new world. Madlands Mobile was shipped in July 2018.

I also did a VR reimagine prototype based on the Garage screen of this game. In this post I explained the process of this self initiated project, and showcased the end result of the prototype.
‍
Click here to download the VR demo build (x64 Windows).Click here to download a non VR Unity build (x64 Windows).

My Roles

- UI Style Exploration
- Screen portrait to landscape redesign
‍- Greybox Implementation in UGUI
- Hi-fi Mockups

VR Reimagine
- 3D Modelling
- Oculus Rift S Setup
- Lighting
- Animation
- UI Design
- C# Scripting

1. Game UI Style Exploration

One of the main tasks we got in the year at IGG was to turn the game's original portrait layout into a landscape one. My colleague Patricia Nunez and I revisited every screen to redesign the layouts that suited better with landscape mode and rearranged and anchored every single UI element. But we didn't have any time to work on a UI guide.

So I worked on a UI concept in my free time after the project was shipped.

Vehicle illustrations made with MidJourney.

2. Failed Project Learning Outcomes

What I learned
Two years into the game's development, I was brought on to the Madlands team to perform a UX triage on the then-current design. The focus of my work would be to transform the game from a portrait layout to a landscape layout and update all the screen layout designs. Then to make the screen flow smoother and more logical. After working on this project for almost a year, Madlands Mobile was shipped in July 2018 and was sunset a month later, with the whole development team laid-off in Sep 2018. I learned the following things.

- Game Designers and UX Designers are two important parts of the "Product Designer" role in a game project. Game Designer and UX Designers should work closely and value each other's input to this product;

- The team didn't have a workflow designed for the Game Designers, UX Designers, and Engineers. Game Designers usually skip UX Designers and ask Engineers to do some game design or UI changes. Quick fixes between Game Designers and Engineers can cause a cascade effect. Everyone needs to see the issue and work together from all sides to address the problem; Check out the workflow we follow in This Game Studio in my other post.
- The change from landscape to portrait needed much more time than it was expected. A good understanding of the scope is essential to product development.

3. VR Re-imagine

Recently I did a VR re-imagine prototype based on the Garage screen of this game. As someone who mostly works on mobile games, I was curious how the UI should be designed and implemented differently if it happened in a 3D virtual garage, similar to today's many VR/AR applications.

I also wanted to take this chance to sharpen up my fast prototyping skills. I wanted to create the environment, UI and essential interactivity from scratch with minimal support from third-party assets in a 2-day span.

- 3D Modelling

I started off with building 3D environments using Unity's built-in Probuilder. I chose Probuilder over traditional 3D modelling software because It allows for direct testing and fast iterations.

a. The beginning of the vehicle modelling
b. The completed vehicle model with materials applied
c. Added decorations
d. Made the truck look damaged

- UI Design

UI in 3D world space allows multiple panels to be displayed at once without crowding the screen space. It's essential to implement UI this way in VR and Metaverse applications. Because of this advantage, I tried to include as many info panels as possible. I designed various concept diagrams to represent the control panels in a virtual garage. Inspired by Fallout and Matrix, I used a palette with only green colors for the style to fit the post-apocalyptic vibe.

- 3D UI Animation

Motion plays an essential role in UI. I created animations to make the terminal transition between different UI states: idle, transition, and open.

During idle, the UI in the terminal rotates and does a resting subtle animation, indicating it's active and interactive. Upon the player's clicks, the UI spreads out and fades in various interactive panels around the player.
‍
Finally, when the user walks further away from the terminal, the panels automatically collapse into its original idle state.

Simple C# scripting was done to add the interactivity.

- Lighting and Skybox

Even it's just a prototype, some simple lighting can add a lot to the mood to help me judge the UI direction.
‍
I took advantage of Unity URP to quickly create a post-apocalyspe vibe. I added warm lighting and a sunset skybox to mimic the desert vibe. A spot light was also added above the damaged vehicle to add importance.

Additionally, I added post processing effects such as Bloom, Depth of Field, Vignette, and Tonemapping to give it a cinematic look.

- Set up XR Interaction Toolkit

In the last step, I added XR Interaction Toolkit in Unity and set up the scene to be playable in Oculus Rift S.

I updated the camera field of view to be 60 so it feels more natural to human eyes. I also lowered all the UI canvases so that it's more comfortable for my character in the VR world to look at. And then I added interaction components to all the UI canvases to allow Oculus Touch Controller to click on all the buttons.

Finally, I added a teleport function to the Left Touch so that my character can teleport anywhere in this scene. I think it's a better way to navigate the VR world. Ideally, the navigation and turning preferences should be selectable in the settings for players to choose.

Click here to download the non VR Unity build (x64 Windows).

Click here to download the VR demo build (x64 Windows).

Tutorials:
How to make a VR game - Unity XR Toolkit 2022 - Valem Tutorials
Third party assets used:
- Mini First Person Controller
- 8K Skybox Pack Free
- Gridbox Prototype Materials
- Poster arts made with MidJourney

- The End Result

In the end, I was able to finish this prototype in a span of 2 days and have everything I wanted to include. Through this little experiment, I learned that UI in 3D space not only allows for more information to be displayed but also is more integrated with the 3D virtual world to give users a fully immersed experience without breaking the 4th wall. It has many more possibilities that I have yet to explore.

And when it comes to the VR world, there are more aspects to take into consideration to craft a better UX - camera field of view, general UI height, navigation, etc. I will keep experimenting and learning more about how to create a better UX in VR.
‍