Aggiornamento di app UWP 2D per Windows Mixed RealityUpdating 2D UWP apps for Windows Mixed Reality

La realtà mista di Windows consente agli utenti di visualizzare gli ologrammi come se fossero direttamente nel mondo fisico e digitale.Windows Mixed Reality lets your users see holograms as if they're right around them in the physical and digital world. Al suo nucleo, sia HoloLens sia i PC desktop a cui si alleghino gli accessori per auricolari immersivi a sono dispositivi Windows 10.At its core, both HoloLens and the Desktop PCs you attach immersive headset accessories to are Windows 10 devices. Si è in grado di eseguire quasi tutte le app piattaforma UWP (Universal Windows Platform) (UWP) nello Store come app 2D.You're able to run almost all Universal Windows Platform (UWP) apps in the Store as 2D apps.

Creazione di un'app UWP 2D per realtà mistaCreating a 2D UWP app for mixed reality

Il primo passaggio per l'uso di un'app 2D per gli auricolari a realtà mista consiste nel fare in modo che l'app venga eseguita come app 2D standard sul monitor desktop.The first step to bringing a 2D app to mixed reality headsets is to get your app running as a standard 2D app on your desktop monitor.

Creazione di una nuova app UWP 2DBuilding a new 2D UWP app

Per creare una nuova app 2D per la realtà mista, è necessario compilare un'app standard 2D piattaforma UWP (Universal Windows Platform) (UWP).To build a new 2D app for mixed reality, you build a standard 2D Universal Windows Platform (UWP) app. Non sono necessarie altre modifiche dell'app per l'app da eseguire come uno Slate in realtà mista.No other app changes are required for that app to then run as a slate in mixed reality.

Per iniziare a creare un'app UWP 2D, vedere l'articolo creare la prima app .To get started building a 2D UWP app, check out the Create your first app article.

Introduzione di un'app di archivio 2D esistente a UWPBringing an existing 2D Store app to UWP

Se si dispone già di un'app di Windows 2D nello Store, assicurarsi che sia destinata a Windows 10 piattaforma UWP (Universal Windows Platform) (UWP).If you already have a 2D Windows app in the Store, make sure it's targeting the Windows 10 Universal Windows Platform (UWP). Ecco tutti i potenziali punti di partenza che è possibile avere con l'App Store:Here are all the potential starting points you may have with your Store app today:

Punto di partenzaStarting Point Destinazione piattaforma manifesto AppXAppX Manifest Platform Target Come rendere universale?How to make this Universal?
Windows Phone (Silverlight)Windows Phone (Silverlight) Manifesto dell'applicazione SilverlightSilverlight App Manifest Eseguire la migrazione a WinRTMigrate to WinRT
Windows Phone 8,1 universaleWindows Phone 8.1 Universal 8,1 manifesto AppX che non include la piattaforma di destinazione8.1 AppX Manifest that Doesn't Include Platform Target Eseguire la migrazione dell'app al piattaforma UWP (Universal Windows Platform)Migrate your app to the Universal Windows Platform
Windows Store 8Windows Store 8 8 manifesto AppX che non include la piattaforma di destinazione8 AppX Manifest that Doesn't Include Platform Target Eseguire la migrazione dell'app al piattaforma UWP (Universal Windows Platform)Migrate your app to the Universal Windows Platform
Windows Store 8,1 universaleWindows Store 8.1 Universal 8,1 manifesto AppX che non include la piattaforma di destinazione8.1 AppX Manifest that Doesn't Include Platform Target Eseguire la migrazione dell'app al piattaforma UWP (Universal Windows Platform)Migrate your app to the Universal Windows Platform

Se si dispone di un'app di Unity 2D attualmente compilata come app Win32 nel PC, Mac & Linux standalone build target, passare alla destinazione di compilazione piattaforma UWP (Universal Windows Platform) per realtà mista.If you have a 2D Unity app today built as a Win32 app on the PC, Mac & Linux Standalone build target, switch to the Universal Windows Platform build target for mixed reality.

Verranno illustrati i modi in cui è possibile limitare l'app in modo specifico a HoloLens usando la famiglia di dispositivi Windows. olografica riportata di seguito.We'll talk about ways that you can restrict your app specifically to HoloLens using the Windows.Holographic device family below.

Eseguire l'app 2D in un auricolare immersivo a realtà mista di WindowsRun your 2D app in a Windows Mixed Reality immersive headset

Se l'app 2D è stata distribuita in un computer desktop e ne è stata tentata l'uso sul monitor, si è pronti per provare a usare un auricolare desktop immersivo.If you've deployed your 2D app to a desktop machine and tried it out on your monitor, you're ready to try it out on an immersive desktop headset!

