La création de l’échappement de kippyThe Making of Kippy's Escape

Kippy le robot se réveille pour se retrouver sur un îlot.Kippy the robot wakes up to find itself stranded on an island. C’est à vous de faire en sorte que votre chapeau de résolution des problèmes permette de trouver un chemin d’accès à son fusée.It’s up to you to put on your problem-solving hat to help it find a path back to its rocket ship! Connectez-vous à votre HoloLens 2 et Téléchargez l’application à partir de la Microsoft Store ou clonez le référentiel à partir de GitHub et procurez-vous kippy-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!

Important

Assurez-vous que vous utilisez un moteur 4,25 ou ultérieur , si vous générez l’échappement de kippy à partir du référentiel github.Make sure you're using Unreal Engine 4.25 or later if you're building Kippy's Escape from the GitHub repository.

La séquence d’échappement de kippy est une application de l’exemple HoloLens 2 Open source générée avec des outils inréalistes pour le moteur 4 et la réalité mixte.Kippy’s Escape is an open-source HoloLens 2 sample app built with Unreal Engine 4 and Mixed Reality UX Tools for Unreal. Dans ce billet, nous allons vous guider tout au long de notre processus, de la conception visuelle à la mise en œuvre et à l’optimisation de l’expérience.In this post, we’ll walk you through our process from first principles and visual design to implementing and optimizing the experience. Vous trouverez plus d’informations sur le développement d’applications de réalité mixte avec les outils MRTK UX dans la vue d’ensemble du développement inréel.You can find more information on developing Mixed Reality applications with MRTK UX Tools in the Unreal development overview.

Premiers principesFirst principles

Dans le cadre du paramétrage de la création de l’échappement de kippy, notre objectif était de créer une expérience qui mettre en évidence la prise en charge de l’outil hololens 2 d’un moteur inréel, les fonctionnalités de hololens 2 et la boîte à outils de réalité mixte.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. Nous voulions inspirer les développeurs pour imaginer ce qu’ils pouvaient créer avec les fonctionnalités non réelles et HoloLens 2.We wanted to inspire developers to imagine what they could create with Unreal and HoloLens 2.

Nous avons obtenu trois principes directeurs pour l’expérience : ils devaient être amusants, interactifs et ont une barrière faible à l’entrée.We came up with three guiding principles for the experience: that it needed to be fun, interactive, and have a low barrier to entry. Nous souhaitons que l’expérience soit suffisamment intuitive, même si un utilisateur de la réalité mixte n’a pas besoin d’un didacticiel pour y accéder.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.

Conception du jeuDesigning the game

Le HoloLens 2 a accès aux fonctionnalités de conception qui ne se trouvent nulle part ailleurs dans le jeu.The HoloLens 2 has access to design features found nowhere else in gaming today. Les objets peuvent être directement poussés ou manipulés à l’aide de vos mains ou avec le suivi oculaire.Objects can be directly pushed or manipulated using your hands or targeted with eye tracking. Ces fonctionnalités clés se trouvent derrière les moments amusants que nous avons intégrés à l’échappement de kippy.These key features are behind some of the fun moments we built out in Kippy’s Escape.

À l’aide des fonctionnalités HoloLens 2 uniques en guise d’aide pour notre conception de jeu, nous avons limité quelques scénarios d’environnement.Using the unique HoloLens 2 features as guidance for our game design, we scoped out a few small environment scenarios. Les îlots ont un sens, car ils peuvent être ajustés en fonction des différentes hauteurs de joueurs et fournir des idées de pont divertissantes.Islands made sense because they can be adjusted for different player heights, and provided some entertaining bridge ideas. Nous sommes parvenus sur le thème de l’ancien civilisation, qui répond à la technologie Sci-Fi, avec l’idée que quelqu’un avait créé des machines sur Ruins en exploitant une énergie étrange fournie par chaque île.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. Les îles ont chacune leur propre apparence, un détail qui nous a aidé à créer un intérêt visuel.The islands were each given their own look and feel, a detail that helped create visual interest. Un bon équilibre entre la modélisation et la texturation permet de réduire les appels de dessin pour les performances de rendu, donc un look stylisé a été conçu en tenant compte de cela à l’esprit.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.

