Creazione dell'escape di KippyThe Making of Kippy's Escape

Kippy il robot si riattiva per trovarsi in un'isola.Kippy the robot wakes up to find itself stranded on an island. L'utente deve mettere in pratica il cappello per risolvere i problemi per trovare un percorso di ritorno alla propria astronave.It’s up to you to put on your problem-solving hat to help it find a path back to its rocket ship! È possibile scaricare l'app dal Microsoft Store o clonare il repository da GitHub e ottenere 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

Assicurarsi di usare Unreal Engine 4,25 o versione successiva se si sta creando l'escape di Kippy dal repository GitHub.Make sure you're using Unreal Engine 4.25 or later if you're building Kippy's Escape from the GitHub repository.

L'escape di Kippy è un'app di esempio HoloLens 2 Open Source compilata con Unreal Engine 4 e gli strumenti UX per la realtà mista per Unreal.Kippy’s Escape is an open-source HoloLens 2 sample app built with Unreal Engine 4 and Mixed Reality UX Tools for Unreal. In questo post verrà illustrata la procedura da seguire per i primi principi e la progettazione visiva per l'implementazione e l'ottimizzazione dell'esperienza.In this post, we’ll walk you through our process from first principles and visual design to implementing and optimizing the experience. È possibile trovare altre informazioni sullo sviluppo di applicazioni di realtà miste con gli strumenti UX MRTK nella Panoramica dello sviluppo non reale.You can find more information on developing Mixed Reality applications with MRTK UX Tools in the Unreal development overview.

Principi inizialiFirst principles

Nell'impostazione di per creare l'escape di Kippy, il nostro obiettivo era quello di creare un'esperienza che evidenziasse il supporto di HoloLens 2 di Unreal Engine, le funzionalità di HoloLens 2 e il Toolkit di realtà mista.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. Volevamo ispirare gli sviluppatori a immaginare cosa potessero creare con Unreal e HoloLens 2.We wanted to inspire developers to imagine what they could create with Unreal and HoloLens 2.

Sono stati rilevati tre principi guida per l'esperienza: che era necessario per essere divertenti, interattivi e avere un basso ostacolo all'ingresso.We came up with three guiding principles for the experience: that it needed to be fun, interactive, and have a low barrier to entry. Volevamo che l'esperienza fosse abbastanza intuitiva che anche un utente di realtà mista per la prima volta non necessiti di un'esercitazione.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.

Progettazione del giocoDesigning the game

HoloLens 2 ha accesso alle funzionalità di progettazione che non sono state trovate in nessun altro momento nei giochi.The HoloLens 2 has access to design features found nowhere else in gaming today. Gli oggetti possono essere direttamente spostati o modificati usando le mani o mirati al rilevamento a occhio.Objects can be directly pushed or manipulated using your hands or targeted with eye tracking. Queste funzionalità principali sono alla base di alcuni dei momenti di divertimento compilati nell'escape di Kippy.These key features are behind some of the fun moments we built out in Kippy’s Escape.

Usando le funzionalità di HoloLens 2 univoche come linee guida per la progettazione di giochi, abbiamo definito alcuni scenari di ambiente di piccole dimensioni.Using the unique HoloLens 2 features as guidance for our game design, we scoped out a few small environment scenarios. Le isole hanno avuto senso perché possono essere modificate per diverse altezze dei giocatori e forniscono alcune interessanti idee sul Bridge.Islands made sense because they can be adjusted for different player heights, and provided some entertaining bridge ideas. Siamo atterrati sul tema della civiltà antica che soddisfa la fantascienza, con l'idea che qualcuno ha creato macchinari su rovine che sfruttano una strana energia fornita da ogni isola.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. Le isole venivano ognuna con un aspetto specifico, un dettaglio che consentiva di creare un interesse visivo.The islands were each given their own look and feel, a detail that helped create visual interest. Un giusto equilibrio tra la modellazione e la creazione di texturing consente di tenere le chiamate di traccia basse per le prestazioni di rendering, quindi un aspetto stilizzato è stato progettato tenendo presente questo aspetto.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 progettazione dei primi Giochi Disegna alcuni schizzi iniziali per l'aspetto dell'esperienzaEarly game design sketches Some early sketches for what the experience might look like