È sufficiente passare al menu Start all'interno dell'auricolare con la realtà mista e avviare l'app da questa posizione.Just go to the Start menu within the mixed reality headset and launch the app from there. La shell desktop e la shell olografica condividono lo stesso set di app UWP, quindi l'app deve essere già presente dopo la distribuzione da Visual Studio.The desktop shell and the holographic shell both share the same set of UWP apps, and so the app should already be present once you've deployed from Visual Studio.

Per gli auricolari immersivi e HoloLensTargeting both immersive headsets and HoloLens

La procedura è stata completata.Congratulations! L'app usa ora Windows 10 piattaforma UWP (Universal Windows Platform) (UWP).Your app is now using the Windows 10 Universal Windows Platform (UWP).

L'app è ora in grado di essere eseguita sui dispositivi Windows odierni, ad esempio desktop, dispositivi mobili, Xbox, Windows Mixed Reality, HoloLens e i futuri dispositivi Windows.Your app is now capable of running on today's Windows devices like Desktop, Mobile, Xbox, Windows Mixed Reality immersive headsets, HoloLens, and future Windows devices. Tuttavia, per fare in modo che tutti questi dispositivi siano destinati a tutti i dispositivi, è necessario verificare che l'app sia destinata a Windows.However, to actually target all of those devices, you will need to ensure your app is targeting the Windows. Famiglia di dispositivi universali.Universal device family.

Modificare la famiglia di dispositivi in Windows. UniversalChange your device family to Windows.Universal

Passiamo ora al manifesto di AppX per assicurarsi che l'app Windows 10 UWP possa essere eseguita in HoloLens:Now let's jump into your AppX manifest to ensure your Windows 10 UWP app can run on HoloLens:

  • Aprire il file della soluzione dell'app con Visual Studio e passare al manifesto del pacchetto dell'appOpen your app's solution file with Visual Studio and navigate to the app package manifest
  • Fare clic con il pulsante destro del mouse sul file Package. appxmanifest nella soluzione e passare a Visualizza codiceRight-click the Package.appxmanifest file in your Solution and go to View Code
    Package. appxmanifest in Esplora soluzionipackage.appxmanifest in Solution Explorer
  • Verificare che la piattaforma di destinazione sia Windows.Ensure your Target Platform is Windows. Universale nella sezione dipendenzeUniversal in the dependencies section
    <Dependencies>
      <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10240.0" MaxVersionTested="10.0.10586.0" />
    </Dependencies>
    
  • Salvare!Save!

Se non si usa Visual Studio per l'ambiente di sviluppo, è possibile aprire AppXManifest.xml nell'editor di testo di propria scelta per assicurarsi che la destinazione sia Windows. Universal TargetDeviceFamily.If you don't use Visual Studio for your development environment, you can open AppXManifest.xml in the text editor of your choice to ensure you're targeting the Windows.Universal TargetDeviceFamily.

Esecuzione nell'emulatore di HoloLensRun in the HoloLens Emulator

Ora che l'app UWP è destinata a "Windows. Universal", è possibile compilare l'app ed eseguirla nell' emulatore di HoloLens.Now that your UWP app targets "Windows.Universal", let's build your app and run it in the HoloLens Emulator.

  • Assicurarsi che sia installato l'emulatore di HoloLens.Make sure you're installed the HoloLens Emulator.

  • In Visual Studio selezionare la configurazione della build x86 per l'appIn Visual Studio, select the x86 build configuration for your app

    Configurazione di build x86 in Visual Studio

  • Seleziona Emulatore HoloLens nel menu a discesa delle destinazioni di distribuzioneSelect HoloLens Emulator in the deployment target drop-down menu

    Emulatore di HoloLens nell'elenco delle destinazioni di distribuzione

  • Selezionare debug > avviare il debug per distribuire l'app e avviare il debug.Select Debug > Start Debugging to deploy your app and start debugging.

  • L'emulatore avvierà ed eseguirà l'app.The emulator will start and run your app.

  • Con una tastiera, un mouse e un controller Xbox, Inserisci la tua app nel mondo per avviarla.With a keyboard, mouse, and an Xbox controller, place your app in the world to launch it.

    Emulatore di HoloLens caricato con un esempio UWP

Passaggi successiviNext steps

