La realización del escape de KippyThe Making of Kippy's Escape

Kippy el robot se reactiva para encontrarse en una isla.Kippy the robot wakes up to find itself stranded on an island. Es el usuario quien puede poner en marcha su solución de problemas para ayudarle a encontrar una ruta de acceso a su barco.It’s up to you to put on your problem-solving hat to help it find a path back to its rocket ship! Correa en HoloLens 2 y Descargue la aplicación desde el Microsoft Store o Clone el repositorio de Github y obtenga Kippy Home Safe.Strap on your HoloLens 2 and download the app from the Microsoft Store or clone the repository from GitHub and get Kippy home safe!

Importante

Asegúrese de que está usando el motor inreal 4,25 o posterior si está compilando el escape de Kippy desde el repositorio de github.Make sure you're using Unreal Engine 4.25 or later if you're building Kippy's Escape from the GitHub repository.

El escape de Kippy es una aplicación de ejemplo de HoloLens 2 de código abierto compilada con las herramientas inreal Engine 4 y UX de realidad mixta.Kippy’s Escape is an open-source HoloLens 2 sample app built with Unreal Engine 4 and Mixed Reality UX Tools for Unreal. En esta publicación, le guiaremos a través de nuestro proceso desde los primeros principios y el diseño visual hasta la implementación y optimización de la experiencia.In this post, we’ll walk you through our process from first principles and visual design to implementing and optimizing the experience. Puede encontrar más información sobre el desarrollo de aplicaciones de realidad mixta con las herramientas de MRTK UX en la información general sobre el desarrollo inreal.You can find more information on developing Mixed Reality applications with MRTK UX Tools in the Unreal development overview.

Primeros principiosFirst principles

En el establecimiento del escape de la creación de Kippy, nuestro objetivo era crear una experiencia que resaltara la compatibilidad con hololens 2 del motor, las funcionalidades de hololens 2 y el kit de herramientas de realidad mixta.In setting out to create Kippy’s Escape, our goal was to create an experience that would highlight Unreal Engine’s HoloLens 2 support, the HoloLens 2’s capabilities, and the Mixed Reality Toolkit. Queríamos inspirar a los desarrolladores a imaginar lo que podían crear con Unreal y HoloLens 2.We wanted to inspire developers to imagine what they could create with Unreal and HoloLens 2.

Contamos con tres principios de GUID para la experiencia: que necesitaba ser divertido, interactivo y tener una barrera baja para entrar.We came up with three guiding principles for the experience: that it needed to be fun, interactive, and have a low barrier to entry. Queremos que la experiencia sea lo suficientemente intuitiva como para que incluso un usuario de realidad mixta de primera hora no necesite un tutorial para pasar por él.We wanted the experience to be intuitive enough that even a first-time mixed reality user won’t need a tutorial to go through it.

Diseñar el juegoDesigning the game

HoloLens 2 tiene acceso a las características de diseño que se encuentran en ningún otro momento en juegos.The HoloLens 2 has access to design features found nowhere else in gaming today. Los objetos se pueden insertar o manipular directamente con las manos o destinadas al seguimiento ocular.Objects can be directly pushed or manipulated using your hands or targeted with eye tracking. Estas características clave están detrás de algunos de los momentos divertidos que creamos en el escape de Kippy.These key features are behind some of the fun moments we built out in Kippy’s Escape.

Mediante el uso de las características únicas de HoloLens 2 como guía para nuestro diseño de juego, nos centramos en unos pocos escenarios de entornos pequeños.Using the unique HoloLens 2 features as guidance for our game design, we scoped out a few small environment scenarios. Las islas tienen sentido porque se pueden ajustar para diferentes alturas del reproductor y proporcionan algunas ideas de puente entretenido.Islands made sense because they can be adjusted for different player heights, and provided some entertaining bridge ideas. Nos hemos desembarcado en el tema de las civilizacións de los ancianos, con la idea de que alguien había creado maquinaria a lo largo de un consumo de energía extraño proporcionado por cada isla.We landed on the theme of ancient civilization meets sci-fi tech, with the idea that someone had built machinery over ruins harnessing a strange energy provided by each island. Cada una de las islas tenía su propio aspecto y funcionamiento, un detalle que ayudó a crear el interés visual.The islands were each given their own look and feel, a detail that helped create visual interest. Un buen equilibrio entre el modelado y la texturización sería que las llamadas de dibujo bajaran para el rendimiento de la representación, por lo que una mirada estilizada se diseñó pensando en ello.A good balance between modeling and texturing would keep draw calls low for rendering performance, so a stylized look was designed with that in mind.

