Actualización de aplicaciones para UWP en 2D para Windows Mixed RealityUpdating 2D UWP apps for Windows Mixed Reality

Windows Mixed Reality permite a los usuarios ver hologramas como si estuvieran en torno a ellos en el mundo físico y digital.Windows Mixed Reality lets your users see holograms as if they're right around them in the physical and digital world. En su núcleo, tanto HoloLens como los equipos de escritorio a los que se conectan los accesorios de auriculares más envolventes a los dispositivos de Windows 10.At its core, both HoloLens and the Desktop PCs you attach immersive headset accessories to are Windows 10 devices. Puede ejecutar prácticamente todas las aplicaciones Plataforma universal de Windows (UWP) en el almacén como aplicaciones 2D.You're able to run almost all Universal Windows Platform (UWP) apps in the Store as 2D apps.

Creación de una aplicación para UWP en 2D para la realidad mixtaCreating a 2D UWP app for mixed reality

El primer paso para llevar una aplicación 2D a los auriculares de realidad mixta es hacer que la aplicación se ejecute como una aplicación 2D estándar en el monitor de escritorio.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.

Creación de una nueva aplicación para UWP en 2DBuilding a new 2D UWP app

Para compilar una nueva aplicación de 2D para Mixed Reality, debe compilar una aplicación estándar de 2D Plataforma universal de Windows (UWP).To build a new 2D app for mixed reality, you build a standard 2D Universal Windows Platform (UWP) app. No es necesario ningún otro cambio en la aplicación para que esa aplicación se ejecute como una pizarra en la realidad mixta.No other app changes are required for that app to then run as a slate in mixed reality.

Para empezar a crear una aplicación de UWP en 2D, consulte el artículo creación de su primera aplicación .To get started building a 2D UWP app, check out the Create your first app article.

Incorporación de una aplicación de la tienda 2D existente a UWPBringing an existing 2D Store app to UWP

Si ya tiene una aplicación de Windows en 2D en la tienda, asegúrese de que tiene como destino la Plataforma universal de Windows de Windows 10 (UWP).If you already have a 2D Windows app in the Store, make sure it's targeting the Windows 10 Universal Windows Platform (UWP). Estos son los posibles puntos de partida que puede tener con la aplicación de la tienda hoy:Here are all the potential starting points you may have with your Store app today:

Punto de partidaStarting Point Destino de la plataforma de manifiesto AppXAppX Manifest Platform Target ¿Cómo se convierte en universal?How to make this Universal?
Windows Phone (Silverlight)Windows Phone (Silverlight) Manifiesto de aplicación de SilverlightSilverlight App Manifest Migrar a WinRTMigrate to WinRT
Windows Phone universal 8,1Windows Phone 8.1 Universal 8,1 manifiesto de AppX que no incluye el destino de la plataforma8.1 AppX Manifest that Doesn't Include Platform Target Migrar la aplicación a la Plataforma universal de WindowsMigrate your app to the Universal Windows Platform
Tienda Windows 8Windows Store 8 8 manifiesto AppX que no incluye el destino de la plataforma8 AppX Manifest that Doesn't Include Platform Target Migrar la aplicación a la Plataforma universal de WindowsMigrate your app to the Universal Windows Platform
Tienda Windows 8,1 universalWindows Store 8.1 Universal 8,1 manifiesto de AppX que no incluye el destino de la plataforma8.1 AppX Manifest that Doesn't Include Platform Target Migrar la aplicación a la Plataforma universal de WindowsMigrate your app to the Universal Windows Platform

Si tiene una aplicación de Unity de 2D compilada actualmente como una aplicación Win32 en el equipo, Mac & destino de compilación independiente de Linux, cambie al destino de compilación plataforma universal de Windows para la realidad mixta.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.

Hablaremos sobre las formas en que puede restringir la aplicación específicamente a HoloLens mediante la familia de dispositivos Windows. Holographic a continuación.We'll talk about ways that you can restrict your app specifically to HoloLens using the Windows.Holographic device family below.

Ejecutar la aplicación en 2D en un casco con Windows Mixed RealityRun your 2D app in a Windows Mixed Reality immersive headset

