Lunar Module
A HoloLens sample app that explores Fluent design, welcome UX, and input with two-hands and controllers.
As part of our on-going Designing Windows Mixed Reality project, the Mixed Reality Design Labs team recently published a new open-source sample app. Inspired by the Atari classic Lunar Lander, it’s called Lunar Module. Besides being most excellent fun, the sample explores HoloLens input capabilities involving gestures and Xbox controllers, ‘welcome’ UX for spatial apps, and Fluent design.
All of the project’s components are available for use in your own mixed reality app experiences. Lunar Module is currently specific to HoloLens — please stay tuned for a future immersive version you can experience on Windows Mixed Reality headsets.
The sample app explores extending the HoloLens gesture language by offering new gestures you can experiment with. HoloLens’ base gestures (Air Tap and Bloom) are easy-to-learn and intuitive… and HoloLens is also capable of tracking two hands at once. With Lunar Module, we offer interesting ways to leverage both hands, so you can perform tasks like rotation and thrust at the same time. Might come in handy… since you are piloting a spacecraft!
You can also use an Xbox controller to pilot your spacecraft. This offers a sense of physicality and fine-grain control different than two-handed input.
For detail on the Xbox controller mapping, see the design-guidance article on Windows Dev Center.
Another aspect of Lunar Module that we hope you find interesting is its use of the Fluent Design System. We wanted to be modern and 3D, and at the same time stay true to the old-school arcade look and feel. Fluent allows for this sort of creative expression, so we went for an updated retro arcade look that applied elements like depth, materials and lighting:
- Depth. Incorporating depth in the main concept and interaction was easy. Other aspects were less obvious. For menus, layouts, and objects that could have been 2D, we took advantage of parallax, Z axis, and variable depth. An example (in the tutorial section) is the hands that demonstrate gestures are closer to you than the module, which is 3D itself.
- Materials. In Fluent, materials are sensory and invigorating. Lucky for us, our game takes place on the moon, so we could have fun designing textures inspired by glowy, sci-fi, backlit arcade games and, of course, the more tactile actual moonscape and NASA’s moon lander. Plus a little bit of programmatic dithering on some screens to provide that low-fi, retro arcade feel.
- Light. We used light as a practical tool to convey information, as well as to provide atmosphere in the game. The light from the landing pad beam, for example, helps direct you to where should land the module, then changes color to let you know if you’re coming in too fast or about to land successfully. We also light only part of the ground to reveal the moon texture as you gaze around, because we found that showing your entire room with the moon texture became distracting.
So if you want to extend your capabilities for HoloLens input, explore Fluent design, or just re-live some of your former arcade glory, please check out Lunar Module. Here are some helpful links:
- Windows Dev Center has a design guidance article
- Mixed Reality Design Labs on GitHub has open-source scripts and prefabs
- Here is an overview of all our Windows mixed reality design guidance for head-mounted displays
- And here is an overview of the Fluent Design System
Thanks for reading this article — we hope you enjoy Lunar Module. And hey… big props to space cadets Addison Linville, Emily Fickenwirth, and Lars Simkins for their great work here — be on the lookout on Medium, Windows Dev Center, and GitHub for their future contributions!
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
