Interfaccia utentemetrica con canvas - MRTK3

Nota

Questa è una panoramica concettuale del modo in cui viene compilata l'interfaccia utente basata su Canvas ibrido. Per la documentazione sui singoli prefab dell'esperienza utente, vedere la documentazione relativa ai componenti dell'esperienza utente.

MRTK3 introduce l'interfaccia utentemetrica integrata con il sistema RectTransform e Canvas di Unity. Anche se questo sistema è stato storicamente usato principalmente per l'interfaccia utente flat 2D, è in grado di eseguire il rendering e la disposizione dell'interfaccia utente 3Dmetrica. Ciò può accelerare l'iterazione di progettazione e aumentare la fedeltà dei progetti che possono essere creati con l'interfaccia utentemetrica.

Nota

La libreria dei componenti basata su canvas è in fase di sviluppo attivo e cambierà rapidamente con nuove funzionalità, aspetto e aspetto, layout e architettura.

I sistemi di interfaccia utente non Canvas di MRTK 2.x erano molto difficili da progettare perché mancavano molte delle funzionalità di base previste da un sistema di progettazione dell'interfaccia.

• ✘ Mancanza di unità di progettazione non fisiche
• ✘ Nessun allineamento
• ✘ Nessun margine/spaziatura interna
• ✘ Nessun layout flessibile o reattivo
• ✘ Prefab Distinct per ogni singola permutazione di layout, dimensioni e configurazione
• ✘ Supporto molto limitato per il layout della raccolta (layout componibili orizzontale/verticale)
• ✘ Mancanza di caratteristiche di progettazione di base come raggi d'angolo arrotondati o larghezze di tratti assolutamente di dimensioni arrotondate
• ✘ È necessario usare la scala per regolare le dimensioni degli elementi dell'interfaccia utente, modificando in modo distruttivo gli elementi figlio
• ✘ Supporto limitato per mouse e tastiera
• ✘ Nessun supporto per il game pad

A causa di queste limitazioni, l'interfaccia utentemetrica è stata storicamente più primitiva nel suo design e ha richiesto una grande quantità di lavoro manuale da parte dei progettisti tecnici per creare layout belli.

MRTK3 introduce un approccio unificato. In un contesto di Canvas-RectTransform possono essere creati controlli dell'interfaccia utente accattivanti che supportano tutte le interazioni XR (ad esempio le presse di tracciamento delle mani articolate e le dita dello sguardo) . I controlli possono essere disposti automaticamente con margine appropriato, spaziatura interna, flessibilità reattiva e tutte le funzionalità previste dai progettisti. Inoltre, è possibile instradare gli eventi UGUI in XRI in modo che gli stessi prefab dell'interfaccia utente funzionino altrettanto bene in contesti 2D e 3D, inclusi input accessibili come game pad.

Questo approccio offre i vantaggi seguenti:

• ✔ Unità di progettazione flessibili che eseguono il mapping a un'ampia gamma di contesti fisici (realtà 3D, schermi 2D, TV/Desktop/Mobile/Web)
• ✔ Supporto completo dell'allineamento RectTransform per il layout reattivo con relazioni padre/figlio coessive
• ✔ Supporto completo per il margine RectTransform e la spaziatura interna tramite i gruppi autoLayout di UnityUI
• ✔ Supporto per i layout flex con priorità e margini tramite i gruppi di AutoLayout unityUI
• ✔ Un singolo prefab per ogni tipo di controllo, che può essere ridimensionato e regolato in base a qualsiasi contenuto o contesto
• ✔ Layout orizzontale, verticale e griglia dei gruppi Dilayout di UnityUI. I layout personalizzati sono possibili tramite l'estensione delle interfacce di layout di Unity.
• ✔ Ampia gamma di funzionalità di progettazione avanzate, ad esempio raggi degli angoli arrotondati di dimensioni assolute, larghezze dei tratti e margini, abilitate dalle funzionalità avanzate dello shader dell'interfaccia utente nel pacchetto strumenti di grafica Realtà mista.
• ✔ Nessuna scalabilità: tutto il ridimensionamento e il layout vengono ottenuti tramite le metriche rectTransform e offset. I genitori non ridimensionano i bambini.
• ✔ Supporto completo per mouse e tastiera, in modo nativo tramite eventi UGUI e UGUIInputAdapter e CanvasProxyInteractor (per altre informazioni, vedere la documentazione sull'architettura interagendo)
• ✔ Supporto per game pad e navigazione direzionale/relativa

Questa potenza e flessibilità possono comportare costi e l'interfaccia utente basata su Canvas richiede un'attenta gestione per evitare problemi di prestazioni comuni.

• Ogni "parte mobile" dell'interfaccia utente deve essere un nodo Canvas distinto. O(tree_height) Esistono costi associati alla mutazione delle gerarchie canvas. È consigliabile usare più canvas per più parti mobili/componenti riutilizzabili.
• Evitare di usare un singolo canvas globale per l'intera scena.
• Lo spostamento e la rotazione di canvas e RectTransforms possono avere implicazioni sulle prestazioni. È consigliabile annidare l'oggetto Canvas sotto una trasformazione "holster" non RectTransform che verrà spostata, anziché spostare direttamente l'oggetto Canvas.
• La nostra storia per mascherare e ritagliare interfacce utente basate su collisori è ancora in fase di sviluppo. È consigliabile evitare visualizzazioni a scorrimento contenenti contenuto selezionabile.
• Il sistema di spostamento direzionale predefinito di Unity può, in alcuni contesti 3D, comportarsi in modo strano. Stiamo esaminando sistemi di spostamento personalizzati che si comportano in modo più affidabile in layout 3D insoliti.

Verranno rilasciate indicazioni più specifiche per l'ottimizzazione dei layout basati su Canvas perché vengono eseguiti test delle prestazioni più dettagliati in un'ampia gamma di dispositivi.

Installazione

I componenti vengono creati con un'unità di progettazione 1: rapporto 1mm per i contesti fisici. Quando si configura un canvas per l'uso con l'interfaccia utentemetrica progettata per la visualizzazione in applicazioni 3D immersive:

• Verificare che Canvas sia spazio globale
• Verificare che la scala di Canvas sia globalmente 0.001 su tutti gli assi

Per il rendering delle applicazioni in uno schermo 2D, la scala può essere modificata liberamente in base alle metriche di usabilità specificate e alle dimensioni minime della destinazione tocco.

Quando si usano elementi interattivi con UGUIInputAdapter (ad esempio l'esperienza utente basata su Canvas), assicurarsi di disporre di un CanvasProxyInteractor GameObject (preferibilmente vuoto) nella scena. In questo modo gli eventi UGUI verranno inoltrati tramite XRI, garantendo il corretto funzionamento degli elementi interagendo.

Se si vuole sperimentare l'input UGUI su componenti non UX, aggiungere UGUIInputAdapter all'interfaccia XRI interagendo. L'input UGUI su interazioni non correlate all'esperienza utente è sperimentale ed è soggetto a diversi bug aperti.

Sviluppo in corso

Stiamo ancora plasmando la storia di sviluppo per la creazione di un'interfaccia utente accattivante in tutta la gamma di piattaforme supportate. Attualmente vengono fornite due versioni della maggior parte dei componenti dell'esperienza utente: una che non usa Canvas, con layout statico e non risponde (come in precedenza è stato fornito in MRTK 2.x) e un'altra versione creata con l'approccio basato su Canvas unificato. Man mano che creiamo più componenti e creiamo l'implementazione della libreria di progettazione, prevediamo di deprecare i componenti non Canvas nell'interesse della coerenza e della manutenzione.

Gestione dello stato unificata

A causa della stretta separazione di stato/interazione e oggetti visivi, si noterà che gli stessi script di stato e interazione sono condivisi tra contesti Canvas e non Canvas. Questo è per impostazione predefinita; gli stessi script di interazione possono essere riutilizzati in qualsiasi contesto visivo o layout, riducendo la superficie dell'API e migliorando la coerenza delle interazioni. Ad esempio, Slider è il componente di interazione del dispositivo di scorrimento per i dispositivi di scorrimento Canvas e non Canvas ed PressableButton è lo stesso script tra i pulsanti Canvas e non Canvas. In futuro, se viene adottato un nuovo layout o un nuovo framework di presentazione, è possibile eseguire la stessa logica di interazione e i sistemi per garantire coerenza e manutenibilità.

Il diagramma dell'architettura seguente illustra in dettaglio come interagiscono i diversi eventi di input e tipi di interazioni per fornire uno stato di interazione unificato. Fare clic sul diagramma per visualizzare una versione più grande.