El diseño de juego temprano esboza algunos bocetos tempranos sobre el aspecto que podría tener la experienciaEarly game design sketches Some early sketches for what the experience might look like

Representación de la segunda representación de la isla de la segunda islaRenderings of the second island Renderings of the second island

Para mantenerse dentro de nuestra breve programación de producción, aceptamos que un carácter flotante podría capturar la intención y la emoción sin ciclos de animación rigurosos.To keep within our short production schedule, we agreed that a floating character could capture intent and emotion without rigorous animation cycles. Y, por tanto, Kippy nació.And so Kippy was born! Emotes algunas expresiones diferentes a través de sus ojos y a través de efectos sonoros vocales mínimos para ayudar a guiar al jugador a lo largo de la experiencia.It emotes a few different expressions through its eyes and through minimalistic vocal sound effects to help guide the player throughout the experience.

Kippy que muestra diferentes expresiones a través de sus ojos

Kippy que muestra diferentes expresiones a través de sus ojosKippy showing different expressions via its eyes

Si el usuario tarda demasiado tiempo en resolver un rompecabezas, Kippy proporcionará al usuario una sugerencia

Si el usuario tarda demasiado tiempo en resolver un rompecabezas, Kippy proporcionará al usuario una sugerenciaIf the user takes too long to solve a puzzle, Kippy will give the user a hint

Más allá del diseño de caracteres y entornos, hemos realizado un esfuerzo concertado para que el juego sea divertido.Beyond the character and environment design, we made a concerted effort to make the game feel fun. El seguimiento ocular nos permitió activar los atributos de material y sonido, que destacan las piezas clave del juego.Eye tracking allowed us to fire off material and sound attributes, which highlighted key pieces of the game. El audio espacial ayudó a que los niveles se sientan en casa en el entorno del jugador.Spatial audio helped make the levels feel at home in the player’s surroundings. Poder captar objetos, presionar botones y manipular los controles deslizantes impulsa las nuevas contrataciones de los jugadores.Being able to grab objects, push buttons, and manipulate sliders drives innovative player engagements. Era importante asegurarse de que estos puntos de conexión se sentían naturales.It was important to make sure these connection points felt natural.

El final del cable del puente se ilumina cuando el usuario se acerca a él

El final del cable del puente se ilumina cuando el usuario se acerca a élThe end of the bridge cable glows when the user’s hand approaches it

Crear la mecánica de juegoBuilding the game mechanics

El escape de Kippy se basa en gran medida en los componentes de las herramientas de la experiencia de usuario de realidad mixta para que los actores de interacción con nombre interactivo de juego, controles de límites, manipuladores, controles deslizantes y botones.Kippy’s Escape relies heavily on Mixed Reality UX Tools components to make the game interactive - namely hand interaction actors, bounds controls, manipulators, sliders, and buttons.

El actor de interacción a mano permite la manipulación directa y lejana de los hologramas.The hand interaction actor enables both direct and far manipulation of holograms. Al principio del escape de Kippy, el usuario tiene la oportunidad de establecer la ubicación del juego.At the start of Kippy’s Escape, the user is given the opportunity to set the location of the game. Los haces de mano que se extienden desde la palmera del usuario facilitan la manipulación de hologramas grandes, tal como se muestra en el GIF siguiente.Hand beams extending from the user’s palm make it easy to manipulate large holograms that are far away, as seen in the gif below.

GIF de interacción de mano de actor

La propia escena de marcador de posición se puede arrastrar y girar mediante el componente de control de límites de las herramientas de la experiencia del usuario.The placeholder scene itself can be dragged and rotated using UX Tools’ bounds control component.

En la segunda isla, el usuario debe recoger las gemas y colocarlas en sus ranuras coincidentes.On the second island, the user must pick up gems and place them in their matching slots. Las gemas tienen manipuladores asociados que permiten al usuario seleccionarlos y colocarlos.The gems have manipulators attached to them that allow the user to pick them up and place them down.

