Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creando Aplicaciones UWP para Xbox One

2,529 views

Published on

En esta sesión vemos las claves y detalles a tener en cuenta para tener nuestra aplicación UWP funcionando en Xbox One.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Creando Aplicaciones UWP para Xbox One

  1. 1. Creando aplicaciones UWP para Xbox One Sevilla Windows //REBUILD Javier Suárez
  2. 2. CartujaDotNet Javier Suárez Ruiz Software Developer at Plain Concepts Microsoft MVP Windows Platform Development • Blog: http://geeks.ms/blogs/jsuarez • Email: javiersuarezruiz@hotmail.com • Twitter: @jsuarezruiz
  3. 3. CartujaDotNet Agenda La experiencia con “10 pies” 1. Conceptos básicos 2. DEMO: Nuestra App UWP Activar Dev Mode GamePad y Layout 1. Uso del GamePad 2. XY Focus 3. Debugging tips Adaptar a TV 1. TV-safe area Sonidos
  4. 4. La experiencia “10 pies”
  5. 5. CartujaDotNet “experiencia 10 pies” vs. “experiencia 2 pies”
  6. 6. CartujaDotNet Siempre simple
  7. 7. CartujaDotNet Pero coherente
  8. 8. CartujaDotNet Y cautivar
  9. 9. CartujaDotNet Universal Windows Platform & plataformas
  10. 10. CartujaDotNet Universal Windows Platform & plataformas Llegar a cada dispositivo Windows con una misma App Fácil adaptar la App ofreciendo una experiencia adaptada a cada dispositivo
  11. 11. Activar el modo desarrollador
  12. 12. CartujaDotNet Dev Mode
  13. 13. CartujaDotNet Dev Mode Activation App
  14. 14. CartujaDotNet Activar Dev Mode
  15. 15. CartujaDotNet Dev Mode
  16. 16. CartujaDotNet Dev Mode
  17. 17. DEMODEMODEMO Nuestra aplicación UWP
  18. 18. CartujaDotNet 1. Un mismo Sistema de diseño UWP. En muchos casos, exactamente el mismo código se comportará de la forma adecuada para ofrecer la major experiencia en cada situación.. 2. Podemos modificar el comportamiento por defecto. Cuando se soportan multiples comportamientos en el mismo código, podemos utilizer el que major se adapte a nuestra aplicación en la familia de dipositivos utilizada. 3. En caso de necesitar diseño totalmente diferente podemos crear vistas exclusivas. UWP permite seguir comparitendo el código pero utilizando una vista totalmente diferente. Y… ¿cómo conseguimos todo lo anterior en una misma App UWP?!?!
  19. 19. CartujaDotNet
  20. 20. CartujaDotNet Conceptos básicos de interacciones con el Gamepad y Remote
  21. 21. CartujaDotNet Application.RequiresPointer= "Auto" : XY Focus o puntero dependiendo del dispositivo (por defecto) "WhenRequested" : XY Focus, except en controles donde se especifique Para controles o páginas específicas donde el punter tenga sentido: Control.RequiresPointer="WhenFocused"> o Control.RequiresPointer="WhenEngaged"> Configurando XY Focus vs. puntero
  22. 22. CartujaDotNet Botones del Gamepad y el Remote
  23. 23. CartujaDotNet Los más usadosInputs Botón Stick/D-pad izquierdo Comportamiento Mueve el focoFocus
  24. 24. CartujaDotNet Los más usados Botón Stick/D-pad izquierdo A/Select Comportamiento Mueve el foco “Click”
  25. 25. CartujaDotNet Botón Stick/D-pad izquierdo A/Select B/Back Comportamiento Mueve el foco “Click” Ir atrás Los más usados
  26. 26. CartujaDotNet Botón Stick/D-pad izquierdo A/Select B/Back Menu Comportamiento Mover el foco “Click” Ir atrás Mostrar menu contextual Los más usados
  27. 27. CartujaDotNet Botón Stick/D-pad izquierdo A/Select B/Back Menu View Comportamiento Move Focus “Click” Go Back Mostrar menus contextuales Motrar paneles Los más usados
  28. 28. CartujaDotNet Botones del Gamepad y el Remote Botón Stick/D-pad izquierdo A/Select B/Back Menu View Comportamiento Move Focus “Click” Go Back Mostrar menus contextuales Motrar paneles
  29. 29. CartujaDotNet Botones del Gamepad y Remote Botón Comportamiento ¿Cómo? Stick/D-pad izquierdo Mover el foco <Application RequiresPointer="WhenRequested">
  30. 30. CartujaDotNet Botones del Gamepad y Remote Botón Comportamiento ¿Cómo? Stick/D-pad izquierdo Mover el foco <Application RequiresPointer="WhenRequested"> A/Select “Click” Usado por defecto en controles como Button, ListView, MenuFlyout, etc. Si creamos controles personales, responde al evento de la barra de espacio.
  31. 31. CartujaDotNet Botones del Gamepad y Remote Botón Comportamiento ¿Cómo? Stick/D-pad izquierdo Mover el foco <Application RequiresPointer="WhenRequested"> A/Select “Click” Usado por defecto en controles como Button, ListView, MenuFlyout, etc. Si creamos controles personales, responde al evento de la barra de espacio. B/Back Ir atrás Responde al evento SystemNavigationManager.BackRequested cuando implementamos la navegación atrás
  32. 32. CartujaDotNet Botones del Gamepad y Remote Botón Comportamiento ¿Cómo? Stick/D-pad izquierdo Mover el foco <Application RequiresPointer="WhenRequested"> A/Select “Click” Usado por defecto en controles como Button, ListView, MenuFlyout, etc. Si creamos controles personales, responde al evento de la barra de espacio. B/Back Ir atrás Responde al evento SystemNavigationManager.BackRequested cuando implementamos la navegación atrás Menu Mostrar menu contextual Muestra menús del tipo ContextFlyout y responde al evento ContextRequested.
  33. 33. CartujaDotNet Botones del Gamepad y Remote Botón Comportamiento ¿Cómo? Stick/D-pad izquierdo Mover el foco <Application RequiresPointer="WhenRequested"> A/Select “Click” Usado por defecto en controles como Button, ListView, MenuFlyout, etc. Si creamos controles personales, responde al evento de la barra de espacio. B/Back Go Back Responde al evento SystemNavigationManager.BackRequested cuando implementamos la navegación atrás Menu Mostrar menu contextual Muestra menús del tipo ContextFlyout y responde al evento ContextRequested. View Mostrar paneles Eventos GamepadView y NavigationView.
  34. 34. CartujaDotNet Gamepad y Remote. Botones adicionales Botón L/R Trigger Comportamiento Página arriba/abajo
  35. 35. CartujaDotNet Gamepad y Remote. Botones adicionalesInputs Botón L/R Trigger L/R Bumper Comportamiento Página arriba/abajo Página izq/derecha
  36. 36. CartujaDotNet Gamepad y Remote. Botones adicionalesInputs Botón L/R Trigger L/R Bumper Right stick Comportamiento Página arriba/abajo Página izq/derecha Pan
  37. 37. CartujaDotNet Gamepad y Remote. Botones adicionalesInputs Botón L/R Trigger L/R Bumper Right stick X, Y Comportamiento Página arriba/abajo Página izq/derecha Pan App shortcuts
  38. 38. CartujaDotNet Gamepad y Remote. Botones adicionalesInputs Botón L/R Trigger L/R Bumper Right stick X, Y Pause, Play, etc. Comportamiento Página arriba/abajo Página izq/derecha Pan App shortcuts Media playback
  39. 39. CartujaDotNet Saca todo el partido a los botones!
  40. 40. CartujaDotNet Ajustar XY Focus IsTabStop=true & Visibility=Visible
  41. 41. CartujaDotNet Ajustar XY Focus
  42. 42. CartujaDotNet Ajustar XY Focus
  43. 43. CartujaDotNet Ajustar XY Focus
  44. 44. CartujaDotNet Ajustar XY Focus
  45. 45. CartujaDotNet Tuning XY Focus
  46. 46. CartujaDotNet Tuning XY Focus foofoo foo.XYFocusRight = bar;
  47. 47. DEMODEMODEMO Optimizando la App para gamepad
  48. 48. CartujaDotNet ¿No sabes donde esta el foco? Añadimos: page.GotFocus += (object sender, RoutedEventArgs e) => { FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement; Debug.WriteLine("got focus: " + focus.Name + " (" + focus.GetType().ToString() + ")"); }; Debugging tips
  49. 49. CartujaDotNet Más trucos para ajustar la experiencia XY Focus Establece el foco inicial en algo “razonable” Crea el Layout con el ciclo de movimientos y el foco en mente. Tener el foco en mente también al ajustar Tamaños, para ofrecer la major experiencia possible cuando cambie el mismo.
  50. 50. CartujaDotNet Gestión de ‘trampas de enfoque’ e interacciones complejas
  51. 51. CartujaDotNet Focus Engagement permite al usuario “enganchar” un control para interaccionar con él, y retornar el XY Focus de la navegación Pulsamos A para “enganchar.” Mejorar el foco
  52. 52. CartujaDotNet Focus Engagement permite al usuario “enganchar” un control para interaccionar con él, y retornar el XY Focus de la navegación Pulsamos A para “enganchar.” Usamos izq/derecho/arriba/abajo para interaccionar con el control Mejorar foco
  53. 53. CartujaDotNet Focus Engagement permite al usuario “enganchar” un control para interaccionar con él, y retornar el XY Focus de la navegación Pulsamos A para “enganchar.” Usamos izq/derecho/arriba/abajo para interaccionar con el control Pulsamos B para “desenganchar.” control.IsFocusEngagmentEnabled="true" (por defecto en el Slider) Mejorar foco
  54. 54. CartujaDotNet Por defecto, foco tradicional con “marching ants” Mostrando el foco…
  55. 55. CartujaDotNet Foco de alta visibilidad Foco con alta visibilidad
  56. 56. CartujaDotNet Configurando alta visibilidad en foco De forma predeterminada en la próxima actualización de Windows 10 Application.FocusVisualKind="HighVisibility" Puede ser ajustado ´por element visual FocusVisualMargin FocusVisualPrimaryBrush FocusVisualPrimaryThickness FocusVisualSecondaryBrush FocusVisualSecondaryThickness
  57. 57. CartujaDotNet Ocurecer el fondo cuando mostramos elementos supuerpuestos (e.j. Flyout) Flyout.LightDismissOverlayMode="Auto" Disponible en los siguientes controles: Potenciando el foco de elementos superpuestos AppBar AutoSuggestBox CalendarDatePicker ComboBox DatePicker FlyoutBase Flyout MenuFlyout Popup SplitView TimePicker
  58. 58. CartujaDotNet
  59. 59. CartujaDotNet La experiencia “10 pies” debería ser ~200% de lo que se ve en la experiencia “2 pies” La resolución por defecto de las Apps en Xbox es de 960 x 540 pixels efectivos El tamaño de la UI
  60. 60. DEMODEMODEMO Depurando el foco
  61. 61. CartujaDotNet El tamaño de la UI (en píxeles efectivos) 360 x 640
  62. 62. CartujaDotNet La zona azul no esta presente en todas las TVs La zona “TV-safe” es todo el área azul Las Apps UWP por defecto mantienen su UI dentro del área TV- safe. Las Apps deben extender su UI no esencial a los márgenes para ofrecer la major experiencia possible. TV-safe area
  63. 63. DEMODEMODEMO Optimizando para TV
  64. 64. CartujaDotNet Colores
  65. 65. CartujaDotNet Colores en TV
  66. 66. CartujaDotNet Ayuda a los usuarios a entender la interacción Los controles de la plataforma tienen sonidos por defecto Si creamos nuevos controles personales, podemos añador los sonidos: ElementSoundPlayer.Play(ElementSoundKind.Focus); ElementSoundPlayer.Play(ElementSoundKind.Invoke); ElementSoundPlayer.Play(ElementSoundKind.GoBack); ElementSoundPlayer.Play(ElementSoundKind.Show); ElementSoundPlayer.Play(ElementSoundKind.Hide); ElementSoundPlayer.Play(ElementSoundKind.MoveNext); ElementSoundPlayer.Play(ElementSoundKind.MovePrevious); Sonidos
  67. 67. DEMODEMODEMO Sonidos
  68. 68. CartujaDotNet Preguntas y respuestas. ¿Dudas? &
  69. 69. CartujaDotNet Muchas gracias!
  70. 70. Creando aplicaciones UWP para Xbox One Sevilla Windows //REBUILD Javier Suárez

×