UI Elements from MRTK2.x on 2D/Flat Displays

%3CLINGO-SUB%20id%3D%22lingo-sub-1805886%22%20slang%3D%22en-US%22%3EUI%20Elements%20from%20MRTK2.x%20on%202D%2FFlat%20Displays%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1805886%22%20slang%3D%22en-US%22%3E%3CP%3EWhen%20you're%20developing%20a%20cross-platform%20experience%2C%20it%20would%20be%20great%20if%20MRTK%20made%20it%20possible%20(and%20easy)%20to%20adapt%20and%20use%20some%20of%20the%20UI%20elements%20from%20the%20MR%20version%20of%20your%20app%2Fgame%2C%20but%20in%202D.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBy%20that%2C%20I%20mean...%20let's%20say%20you're%20developing%20a%20HoloLens%202%20or%20Windows%20Mixed%20Reality%20VR%20game.%20You're%20using%20MRTK2.x%20for%20hand%20tracking%20on%20HoloLens%20and%20controller%20support%20in%20WMR.%20Your%20game's%20menu%20system%20is%20built%20using%20a%20Near%20Interaction%20menu.%20Now%2C%20let's%20assume%20you%20want%20to%20build%20a%20version%20of%20your%20game%20for%20Xbox%2C%20Windows%2010%2C%20iOS%2C%20or%20Android.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOn%20those%20platforms%2C%20it%20probably%20makes%20more%20sense%20to%20present%20the%20UI%20for%20your%20menu%20system%20in%20more%20of%20a%20traditional%202D%20way%20(flat%2C%20centered%20on%20the%20screen%2C%20overlayed%20on%20top%20of%20the%20game%20content)%20and%20using%20touch%2C%20mouse%2C%20or%20game%20controller%20for%20input.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20would%20be%20fantastic%20if%20you%20could%20just%20position%20the%20Near%20Interaction%20menu%20pane%20at%20the%20desired%20distance%20from%20the%20camera%20and%20have%20it%20respond%20to%20OnMouse%20events%20(just%20as%20an%20example)%20and%20with%20some%20visual%20feedback%20similar%20to%20what%20you%20get%20when%20your%20finger%20presses%20one%20of%20the%20buttons%20on%20HoloLens.%3CBR%20%2F%3E%3CBR%20%2F%3EThe%20hope%20being%20here%2C%20you%20can%20build%20one%20menu%20system%20and%20have%20it%20work%20on%20multiple%20platforms%20rather%20than%20have%20to%20implement%20something%20else%20entirely%20when%20your%20app%20is%20running%20a%20pancake%20screen%20device.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1809947%22%20slang%3D%22en-US%22%3ERe%3A%20UI%20Elements%20from%20MRTK2.x%20on%202D%2FFlat%20Displays%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1809947%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20is%20something%20I%20think%20about%20often!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI'm%20rarely%20a%20fan%20of%20building%20things%20twice%2C%20and%20given%20how%20painful%20it%20has%20been%20for%20me%20to%20build%20UI%20in%20Unity%2C%20it's%20something%20I've%20never%20really%20gotten%20deep%20into.%20I've%20occasionally%20added%20quick%20flatscreen%20UI's%20using%20Unity's%20old%20immediate%20mode%20UI.%20It's%20not%20particularly%20pretty%2C%20but%20is%20much%20more%20simple%20and%20fun%20to%20build!%20But%20most%20of%20what%20I've%20worked%20on%20has%20been%20demos%2C%20and%20I%20could%20get%20away%20with%20a%20janky%20looking%20UI%20every%20now%20and%20again.%3CBR%20%2F%3E%3CBR%20%2F%3EWith%20StereoKit%2C%20I've%20got%20the%20opportunity%20to%20build%20something%20that%20does%20both%2C%20so%20I've%20thought%20about%20it%20a%20bit%2C%20but%20haven't%20tried%20to%20implement%20it%20yet.%20There%20is%20some%20overlap%20with%20far-interaction%20code%20that%20might%20make%20some%20of%20this%20technically%20easier%2C%20but%20it's%20tough%20to%20imagine%20a%20really%20good%20MR%20UI%20translating%20into%202D%20at%20all.%20Concepts%20like%20layout%20would%20need%20to%20be%20completely%20re-done%2C%20hand%20based%20UI%20would%20need%20re-thought%2C%20a%20lot%20of%20the%203D%20stuff%20becomes%20an%20obstacle%20rather%20than%20a%20benefit.%20I%20think%20in%20most%20cases%2C%20you'd%20need%20to%20re-implement%20the%20majority%20of%20the%20UI%20for%20flatscreen%20if%20you%20wanted%20to%20build%20a%20good%20experience.%20I%20have%20an%20upcoming%20personal%20project%20that%20has%20both%20flat%20and%20MR%20interfaces%2C%20and%20right%20now%20I%20don't%20plan%20on%20re-using%20even%20the%20conceptual%20design%20of%20the%20UI%20for%20that%2C%20they'll%20be%20completely%20separate.%20It%20definitely%20wouldn't%20work%20for%20that%20app.%3CBR%20%2F%3E%3CBR%20%2F%3EBut%20there's%20a%20chance%20MRTK%20already%20does%20some%20of%20this%2C%20or%20could%20be%20tweaked%20to%20do%20it%20anyhow%3F%20I%20know%20I've%20seen%20MRTK%20run%20on%20ARCore%20with%20touchscreens%2C%20and%20there's%20tools%20for%20getting%20Unity%20UI%20to%20work%20in%20MR%20as%20well.%20I%20poked%20the%20team%20with%20this%20post%2C%20we'll%20see%20if%20anyone%20drops%20by%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