La conception de jeux précoces ébauche des croquis précoces pour ce que l’expérience peut ressemblerEarly game design sketches Some early sketches for what the experience might look like

Rendu des rendus des deuxièmes îlots du second îlotRenderings of the second island Renderings of the second island

Pour rester dans le cadre de notre planification de production, nous avons convenu qu’un caractère flottant pouvait capturer l’intention et l’émotion sans cycles d’animation rigoureux.To keep within our short production schedule, we agreed that a floating character could capture intent and emotion without rigorous animation cycles. Et kippy est né !And so Kippy was born! Il emotes quelques expressions différentes par le biais de ses yeux et de ses effets de son vocal minimal pour guider le joueur tout au long de l’expérience.It emotes a few different expressions through its eyes and through minimalistic vocal sound effects to help guide the player throughout the experience.

Kippy présentant différentes expressions par le biais de ses yeux

Kippy présentant différentes expressions par le biais de ses yeuxKippy showing different expressions via its eyes

Si l’utilisateur met trop de temps à résoudre un puzzle, kippy donne une indication à l’utilisateur

Si l’utilisateur met trop de temps à résoudre un puzzle, kippy donne une indication à l’utilisateurIf the user takes too long to solve a puzzle, Kippy will give the user a hint

Au-delà de la conception de caractères et d’environnements, nous avons fait un effort concerté pour que le jeu se sent amusant.Beyond the character and environment design, we made a concerted effort to make the game feel fun. Le suivi oculaire nous permettait de déclencher des attributs de matériau et de son, ce qui a mis en surbrillance les éléments clés du jeu.Eye tracking allowed us to fire off material and sound attributes, which highlighted key pieces of the game. L’audio spatial a aidé les niveaux à la racine de l’environnement du joueur.Spatial audio helped make the levels feel at home in the player’s surroundings. La possibilité de récupérer des objets, des boutons de commande et de manipuler des curseurs permet d’effectuer des missions de joueurs innovantes.Being able to grab objects, push buttons, and manipulate sliders drives innovative player engagements. Il était important de s’assurer que ces points de connexion sont naturels.It was important to make sure these connection points felt natural.

La fin du câble de pont s’illumine lorsque l’utilisateur l’approche à la main

La fin du câble de pont s’illumine lorsque l’utilisateur l’approche à la mainThe end of the bridge cable glows when the user’s hand approaches it

Création de la mécanique du jeuBuilding the game mechanics

L’échappement de kippy s’appuie fortement sur les composants d’outils d’expérience de réalité mixte pour rendre le jeu interactif, à savoir les acteurs d’interaction main, les contrôles de limites, les manipulateurs, les curseurs et les boutons.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.

L' acteur d’interaction manuelle permet une manipulation directe et éloignée des hologrammes.The hand interaction actor enables both direct and far manipulation of holograms. Au début de l’échappement de kippy, l’utilisateur a la possibilité de définir l’emplacement du jeu.At the start of Kippy’s Escape, the user is given the opportunity to set the location of the game. Les poutres de main qui s’étendent à partir du Palm de l’utilisateur facilitent la manipulation d’hologrammes volumineux éloignés, comme illustré dans le GIF ci-dessous.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 d’acteur d’interaction de la main

La scène d’espace réservé peut être glissée et pivotée à l’aide du composant de contrôle des limites des outils UX.The placeholder scene itself can be dragged and rotated using UX Tools’ bounds control component.

Sur le second îlot, l’utilisateur doit sélectionner des gemmes et les placer dans leurs emplacements correspondants.On the second island, the user must pick up gems and place them in their matching slots. Les gemmes sont associées à des manipulateurs qui permettent à l’utilisateur de les sélectionner et de les placer.The gems have manipulators attached to them that allow the user to pick them up and place them down.