Rendering dei rendering delle seconde isole della seconda isolaRenderings of the second island Renderings of the second island

Per rimanere entro la pianificazione di produzione breve, abbiamo stabilito che un carattere a virgola mobile potrebbe acquisire finalità ed emozioni senza cicli di animazione rigorosi.To keep within our short production schedule, we agreed that a floating character could capture intent and emotion without rigorous animation cycles. Quindi, Kippy è Nato!And so Kippy was born! Emotes alcune espressioni diverse attraverso gli occhi e con gli effetti vocali di un suono minimalista per aiutare il lettore a eseguire l'intera esperienza.It emotes a few different expressions through its eyes and through minimalistic vocal sound effects to help guide the player throughout the experience.

Kippy che mostra espressioni diverse tramite gli occhi

Kippy che mostra espressioni diverse tramite gli occhiKippy showing different expressions via its eyes

Se l'utente impiega troppo tempo per risolvere un rompicapo, Kippy fornirà all'utente un suggerimento

Se l'utente impiega troppo tempo per risolvere un rompicapo, Kippy fornirà all'utente un suggerimentoIf the user takes too long to solve a puzzle, Kippy will give the user a hint

Al di là della progettazione di caratteri e ambienti, abbiamo deciso di impegnarsi per far divertire il gioco.Beyond the character and environment design, we made a concerted effort to make the game feel fun. Il rilevamento degli occhi ci ha consentito di avviare gli attributi di materiali e suoni, che hanno evidenziato le parti principali del gioco.Eye tracking allowed us to fire off material and sound attributes, which highlighted key pieces of the game. L'audio spaziale ha aiutato a far sentire i livelli a casa nell'ambiente del giocatore.Spatial audio helped make the levels feel at home in the player’s surroundings. La possibilità di acquisire oggetti, pulsanti di push e manipolare i dispositivi di scorrimento consente di coinvolgere i giocatori in modo innovativo.Being able to grab objects, push buttons, and manipulate sliders drives innovative player engagements. Era importante assicurarsi che questi punti di connessione fossero naturali.It was important to make sure these connection points felt natural.

La fine del cavo del Bridge si illumina quando l'utente si avvicina

La fine del cavo del Bridge si illumina quando l'utente si avvicinaThe end of the bridge cable glows when the user’s hand approaches it

Creazione dei meccanismi di giocoBuilding the game mechanics

L'escape di Kippy si basa principalmente sui componenti degli strumenti UX della realtà mista per rendere il gioco interattivo, ovvero gli attori di interazione, i controlli dei limiti, i manipolatori, i dispositivi di scorrimento e i pulsanti.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' attore di interazione Hand consente la manipolazione diretta e distante degli ologrammi.The hand interaction actor enables both direct and far manipulation of holograms. All'inizio della sequenza di escape di Kippy, all'utente viene data la possibilità di impostare la posizione del gioco.At the start of Kippy’s Escape, the user is given the opportunity to set the location of the game. I raggi mano che si estendono dalla palma dell'utente consentono di modificare facilmente gli ologrammi di grandi dimensioni, come illustrato nel gif riportato di seguito.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 attore interazione mano

La scena segnaposto può essere trascinata e ruotata utilizzando il componente di controllo dei limiti degli strumenti UX.The placeholder scene itself can be dragged and rotated using UX Tools’ bounds control component.

Nella seconda isola è necessario che l'utente acquisisca le gemme e le inserisca negli slot corrispondenti.On the second island, the user must pick up gems and place them in their matching slots. Le gemme hanno manipolatori collegati che consentono all'utente di riprenderle e inserirle.The gems have manipulators attached to them that allow the user to pick them up and place them down.