When you're developing a cross-platform experience, it would be great if MRTK made it possible (and easy) to adapt and use some of the UI elements from the MR version of your app/game, but in 2D.

 

By that, I mean... let's say you're developing a HoloLens 2 or Windows Mixed Reality VR game. You're using MRTK2.x for hand tracking on HoloLens and controller support in WMR. Your game's menu system is built using a Near Interaction menu. Now, let's assume you want to build a version of your game for Xbox, Windows 10, iOS, or Android.

 

On those platforms, it probably makes more sense to present the UI for your menu system in more of a traditional 2D way (flat, centered on the screen, overlayed on top of the game content) and using touch, mouse, or game controller for input.

 

It would be fantastic if you could just position the Near Interaction menu pane at the desired distance from the camera and have it respond to OnMouse events (just as an example) and with some visual feedback similar to what you get when your finger presses one of the buttons on HoloLens.

The hope being here, you can build one menu system and have it work on multiple platforms rather than have to implement something else entirely when your app is running a pancake screen device.

1 Reply

 

This is something I think about often!

 

I'm rarely a fan of building things twice, and given how painful it has been for me to build UI in Unity, it's something I've never really gotten deep into. I've occasionally added quick flatscreen UI's using Unity's old immediate mode UI. It's not particularly pretty, but is much more simple and fun to build! But most of what I've worked on has been demos, and I could get away with a janky looking UI every now and again.

With StereoKit, I've got the opportunity to build something that does both, so I've thought about it a bit, but haven't tried to implement it yet. There is some overlap with far-interaction code that might make some of this technically easier, but it's tough to imagine a really good MR UI translating into 2D at all. Concepts like layout would need to be completely re-done, hand based UI would need re-thought, a lot of the 3D stuff becomes an obstacle rather than a benefit. I think in most cases, you'd need to re-implement the majority of the UI for flatscreen if you wanted to build a good experience. I have an upcoming personal project that has both flat and MR interfaces, and right now I don't plan on re-using even the conceptual design of the UI for that, they'll be completely separate. It definitely wouldn't work for that app.

But there's a chance MRTK already does some of this, or could be tweaked to do it anyhow? I know I've seen MRTK run on ARCore with touchscreens, and there's tools for getting Unity UI to work in MR as well. I poked the team with this post, we'll see if anyone drops by :)