A questo punto, può verificarsi una delle due situazioni seguenti:At this point, one of two things can happen:

  1. L'app visualizzerà il relativo Splash e inizierà a essere eseguito dopo che è stato inserito nell'emulatore.Your app will show its splash and start running after it's placed in the Emulator! Fantastico!Awesome!
  2. O dopo aver visualizzato un'animazione di caricamento per un ologramma 2D, il caricamento verrà interrotto e l'app verrà visualizzata solo nella schermata iniziale.Or after you see a loading animation for a 2D hologram, loading will stop and you'll just see your app at its splash screen. Ciò significa che si è verificato un errore ed è necessario approfondire la conoscenza di come portare la propria applicazione a vivere in realtà mista.This means that something went wrong and it will take more investigation to understand how to bring your app to life in Mixed Reality.

È necessario eseguire il debug per ottenere la radice dei possibili problemi che impediscono l'avvio dell'app UWP in HoloLens.You'll need to debug to get to the root of possible issues that are stopping your UWP app from starting on HoloLens.

Esecuzione dell'app UWP nel debuggerRunning your UWP app in the debugger

Questi passaggi consentono di eseguire il debug dell'app UWP usando il debugger di Visual Studio.These steps will walk you through debugging your UWP app using the Visual Studio debugger.

  • Se non è già stato fatto, aprire la soluzione in Visual Studio.If you haven't already done so, open your solution in Visual Studio. Modificare la destinazione nell' emulatore di HoloLens e la configurazione della build in x86.Change the target to the HoloLens Emulator and the build configuration to x86.
  • Selezionare debug > avviare il debug per distribuire l'app e avviare il debug.Select Debug > Start Debugging to deploy your app and start debugging.
  • Inserisci l'app in tutto il mondo con il mouse, la tastiera o il controller Xbox.Place the app in the world with your mouse, keyboard, or Xbox controller.
  • A questo punto, Visual Studio dovrebbe interrompersi nel codice dell'app.Visual Studio should now break somewhere in your app code.
    • Se l'app non si arresta in modo anomalo o si interrompe nel debugger a causa di un errore non gestito, esaminare una sessione di test delle funzionalità principali dell'app per assicurarsi che tutto sia in esecuzione e funzionante.If your app doesn't immediately crash or break into the debugger because of an unhandled error, then go through a test pass of the core features of your app to make sure everything is running and functional. Potrebbe essere visualizzato un errore simile a quello illustrato di seguito (eccezioni interne gestite).You may see errors like pictured below (internal exceptions that are being handled). Per assicurarsi di non perdere gli errori interni che influiscano sull'esperienza dell'app, eseguire i test automatizzati e gli unit test per assicurarsi che tutto funzioni come previsto.To ensure you don't miss internal errors that impact the experience of your app, run through your automated tests and unit tests to make sure everything behaves as expected.

Emulatore di HoloLens caricato con un esempio UWP che mostra un'eccezione di sistema

Aggiornare l'interfaccia utenteUpdate your UI

Ora che l'app UWP è in esecuzione su auricolari immersivi e HoloLens come ologramma 2D, a questo punto si assicurerà che risulti bello.Now that your UWP app is running on immersive headsets and HoloLens as a 2D hologram, next we'll make sure it looks beautiful. Di seguito sono illustrati alcuni aspetti da considerare:Here are some things to consider:

  • La realtà mista di Windows eseguirà tutte le app 2D con una risoluzione fissa e un valore DPI equivalente a 853x480 pixel effettivi.Windows Mixed Reality will run all 2D apps at a fixed resolution and DPI that equates to 853x480 effective pixels. Valutare se la progettazione necessita di perfezionamento su questa scala ed esaminare le linee guida di progettazione riportate di seguito per migliorare l'esperienza con HoloLens e auricolari immersivi.Consider if your design needs refinement at this scale and review the design guidance below to improve your experience on HoloLens and immersive headsets.
  • La realtà mista di Windows non supporta i riquadri animati 2D.Windows Mixed Reality doesn't support 2D live tiles. Se la funzionalità di base Mostra informazioni su un riquadro animato, è consigliabile riportare le informazioni nell'app o esplorare i lanci di app 3D.If your core functionality is showing information on a live tile, consider moving that information back into your app or explore 3D app launchers.

risoluzione e fattore di ridimensionamento di visualizzazione app 2D2D app view resolution and scale factor

Dalla progettazione reattiva