Gif di esempio del manipolatore

Un pulsante stampabile è la chiave per attivare le bombe da usare sulla terza isola.A pressable button is the key to bringing up bombs for use on the third island.

Gif di esempio del pulsante stampabile

Viene visualizzato un componente Slider sulla quarta isola, che attiva il Bridge finale da generare.A slider component appears on the fourth island, triggering the final bridge to be raised.

Gif di esempio del componente Slider

Ottimizzazione per HoloLens 2Optimizing for HoloLens 2

Con qualsiasi esperienza compilata per l'esecuzione su un dispositivo mobile, è essenziale tenere sotto controllo le prestazioni.With any experience built to run on a mobile device, keeping an eye on performance is critical. Unreal 4,25 include un aggiornamento principale per il supporto per la visualizzazione a più livelli per dispositivi mobili, riducendo significativamente il sovraccarico del rendering e aumentando la frequenza dei fotogrammi.Unreal 4.25 includes a major update to support for mobile multi-view, which significantly reduces rendering overhead and boosts frame-rate. È consigliabile consultare le altre impostazioni di prestazioni consigliate per lo sviluppo HoloLens 2 con Unreal quando si esegue l'ottimizzazione.We recommend checking out our other recommended performance settings for HoloLens 2 development with Unreal when you're optimizing.

Gli oggetti fisici rimangono comunque costosi per le prestazioni, quindi sono state usate alcune soluzioni intelligenti.Physics objects still remain costly for performance, so a couple clever workarounds were used. Il terzo "Bridge", ad esempio, deve saltare alcuni detriti che bloccano la scala.For instance, the third “bridge” requires blowing up some debris blocking the stairway. Invece di avere un impatto forzato sulle pietre come oggetti fisici, la detonazione della bomba attiva uno scambio, cambiando le pietre statiche per un effetto particellare esploso.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.

Esempio ottimizzato per HoloLens 2 gif

Si ritagliano anche le chiamate di estrazione da oltre 400 a ~ 260 da:We also cut down our draw calls from over 400 to ~260 by:

  • Riduzione della complessità della meshReducing mesh complexity
  • Combinazione di meshCombining meshes
  • Rimozione di alcuni elementi di illuminazione dinamica inizialiRemoving some of our initial dynamic lighting elements

Anche se è probabile che si sia fatto di più, abbiamo pensato che era un giusto equilibrio tra prestazioni e qualità visiva.While there’s likely more we could have done, we felt that was a good balance between performance and visual quality.

VerificaTry it out!

Avviare il HoloLens 2 e scaricare l'app dal Microsoft Store oppure clonare il repository da GitHub e compilare l'app.Boot up your HoloLens 2 and download the app from the Microsoft Store, or clone the repository from GitHub and build the app yourself!

Informazioni sul teamAbout the team

Picture of Jack Caron Jack CaronJack Caron
Lead Game DesignerLead Game Designer
Jack attualmente funziona con esperienze di realtà mista per Microsoft, inclusi i progetti HoloLens 2 e AltspaceVR, e in precedenza era un progettista del team della piattaforma 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 dell'estateSummer Wu
ProducerProducer
L'estate lavora sulla piattaforma di sviluppo di realtà mista e testa le attività relative ai motori non reali del team.Summer works on the mixed reality developer platform and heads the team’s Unreal Engine related efforts.

Grazie speciale per i nostri amici di Framestore , che ci aiutano a portare la fuga di Kippy.Special thanks to our friends at Framestore for helping us bring Kippy’s Escape to life. Dallo sviluppo di caratteri, alla progettazione di asset, alla programmazione dei giochi, la loro collaborazione su questo progetto era fondamentale.From character development, to asset design, to game programming, their collaboration on this project was pivotal.