GIF de ejemplo de manipulador

Un botón que se pueda presionar es la clave para abrir bombas para su uso en la tercera isla.A pressable button is the key to bringing up bombs for use on the third island.

GIF de ejemplo de botón que se ha presionado

Un componente de control deslizante aparece en la cuarta isla, lo que desencadena el último puente que se va a generar.A slider component appears on the fourth island, triggering the final bridge to be raised.

GIF de ejemplo de componente de control deslizante

Optimización de HoloLens 2Optimizing for HoloLens 2

Con cualquier experiencia creada para ejecutarse en un dispositivo móvil, es fundamental vigilar el rendimiento.With any experience built to run on a mobile device, keeping an eye on performance is critical. Unreal 4,25 incluye una actualización importante para la compatibilidad con varias vistas móviles, lo que reduce significativamente la sobrecarga de representación y aumenta la velocidad de fotogramas.Unreal 4.25 includes a major update to support for mobile multi-view, which significantly reduces rendering overhead and boosts frame-rate. Le recomendamos que Compruebe nuestra otra configuración de rendimiento recomendada para el desarrollo de HoloLens 2 con inreal cuando esté optimizando.We recommend checking out our other recommended performance settings for HoloLens 2 development with Unreal when you're optimizing.

Los objetos de física siguen siendo costosos por el rendimiento, por lo que se usaron algunas soluciones de Clever.Physics objects still remain costly for performance, so a couple clever workarounds were used. Por ejemplo, el tercer "puente" requiere apagar algunos residuos que bloquean la escalera.For instance, the third “bridge” requires blowing up some debris blocking the stairway. En lugar de tener una fuerza que afecte a las piedras como objetos de física, la detonación de bomba desencadena un intercambio y cambia las piedras estáticas de un efecto de partículas de explosión.Instead of having a force impact the stones as physics objects, the bomb detonation triggers a swap, switching the static stones for an exploding particle effect.

Ejemplo optimizado para archivo GIF de HoloLens 2

También se reducen las llamadas a Draw de más de 400 a ~ 260 por:We also cut down our draw calls from over 400 to ~260 by:

  • Reducir la complejidad de la mallaReducing mesh complexity
  • Combinación de mallasCombining meshes
  • Quitar algunos de nuestros elementos de iluminación dinámica inicialesRemoving some of our initial dynamic lighting elements

Aunque es probable que podamos haber hecho algo más, pensamos que era un buen equilibrio entre el rendimiento y la calidad visual.While there’s likely more we could have done, we felt that was a good balance between performance and visual quality.

Haga la pruebaTry it out!

Arranque HoloLens 2 y Descargue la aplicación desde el Microsoft Store, o bien Clone el repositorio desde Github y compile la aplicación usted mismo.Boot up your HoloLens 2 and download the app from the Microsoft Store, or clone the repository from GitHub and build the app yourself!

Acerca del equipoAbout the team

Picture of Jack Caron Acento anticircunflejoJack Caron
Diseñador de juegos principalesLead Game Designer
Jack actualmente funciona en experiencias de realidad mixta para Microsoft, incluidos los proyectos de HoloLens 2 y AltspaceVR, y antes era un diseñador en el equipo de la plataforma HoloLens.Jack currently works on Mixed Reality experiences for Microsoft, including HoloLens 2 projects and AltspaceVR, and was previously a designer on the HoloLens platform team.
Picture of Summer Wu Verano de WuSummer Wu
ProductorProducer
El verano funciona en la plataforma de desarrollo de la realidad mixta y se centra en los esfuerzos inreales relacionados con el motor del equipo.Summer works on the mixed reality developer platform and heads the team’s Unreal Engine related efforts.

Gracias por nuestros amigos en Framestore para ayudarnos a poner el escape de Kippy a la vida.Special thanks to our friends at Framestore for helping us bring Kippy’s Escape to life. Desde el desarrollo de caracteres hasta el diseño de activos hasta la programación de juegos, su colaboración en este proyecto era dinámica.From character development, to asset design, to game programming, their collaboration on this project was pivotal.