Windows 10 sposta tutti i progetti visivi da pixel dello schermo reale a effettivi pixel.Windows 10 moves all visual design from real screen pixels to effective pixels. Ciò significa che gli sviluppatori progettano l'interfaccia utente seguendo le linee guida dell'interfaccia umana di Windows 10 per i pixel effettivi e il ridimensionamento di Windows assicura che i pixel effettivi siano le dimensioni corrette per l'usabilità tra dispositivi, soluzioni, DPI e così via.That means, developers design their UI following the Windows 10 Human Interface Guidelines for effective pixels, and Windows scaling ensures those effective pixels are the right size for usability across devices, resolutions, DPI, and so on. Per ulteriori informazioni, vedere la pagina relativa alla presentazione introduttiva su MSDN e questa presentazione di compilazione.See this great read on MSDN and this BUILD presentation for more information.

Anche con la capacità univoca di collocare le app nel mondo a una gamma di distanze, sono consigliate le distanze di visualizzazione TV, per produrre la migliore leggibilità e l'interazione con lo sguardo o il movimento.Even with the unique ability to place apps in your world at a range of distances, TV-like viewing distances are recommended to produce the best readability and interaction with gaze/gesture. Per questo motivo, una lavagna virtuale nella Home realtà mista visualizzerà la visualizzazione UWP piatta in:Because of that, a virtual slate in the Mixed Reality Home will display your flat UWP view at:

1280x720, 150% dpi (853x480 effettivi pixel)1280x720, 150%DPI (853x480 effective pixels)

Questa risoluzione presenta diversi vantaggi:This resolution has several advantages:

  • Questo layout di pixel effettivo avrà circa la stessa densità di informazioni di un tablet o di un piccolo desktop.This effective pixel layout will have about the same information density as a tablet or small desktop.
  • Corrisponde al valore DPI fisso e ai pixel effettivi per le app UWP in esecuzione su Xbox One, consentendo un'esperienza trasparente tra i dispositivi.It matches the fixed DPI and effective pixels for UWP apps running on Xbox One, enabling seamless experiences across devices.
  • Questa dimensione sembra corretta se ridimensionata nell'intervallo di distanza operativa per le app nel mondo.This size looks good when scaled across our range of operating distances for apps in the world.

procedure consigliate per la progettazione dell'interfaccia di visualizzazione app 2D2D app view interface design best practices

FareDo:

  • Seguire le linee guida dell'interfaccia umana di Windows 10 (HIG) per gli stili, le dimensioni dei tipi di carattere e i pulsanti.Follow the Windows 10 Human Interface Guidelines (HIG) for styles, font sizes and button sizes. HoloLens eseguirà il lavoro per garantire che l'app abbia modelli di app compatibili, dimensioni del testo leggibili e dimensioni appropriate per il target target.HoloLens will do the work to ensure your app will have compatible app patterns, readable text sizes, and appropriate hit target sizing.
  • Assicurarsi che l'interfaccia utente segua le procedure consigliate per la progettazione reattiva per ottenere risultati ottimali con la risoluzione univoca di HOLOLENS e dpi.Ensure your UI follows best practices for responsive design to look best at HoloLens's unique resolution and DPI.
  • Usare le raccomandazioni relative al tema colori "Light" di Windows.Use the "light" color theme recommendations from Windows.

Non:Don't:

  • Modificare l'interfaccia utente in modo drastico quando si è in realtà mista, per garantire agli utenti un'esperienza familiare all'interno e all'esterno dell'auricolare.Change your UI too drastically when in mixed reality, to ensure users have a familiar experience in and out of the headset.

Informazioni sul modello di appUnderstand the app model

Il modello di app per la realtà mista è progettato per l'uso della Home realtà mista, in cui molte app si trovano insieme.The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. Si può pensare a questo come l'equivalente della realtà mista del desktop, in cui è possibile eseguire molte app 2D in una sola volta.Think of this as the mixed reality equivalent of the desktop, where you run many 2D apps at once. Ciò ha implicazioni sul ciclo di vita dell'app, i riquadri e altre funzionalità chiave dell'app.This has implications on app life cycle, Tiles, and other key features of your app.

Barra dell'app e pulsante indietroApp bar and back button

le visualizzazioni 2D sono decorate con una barra dell'app sopra il contenuto.2D views are decorated with an app bar above their content. La barra dell'app presenta due punti di personalizzazione specifici dell'app:The app bar has two points of app-specific personalization:

Title: Visualizza il DisplayName del riquadro associato all'istanza dell'appTitle: displays the displayname of the Tile associated with the app instance

Back Button: genera l'evento backrequested quando viene premuto.Back Button: raises the BackRequested event when pressed. La visibilità del pulsante indietro è controllata da SystemNavigationManager. AppViewBackButtonVisibility.Back Button visibility is controlled by SystemNavigationManager.AppViewBackButtonVisibility.

Interfaccia utente della barra dell'app nella visualizzazione app 2DApp bar UI in 2D app view
Interfaccia utente della barra dell'app nella visualizzazione app 2DApp bar UI in 2D app view