Si ha implementado la aplicación 2D en una máquina de escritorio y la ha probado en el monitor, está listo para probarla en un casco de escritorio envolvente.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!

Solo tiene que ir al menú Inicio dentro del casco de realidad mixta e iniciar la aplicación desde allí.Just go to the Start menu within the mixed reality headset and launch the app from there. El shell de escritorio y el shell holográfica comparten el mismo conjunto de aplicaciones UWP, por lo que la aplicación ya debe estar presente una vez que se haya implementado desde 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.

Establecer como destino los auriculares que se envolverán y HoloLensTargeting both immersive headsets and HoloLens

Felicidades.Congratulations! La aplicación está usando Windows 10 Plataforma universal de Windows (UWP).Your app is now using the Windows 10 Universal Windows Platform (UWP).

La aplicación ahora es capaz de ejecutarse en los dispositivos Windows de hoy en día, como escritorio, móviles, Xbox, Windows Mixed Reality con auriculares más envolventes, HoloLens y futuros dispositivos 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. Sin embargo, para tener como destino todos los dispositivos, deberá asegurarse de que la aplicación esté destinada a Windows.However, to actually target all of those devices, you will need to ensure your app is targeting the Windows. Familia de dispositivos universales.Universal device family.

Cambiar la familia de dispositivos a Windows. universalChange your device family to Windows.Universal

Ahora vamos a pasar al manifiesto de AppX para asegurarse de que la aplicación para UWP de Windows 10 pueda ejecutarse en HoloLens:Now let's jump into your AppX manifest to ensure your Windows 10 UWP app can run on HoloLens:

  • Abra el archivo de solución de la aplicación con Visual Studio y navegue hasta el manifiesto del paquete de la aplicación.Open your app's solution file with Visual Studio and navigate to the app package manifest
  • Haga clic con el botón derecho en el archivo Package. appxmanifest de la solución y vaya a Ver código .Right-click the Package.appxmanifest file in your Solution and go to View Code
    Package. appxmanifest en Explorador de solucionespackage.appxmanifest in Solution Explorer
  • Asegúrese de que la plataforma de destino es Windows.Ensure your Target Platform is Windows. Universal en la sección de dependenciasUniversal in the dependencies section
    <Dependencies>
      <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10240.0" MaxVersionTested="10.0.10586.0" />
    </Dependencies>
    
  • Guardar!Save!

Si no usa Visual Studio para su entorno de desarrollo, puede abrir AppXManifest.xml en el editor de texto de su elección para asegurarse de que tiene como destino 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.

Ejecutar en el emulador de HoloLensRun in the HoloLens Emulator

Ahora que la aplicación para UWP tiene como destino "Windows. universal", vamos a compilar la aplicación y ejecutarla en el emulador de HoloLens.Now that your UWP app targets "Windows.Universal", let's build your app and run it in the HoloLens Emulator.

  • Asegúrese de que está instalado el emulador de HoloLens.Make sure you're installed the HoloLens Emulator.

  • En Visual Studio, seleccione la configuración de compilación x86 para la aplicación.In Visual Studio, select the x86 build configuration for your app

    Configuración de compilación x86 en Visual Studio

  • Selecciona Emulador de HoloLens en el menú desplegable de destino de la implementación.Select HoloLens Emulator in the deployment target drop-down menu

    Emulador de HoloLens en la lista de destinos de implementación

  • Seleccione Depurar > iniciar depuración para implementar la aplicación e iniciar la depuración.Select Debug > Start Debugging to deploy your app and start debugging.

  • El emulador se iniciará y ejecutará la aplicación.The emulator will start and run your app.

  • Con un teclado, un mouse y un controlador de Xbox, coloca la aplicación en el mundo para iniciarla.With a keyboard, mouse, and an Xbox controller, place your app in the world to launch it.

    Emulador de HoloLens cargado con un ejemplo de UWP

Pasos siguientesNext steps

