En el anterior post vimos los requisitos que tenemos que cumplir para montar de manera correcta el entorno para nuestra app de mixed reality, así como los pasos a seguir para crear el backend de la misma, siendo su estructura la de una Web API 2 que contiene los componentes necesarios para el servicio de SignalR. Ya estando este último desplegado y funcionando, podremos dar el siguiente paso, que no es otro que el desarrollo como tal de la aplicación. En el presente artículo (último artículo del serial), os daremos las instrucciones precisas para poder llevar a cabo este proyecto. Recordemos que la app estará compuesta por varios cubos 3D que crearemos y sincronizaremos mediante una serie de ajustes que os explicaremos a continuación. Tras todo ello, tendremos una aplicación donde los usuarios podrán ver desde sus respectivos dispositivos el movimiento en tiempo real de estos cubos tridimensionales.
1. Creando nuestra app de mixed reality
1.1. Creación del proyecto
La aplicación se desarrollará utilizando Unity3D. Por tanto, lo primero que haremos será abrir Unity Hub (o directamente el editor en caso de no tenerlo instalado) y crear un nuevo proyecto. Para esta aplicación se ha utilizado la versión 2017.4.9f1, pero no debería haber problema si utilizáis cualquiera de la rama 2017.4.X.
1.2. Añadir MixedRealityToolkit
Una vez cargado el editor, importaremos MixedRealityToolkit al proyecto. Esta librería ofrece una serie de componentes base para construir apps de realidad mixta (input, spatial mapping/sound, UX, sharing…). Dichos componentes nos facilitarán la realización de los ajustes iniciales y la creación de la lógica de movimiento de los cubos.
Podéis obtener el UnityPackage en la carpeta Resources del repositorio o descargarlo del oficial.
Desde el menú superior de Assets podremos añadirlo al proyecto:
Nos saldrá la siguiente ventana con todo el listado de los archivos que se van a importar. Seleccionaremos Import:
Ésta sería la estructura de ficheros (ventana Project en Unity) una vez importado MRTK:
Es recomendable ir guardando en una escena los cambios que se vayan realizando, ya que por defecto aparece una escena Untitled.
1.3. Ajustes iniciales
El siguiente paso será realizar una serie de ajustes en la solución. Realizaremos los siguientes:
- Project Settings: Estos ajustes permitirán habilitar la plataforma UWP y activar las características de Mixed Reality:
- Scene Settings: Se incluirán a la escena una cámara ya configurada y el cursor, entre otras cosas:
- UWP Capability Settings: En esta configuración tendremos que marcar qué permisos va a requerir la aplicación. Tendremos que habilitar Spatial Perception (para estabilizar la escena) e Internet Client (para poder acceder a nuestro servicio de SignalR):
1.4. Añadir SignalR
Al igual que en la Web API, tendremos que importar la dll de SignalR (podéis encontrarla aquí). Crearemos una carpeta en la ventana Project en Unity, y arrastraremos la dll dentro de dicha carpeta:
Una vez añadida, tendremos que configurarla pulsando en ella para poder editar sus propiedades. Le indicaremos a Unity que esta dll queremos incluirla únicamente en la plataforma WSAPlayer:
1.5. Añadir cubos y lógica
Antes de comenzar con la creación de los cubos, tendremos que añadir tres scripts al proyecto:
- HubManager.cs: Este script gestionará la conexión con el servicio de SignalR, enviará/recibirá los mensajes del Hub y actualizará el color de los cubos según el estado de la misma: gris (desconectado), amarillo (conectando) y verde (conectado).
- TransformModel.cs: Modelo del mensaje que se enviarán los clientes. Su estructura es exactamente la misma que la de la Web API para poder deserializar el mensaje correctamente.
- CubeManager.cs: Este script será el encargado de decirle al HubManager que envíe su posición cuando se mueva, o de aplicar los cambios cuando el mismo cubo haya sido movido en la instancia de otro cliente. Dispone de diversos parámetros para ajustar la tasa de envío/actualización y la distancia mínima de diferencia que tiene que haber entre dos posiciones para considerarse distinta.
En la ventana de jerarquía de objetos de la escena, añadiremos un nuevo GameObject vacío que llamaremos «SyncCubes» y le asociaremos el script HubManager. Importante: tendremos que colocar la url de la web app que hemos desplegado en Azure, el nombre del Hub y el método en el inspector de SyncCubes.
Dentro de SyncCubes añadiremos tres cubos. Para mejorar su visibilidad y manipulación, daremos a cada cubo escala (0.25, 0.25, 0.25) y rotación (45, 45, 45), colocándolos uno encima de otro modificando el respectivo eje Y del transform. Opcionalmente, se podría cambiar el color inicial de los cubos. A continuación, asociaremos a cada uno de los tres cubos el script CubeManager.
Además, tendremos que añadir a estos cubos la capacidad de ser arrastrados gestualmente. Para ello, asociaremos el script HandDraggable.
Debería quedar algo así:
2. Despliegue
Una vez terminada la construcción del backend (ya publicado en Azure) y la aplicación de Unity, el siguiente paso será visualizar estos cambios en un dispositivo o emulador. Para ello, compilaremos la solución abriendo en Unity el panel de Build Settings pulsando CTRL + MAYUS + B. Nos solicitará seleccionar la carpeta donde se va a generar la solución de Visual Studio resultante.
Cuando haya terminado, abriremos la solución generada. Ésta será una aplicación UWP lista para desplegar en el cualquier dispositivo de Windows Mixed Reality, como el emulador, las HoloLens o los cascos de HP, Acer, Samsung, etc.
Para probar esta aplicación, tendremos que instalarla en dos o más dispositivos. En caso de no disponer de ellos, se podrá ejecutar ejecutando varias instancias del emulador de HoloLens. Aquí explicamos cómo hacerlo.
Conclusiones
Con este pequeño desarrollo hemos aprendido cómo proporcionar a las aplicaciones de Mixed Reality la habilidad de poder comunicarse en tiempo real. Esto ofrece un sinfín de posibilidades, desde sincronizar experiencias (tal y como acabamos de hacer) hasta visualizar en el dispositivo determinados datos que se actualicen con mucha frecuencia.
Podéis comentarnos lo que sea en info@kabel.es.
También podéis seguirnos en Twitter, LinkedIn y Facebook.