Testare la progettazione dell'app 2DTest your 2D app's design

È importante testare l'app per verificare che il testo sia leggibile, che i pulsanti siano mirabili e che l'app complessiva appaia corretta.It's important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. È possibile eseguire il test su un auricolare desktop, un HoloLens, un emulatore o un dispositivo touch con risoluzione impostata sul 1280x720 @150 %.You can test on a desktop headset, a HoloLens, an emulator, or a touch device with resolution set to 1280x720 @150%.

Nuove possibilità di inputNew input possibilities

HoloLens usa sensori di profondità avanzati per vedere il mondo e visualizzare gli utenti.HoloLens uses advanced depth sensors to see the world and see users. Questo consente movimenti avanzati della mano, ad esempio Bloom e il tocco aereo.This enables advanced hand gestures like bloom and air-tap. I microtelefoni potenti consentono anche l' esperienza vocale.Powerful microphones also enable voice experiences.

Con le cuffie Desktop, gli utenti possono usare i controller di movimento per puntare alle app e intervenire.With Desktop headsets, users can use motion controllers to point at apps and take action. Possono anche usare un gamepad, destinando gli oggetti allo sguardo.They can also use a gamepad, targeting objects with their gaze.

Windows si occupa di tutte queste complessità per le app UWP, traducendo lo sguardo, i movimenti, la voce e l'input del controller di movimento per gli eventi del puntatore che astraggono il meccanismo di input.Windows takes care of all of this complexity for UWP apps, translating your gaze, gestures, voice, and motion controller input to pointer events that abstract away the input mechanism. Ad esempio, è possibile che un utente abbia eseguito un tocco con la propria mano o abbia premuto il trigger SELECT in un controller di movimento, ma le applicazioni 2D non devono sapere da dove proviene l'input, ma solo una pressione 2D touch, come se si trattasse di un touchscreen.For example, a user may have done an air-tap with their hand or pulled the Select trigger on a motion controller, but 2D applications don't need to know where the input came from - they just see a 2D touch press, as if on a touchscreen.

Ecco i concetti e gli scenari di alto livello che è necessario comprendere per l'input quando si porta l'app UWP in HoloLens:Here are the high-level concepts/scenarios you should understand for input when bringing your UWP app to HoloLens:

  • Lo sguardo si sposta negli eventi di passaggio del mouse, che possono attivare menu, riquadri a comparsa o altri elementi dell'interfaccia utente per apparire semplicemente guardando l'app.Gaze turns into hover events, which can unexpectedly trigger menus, flyouts or other user interface elements to pop up just by gazing around your app.
  • Lo sguardo non è preciso come l'input del mouse.Gaze isn't as precise as mouse input. USA destinazioni di hit size appropriate per HoloLens, come le applicazioni per dispositivi mobili intuitive per il tocco.Use appropriately sized hit targets for HoloLens, similar to touch-friendly mobile applications. Gli elementi piccoli vicino ai bordi dell'app sono particolarmente difficili da interagire con.Small elements near the edges of the app are especially hard to interact with.
  • Gli utenti devono passare dalla modalità di input allo scorrimento fino a due panning con due dita.Users must switch input modes to go from scrolling to dragging to two finger panning. Se l'app è stata progettata per l'input tocco, provare a garantire che nessuna funzionalità principale venga bloccata dietro la Panoramica di due dita.If your app was designed for touch input, consider ensuring that no major functionality is locked behind two finger panning. In tal caso, valutare la possibilità di usare meccanismi di input alternativi come pulsanti che possono avviare due panning del dito.If so, consider having alternative input mechanisms like buttons that can start two finger panning. L'app Maps, ad esempio, è in grado di ingrandire due dita, ma presenta un pulsante con il segno più, il segno meno e la rotazione per simulare le stesse interazioni di zoom con singoli clic.For example, the Maps app can zoom with two finger panning but has a plus, minus, and rotate button to simulate the same zoom interactions with single clicks.

L' input vocale è una parte essenziale dell'esperienza di realtà mista.Voice input is a critical part of the mixed reality experience. Sono state abilitate tutte le API vocali che si trovano in Windows 10 Cortana quando si usa un auricolare.We've enabled all of the speech APIs that are in Windows 10 powering Cortana when using a headset.

Pubblicare e gestire l'app universalePublish and Maintain your Universal app

Quando l'app è in esecuzione, creare un pacchetto dell'app per inviarla al Microsoft Store.Once your app is up and running, package your app to submit it to the Microsoft Store.

Vedere ancheSee also