En este momento, pueden producirse dos cosas:At this point, one of two things can happen:

  1. La aplicación mostrará la pantalla de presentación y comenzará a ejecutarse después de colocarla en el emulador.Your app will show its splash and start running after it's placed in the Emulator! Genial.Awesome!
  2. O bien, después de ver una animación de carga para un holograma de 2D, la carga se detendrá y solo verá la aplicación en la pantalla de presentación.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. Esto significa que se produjo un error y que se realizará una investigación más para entender cómo hacer que la aplicación cobre vida en la realidad mixta.This means that something went wrong and it will take more investigation to understand how to bring your app to life in Mixed Reality.

Deberá depurar para llegar a la raíz de los posibles problemas que detienen la finalización de la aplicación de UWP en HoloLens.You'll need to debug to get to the root of possible issues that are stopping your UWP app from starting on HoloLens.

Ejecutar la aplicación para UWP en el depuradorRunning your UWP app in the debugger

Estos pasos le guiarán a través de la depuración de la aplicación para UWP mediante el depurador de Visual Studio.These steps will walk you through debugging your UWP app using the Visual Studio debugger.

  • Si todavía no lo ha hecho, abra la solución en Visual Studio.If you haven't already done so, open your solution in Visual Studio. Cambie el destino al emulador de HoloLens y la configuración de compilación a x86.Change the target to the HoloLens Emulator and the build configuration to x86.
  • Seleccione Depurar > iniciar depuración para implementar la aplicación e iniciar la depuración.Select Debug > Start Debugging to deploy your app and start debugging.
  • Coloque la aplicación en el mundo con el mouse, el teclado o la controladora Xbox.Place the app in the world with your mouse, keyboard, or Xbox controller.
  • Visual Studio ahora debería interrumpir en algún lugar del código de la aplicación.Visual Studio should now break somewhere in your app code.
    • Si la aplicación no se bloquea inmediatamente o se interrumpe en el depurador debido a un error no controlado, siga un paso de prueba de las características principales de la aplicación para asegurarse de que todo esté en funcionamiento y en funcionamiento.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. Es posible que vea errores como los que se muestran a continuación (excepciones internas que se están controlando).You may see errors like pictured below (internal exceptions that are being handled). Para asegurarse de que no se pierdan los errores internos que afectan a la experiencia de la aplicación, ejecute las pruebas automatizadas y las pruebas unitarias para asegurarse de que todo se comporta según lo esperado.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.

El emulador de HoloLens se cargó con un ejemplo de UWP que muestra una excepción del sistema

Actualizar la interfaz de usuarioUpdate your UI

Ahora que la aplicación para UWP se está ejecutando en auriculares envolventes y HoloLens como un holograma de 2D, nos aseguraremos de que parezca bonito.Now that your UWP app is running on immersive headsets and HoloLens as a 2D hologram, next we'll make sure it looks beautiful. Algunos aspectos que debe considerar:Here are some things to consider:

  • Windows Mixed Reality ejecutará todas las aplicaciones 2D con una resolución fija y un PPP equivalentes a los píxeles efectivos de 853x480.Windows Mixed Reality will run all 2D apps at a fixed resolution and DPI that equates to 853x480 effective pixels. Considere la posibilidad de que su diseño necesite perfeccionarse a esta escala y revise las instrucciones de diseño que se indican a continuación para mejorar su experiencia en HoloLens y en auriculares de gran tamaño.Consider if your design needs refinement at this scale and review the design guidance below to improve your experience on HoloLens and immersive headsets.
  • Windows Mixed Reality no admite mosaicos dinámicos 2D.Windows Mixed Reality doesn't support 2D live tiles. Si la funcionalidad principal muestra información sobre un icono dinámico, considere la posibilidad de mover esa información de nuevo a la aplicación o explore los iniciadores de aplicaciones 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.

resolución de vista de aplicación 2D y factor de escala2D app view resolution and scale factor

Del diseño con capacidad de respuesta

Windows 10 mueve todo el diseño visual de píxeles de pantalla reales a píxeles efectivos.Windows 10 moves all visual design from real screen pixels to effective pixels. Esto significa que los desarrolladores diseñan su interfaz de usuario siguiendo las directrices de la interfaz de usuario de Windows 10 para píxeles efectivos y el escalado de Windows garantiza que los píxeles efectivos son el tamaño adecuado para la facilidad de uso en dispositivos, resoluciones, PPP, etc.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. Vea esta excelente lectura en MSDN y esta presentación de compilación para obtener más información.See this great read on MSDN and this BUILD presentation for more information.