Exemple de fichier GIF de manipulateur

Un bouton enfoncé est la clé de l’utilisation de bombes pour le troisième îlot.A pressable button is the key to bringing up bombs for use on the third island.

Image GIF de l’exemple de bouton enfoncé

Un composant Slider apparaît sur le quatrième îlot, déclenchant ainsi le déclenchement du dernier pont.A slider component appears on the fourth island, triggering the final bridge to be raised.

Image GIF de l’exemple de composant Slider

Optimisation pour HoloLens 2Optimizing for HoloLens 2

Avec une expérience conçue pour s’exécuter sur un appareil mobile, il est essentiel de garder un œil sur les performances.With any experience built to run on a mobile device, keeping an eye on performance is critical. Unreal 4,25 comprend une mise à jour majeure de la prise en charge de la fonctionnalité multi-View mobile, ce qui réduit considérablement la charge de rendu et augmente la fréquence des trames.Unreal 4.25 includes a major update to support for mobile multi-view, which significantly reduces rendering overhead and boosts frame-rate. Nous vous recommandons de consulter nos autres paramètres de performances recommandés pour le développement de HoloLens 2 avec des conditions d’optimisation.We recommend checking out our other recommended performance settings for HoloLens 2 development with Unreal when you're optimizing.

Les objets physiques restent toujours coûteux pour les performances. par conséquent, deux solutions de contournement astucieuses ont été utilisées.Physics objects still remain costly for performance, so a couple clever workarounds were used. Par exemple, le troisième « pont » exige que certains débris bloquent l’escalier.For instance, the third “bridge” requires blowing up some debris blocking the stairway. Au lieu d’avoir un impact sur les pions en tant qu’objets physiques, la détonation de bombe déclenche un échange, en basculant les pierres statiques pour un effet de particule éclatée.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.

Exemple optimisé pour le GIF HoloLens 2

Nous avons également réduit les appels de dessin de plus de 400 à ~ 260 par :We also cut down our draw calls from over 400 to ~260 by:

  • Réduction de la complexité du maillageReducing mesh complexity
  • Combinaison de maillagesCombining meshes
  • Suppression de certains de nos éléments d’éclairage dynamique initiauxRemoving some of our initial dynamic lighting elements

Bien qu’il y ait probablement plus de résultats, nous avons pensé qu’il s’agissait d’un bon équilibre entre les performances et la qualité visuelle.While there’s likely more we could have done, we felt that was a good balance between performance and visual quality.

Essayez !Try it out!

Démarrez votre HoloLens 2 et Téléchargez l’application à partir de la Microsoft Store, ou clonez le référentiel à partir de GitHub et générez l’application vous-même !Boot up your HoloLens 2 and download the app from the Microsoft Store, or clone the repository from GitHub and build the app yourself!

À propos de l’équipeAbout the team

Picture of Jack Caron Jack CaronJack Caron
Concepteur de jeux de leadsLead Game Designer
Jack travaille actuellement sur les expériences de réalité mixte pour Microsoft, y compris les projets HoloLens 2 et AltspaceVR, et était auparavant un concepteur de l’équipe de la plateforme 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 Wu étéSummer Wu
ProducerProducer
L’été travaille sur la plateforme de développement de la réalité mixte et dirige les efforts liés au moteur inréel de l’équipe.Summer works on the mixed reality developer platform and heads the team’s Unreal Engine related efforts.

Merci à nos amis sur Framestore pour nous aider à donner à l’échappement de kippy.Special thanks to our friends at Framestore for helping us bring Kippy’s Escape to life. Du développement de caractères à la conception de ressources, à la programmation de jeux, leur collaboration sur ce projet était Pivotal.From character development, to asset design, to game programming, their collaboration on this project was pivotal.