#Hololens – Tutorial para mostrar botones e interacciones con lo nuevo de #MRDesignLab

Hola!

Hace un par de días comente en un post que el equipo de Mixed Reality Design Labs de Microsoft Hololens, había liberado una serie de Assets / Prefabs que podían ayudarnos en la creación de aplicaciones para Microsoft Hololens. El escenario completo de ejemplo que publicaron fue el del juego Lunar Module.

Pues bien, alguien me pregunto si podía explicar cómo usar alguno de estos assets, así que hoy comenzare con un escenario de lo más útil cuando creas una aplicación

Crear un botón y mostrar un cuadro de dialogo con un mensaje de texto y botones OK y Cancel.

Vamos que es el modelo tradicional de una notificación de toda la vida. Algo similar a esto

20170801 Holo MRDesignLab Buttons 01

Pues bien, lo 1ro que tenemos que hacer es clonar el repositorio de Mixed Reality Design Labs (ver referencias). El mismo usa además un par de submódulos con otras herramientas, así que toca pegarse un rato con Git para poder tener todo en forma en local.

Un detalle importante es que este paquete ya posee una version de HoloToolkit que es compatible con Unity 2017.1.0f3, así que podremos utilizar la version oficial de Unity 2017 para este ejemplo.

Yo he creado un unity3D package con HoloToolkit, MRDesignLab y HUX llamado “MRDesignLabs_Unity-0.1.3-Unity-2017.unitypackage”, que se puede descargar desde aquí (link).

En un nuevo proyecto de Unity, importamos este paquete y eliminamos todos los elementos de la jerarquía en la escena.

Importante: En este punto usualmente comenzamos a agregar los assets de HoloToolkit para interactuar con los gestos o la Cámara. Este nuevo paquete posee un elemento llamado Hololens en la ruta [Assets / HUX / Prefabs / Interface] que ya posee todo lo necesario para una aplicación para Hololens.

I2

Podemos ver que dentro del mismo hay CameraRig, InputMapping y mucho mas. El siguiente paso es agregar un elemento 3D Text que será en el que mostremos el resultado de las acciones seleccionados en el cuadro de dialogo.

A continuación:

  • Agregamos un elemento vacío para contener nuestros botones. Yo lo he llamado DialogMenus, es importante el nombre ya que volveremos al mismo en pasos posteriores
  • Dentro del mismo agregamos 2 botones del tipo [Assets / HUX / Prefabs / Buttons / SquareButton.prefab]. Los he llamado SquareButtonDiag1 y SquareButtonDiag2

I03

  • En cada botón el script [Compound Button Text] nos permite definir el texto del botón.

I04

  • Y a continuación debemos posicionar los botones en el espacio frente al usuario de las Hololens. Esto usualmente lo hacemos posicionando los elementos de forma individual, sin embargo, el MRDesignLans posee un par de Prefabs que nos ayudan a hacer esto de forma más simple.
  • En el elemento [DialogMenus] agregamos un nuevo componente de tipo [Object Collection]. Este script nos permite acomodar de forma simple elementos en un espacio 3D

I05

  • Definimos las siguientes propiedades del script
    • Node List / Size = 2, trabajaremos con 2 elementos para acomodar. En este caso son nuestros 2 botones
  • Renombramos los elementos a Dialog1 y a Dialog2.
    • En la propiedad [Dialog1 / Transform], arrastramos el elemento [SquareButtonDiag1] desde la jerarquía de elementos.
    • Hacemos lo mismo con [Dialog2 / Trasform], arrastrando el elemento [SquareButtonDiag2]
  • Definimos que solo tendremos una fila de elementos, [Rows = 1]
  • La definición final queda de la siguiente forma

I06

Ahora solo queda agregar un poco de lógica para controlar la interacción con los botones y presentar los cuadros de dialogo. En el elemento [DialogMenus] agregamos un nuevo script [Dialog and Menu Example]. Este script posee el código mínimo necesario para realizar esta interacción.

  • Definimos el tamaño de elementos interactivos en 2, [Interactibles / Size = 2]
  • Arrastramos a [Interactibles / Element 0], el elemento [SquareButtonDiag1]
  • Arrastramos a [Interactibles / Element 1], el elemento [SquareButtonDiag2]
  • Definimos que el foco de output será un elemento de tipo [Targets / Dialog Prefab = SimpleDialogShell]
  • Completamos el texto a mostrar en cada interacción, como muestra la siguiente imagen

I07

El código de la solución completo se puede descargar desde GitHub, sin embargo, lo interesante se puede ver en esta porción de código

  • En el evento OnTapped se valida el tipo de elemento que el usuario ha seleccionado.
  • De acuerdo al nombre del elemento se muestra un cuadro de dialogo con uno o 2 botones
  • La función OnClosed se encarga de mostrar en el Texto 3D el elemento seleccionado.

El codigo se puede descargar desde aqui (link)
Y eso es todo como explicación, espero que sea de utilidad.

Happy Coding!

Saludos @ Mississauga

El Bruno

References

El Bruno, my posts

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s