Incluso con la capacidad exclusiva para colocar aplicaciones en su mundo a una gran distancia, se recomiendan distancias de visualización similares a las de la televisión para obtener la mejor legibilidad y la interacción con la función de toque y gesto.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. Por eso, una pizarra virtual en la Página principal de la realidad mixta mostrará la vista plana de UWP en:Because of that, a virtual slate in the Mixed Reality Home will display your flat UWP view at:

1280x720, 150% ppp (píxeles efectivos 853x480)1280x720, 150%DPI (853x480 effective pixels)

Esta resolución tiene varias ventajas:This resolution has several advantages:

  • Este diseño de píxeles efectivo tendrá aproximadamente la misma densidad de información que una tableta o un pequeño escritorio.This effective pixel layout will have about the same information density as a tablet or small desktop.
  • Coincide con el PPP fijo y los píxeles efectivos de las aplicaciones UWP que se ejecutan en Xbox One, lo que permite experiencias sin problemas en todos los dispositivos.It matches the fixed DPI and effective pixels for UWP apps running on Xbox One, enabling seamless experiences across devices.
  • Este tamaño es bueno cuando se escala a través de nuestra gama de distancias de funcionamiento para aplicaciones del mundo.This size looks good when scaled across our range of operating distances for apps in the world.

procedimientos recomendados de diseño de la interfaz de vista de aplicaciones 2D2D app view interface design best practices

NoDo:

  • Siga las directrices de la interfaz de usuario de Windows 10 (hig) para los estilos, tamaños de fuente y tamaños de botón.Follow the Windows 10 Human Interface Guidelines (HIG) for styles, font sizes and button sizes. HoloLens realizará el trabajo para asegurarse de que la aplicación tendrá patrones de aplicación compatibles, tamaños de texto legible y un tamaño de destino de aciertos adecuado.HoloLens will do the work to ensure your app will have compatible app patterns, readable text sizes, and appropriate hit target sizing.
  • Asegúrese de que la interfaz de usuario sigue las prácticas recomendadas para que el diseño responda mejor en la resolución y el PPP únicos de HoloLens.Ensure your UI follows best practices for responsive design to look best at HoloLens's unique resolution and DPI.
  • Use las recomendaciones de tema de color "Light" desde Windows.Use the "light" color theme recommendations from Windows.

No:Don't:

  • Cambie la interfaz de usuario demasiado drásticamente cuando esté en realidad mixta para asegurarse de que los usuarios tengan una experiencia familiar dentro y fuera del casco.Change your UI too drastically when in mixed reality, to ensure users have a familiar experience in and out of the headset.

Descripción del modelo de aplicaciónUnderstand the app model

El modelo de aplicación de la realidad mixta está diseñado para usar la Página principal de realidad mixta, donde muchas aplicaciones se encuentran juntas.The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. Piense en esto como el equivalente de realidad mixta del escritorio, donde se ejecutan muchas aplicaciones 2D a la vez.Think of this as the mixed reality equivalent of the desktop, where you run many 2D apps at once. Esto tiene implicaciones en el ciclo de vida de la aplicación, los mosaicos y otras características clave de la aplicación.This has implications on app life cycle, Tiles, and other key features of your app.

Barra de aplicación y botón atrásApp bar and back button

las vistas 2D se decoran con una barra de la aplicación por encima de su contenido.2D views are decorated with an app bar above their content. La barra de la aplicación tiene dos puntos de personalización específicos de la aplicación:The app bar has two points of app-specific personalization:

Título: muestra el nombre para Mostrar del icono asociado a la instancia de la aplicación.Title: displays the displayname of the Tile associated with the app instance

Botón atrás: genera el evento solicitado cuando se presiona.Back Button: raises the BackRequested event when pressed. SystemNavigationManager. AppViewBackButtonVisibility controla la visibilidad del botón atrás.Back Button visibility is controlled by SystemNavigationManager.AppViewBackButtonVisibility.

Interfaz de usuario de la barra de aplicación en la vista de aplicación 2DApp bar UI in 2D app view
Interfaz de usuario de la barra de aplicación en la vista de aplicación 2DApp bar UI in 2D app view

Prueba del diseño de la aplicación 2DTest your 2D app's design

Es importante probar la aplicación para asegurarse de que el texto se puede leer, de que los botones son de destino y de que la aplicación general es correcta.It's important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. Puede probar en un auricular de escritorio, HoloLens, un emulador o un dispositivo táctil con la resolución establecida en 1280x720 @150 %.You can test on a desktop headset, a HoloLens, an emulator, or a touch device with resolution set to 1280x720 @150%.

Nuevas posibilidades de entradaNew input possibilities

HoloLens usa sensores avanzados de profundidad para ver el mundo y ver los usuarios.HoloLens uses advanced depth sensors to see the world and see users. Esto permite gestos de mano avanzados como el floración y el toque de aire.This enables advanced hand gestures like bloom and air-tap. Los micrófonos eficaces también habilitan las experiencias de voz.Powerful microphones also enable voice experiences.

Con los auriculares de escritorio, los usuarios pueden usar los controladores de movimiento para apuntar a las aplicaciones y tomar medidas.With Desktop headsets, users can use motion controllers to point at apps and take action. También pueden usar un controlador de juegos, orientados a objetos con miras.They can also use a gamepad, targeting objects with their gaze.

Windows se encarga de toda esta complejidad en el caso de las aplicaciones UWP, la traducción de la entrada de la mirada, los gestos, la voz y el controlador de movimiento a los eventos de puntero que abstraen el mecanismo de entrada.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. Por ejemplo, un usuario puede haber realizado una pulsación aérea con su mano o haber extraído el desencadenador SELECT en un controlador de movimiento, pero las aplicaciones 2D no necesitan saber de dónde procede la entrada, sino que solo ven una prensa táctil 2D, como si estuvieran en una pantalla táctil.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.

Estos son los conceptos y escenarios de alto nivel que debe comprender para la entrada al llevar su aplicación de UWP a HoloLens:Here are the high-level concepts/scenarios you should understand for input when bringing your UWP app to HoloLens:

  • Mira los eventos de mantener el mouse, que pueden desencadenar inesperadamente menús, controles flotantes u otros elementos de la interfaz de usuario para que aparezcan simplemente Gazing en torno a la aplicación.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.
  • Mira fijamente no es tan preciso como la entrada del mouse.Gaze isn't as precise as mouse input. Use los objetivos de aciertos de tamaño adecuado para HoloLens, similares a las aplicaciones móviles táctiles.Use appropriately sized hit targets for HoloLens, similar to touch-friendly mobile applications. Los elementos pequeños cerca de los bordes de la aplicación son especialmente difíciles de interactuar con ellos.Small elements near the edges of the app are especially hard to interact with.
  • Los usuarios deben cambiar los modos de entrada para pasar de desplazamiento a dos movimientos de movimiento.Users must switch input modes to go from scrolling to dragging to two finger panning. Si la aplicación se ha diseñado para la entrada táctil, considere la posibilidad de asegurarse de que no se bloquee ninguna funcionalidad principal detrás de dos dedos.If your app was designed for touch input, consider ensuring that no major functionality is locked behind two finger panning. Si es así, considere la posibilidad de tener mecanismos de entrada alternativos, como botones que pueden iniciar dos panorámicas de dedo.If so, consider having alternative input mechanisms like buttons that can start two finger panning. Por ejemplo, la aplicación de mapas puede hacer zoom con dos movimientos panorámicos, pero tiene un botón más, menos y girar para simular las mismas interacciones de zoom con un solo 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.

La entrada de voz es una parte fundamental de la experiencia de realidad mixta.Voice input is a critical part of the mixed reality experience. Se han habilitado todas las API de voz que se encuentran en Windows 10 al encender Cortana al usar un casco.We've enabled all of the speech APIs that are in Windows 10 powering Cortana when using a headset.

Publicar y mantener la aplicación universalPublish and Maintain your Universal app

Una vez que la aplicación esté en funcionamiento, empaquete la aplicación para enviarla a la Microsoft Store.Once your app is up and running, package your app to submit it to the Microsoft Store.

Consulte tambiénSee also