Das Erstellen von Kippy-EscapezeichenThe Making of Kippy's Escape

Kippy der Roboter wird reaktiviert, um sich auf einer Insel zu finden.Kippy the robot wakes up to find itself stranded on an island. Es liegt an Ihnen, dass Sie sich mit dem Problem lösen können, dass Sie einen Pfad zurück zu seiner raketenlieferung finden!It’s up to you to put on your problem-solving hat to help it find a path back to its rocket ship! Halten Sie Ihre hololens 2 an, und Laden Sie die APP aus dem Microsoft Store herunter, oder Klonen Sie das Repository von GitHub, und holen Sie sich 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!

Wichtig

Stellen Sie sicher, dass Sie Unreal Engine 4,25 oder höher verwenden, wenn Sie Kippy-Escapezeichen aus dem GitHub-Repository erstellen.Make sure you're using Unreal Engine 4.25 or later if you're building Kippy's Escape from the GitHub repository.

Die Escapezeichen-Escapesequenz ist eine Open Source-Beispiel-App mit hololens 2 für Unreal Engine 4 und Mixed Reality UX Tools für 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 diesem Beitrag wird der Prozess von den ersten Prinzipien und dem visuellen Entwurf bis hin zur Implementierung und Optimierung der-Funktion erläutert.In this post, we’ll walk you through our process from first principles and visual design to implementing and optimizing the experience. Weitere Informationen zum entwickeln gemischter Reality-Anwendungen mit mrtk-UX-Tools finden Sie in der Übersicht über die Unreal-Entwicklung.You can find more information on developing Mixed Reality applications with MRTK UX Tools in the Unreal development overview.

Erste PrinzipienFirst principles

Beim Einrichten der Escapezeichen-Escapesequenz war unser Ziel das Erstellen einer Umgebung, die den hololens 2-Support von Unreal Engine, die Funktionen von hololens 2 und das Mixed Reality Toolkit hervorhebt.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. Wir wollten Entwicklern vorstellen, was Sie mit Unreal und hololens 2 erstellen konnten.We wanted to inspire developers to imagine what they could create with Unreal and HoloLens 2.

Wir haben drei Leitlinien für die-Funktion veröffentlicht: Es musste Spaß und interaktiv sein, und es ist eine geringe Barriere für die Eingabe erforderlich.We came up with three guiding principles for the experience: that it needed to be fun, interactive, and have a low barrier to entry. Wir wollten, dass die Benutzeroberflächen intuitiv genug sind, dass auch ein erst maligerweise gemischter Reality-Benutzer kein Tutorial benötigt, um es durchzugehen.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.

Entwerfen des SpielsDesigning the game

Hololens 2 hat heute Zugang zu Design Features, die noch nicht im Spiel spielen.The HoloLens 2 has access to design features found nowhere else in gaming today. Objekte können mithilfe ihrer Hände direkt per pushübertragung oder mit der Augen Verfolgung manipuliert werden.Objects can be directly pushed or manipulated using your hands or targeted with eye tracking. Diese wichtigen Features befinden sich hinter einigen der Spaß Zeiten, die wir in Kippy-Escapezeichen entwickelt haben.These key features are behind some of the fun moments we built out in Kippy’s Escape.

Mithilfe der einzigartigen hololens 2-Features als Leitfaden für den Spiel Entwurf haben wir einige kleine Umgebungs Szenarien erweitert.Using the unique HoloLens 2 features as guidance for our game design, we scoped out a few small environment scenarios. Inseln sind sinnvoll, da Sie für verschiedene Player Höhen angepasst werden können und einige unterhaltsame Brücken Ideen bereitgestellt haben.Islands made sense because they can be adjusted for different player heights, and provided some entertaining bridge ideas. Wir haben uns auf das Design der antiken Zivilisation ausgewirkt, das auf die Technologie von Sci-Fi trifft, mit der Idee, dass jemand einen Mechanismus über Ruinen erstellt hat, der eine seltsame Energie für jede Insel nutzt.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. Die Inseln erhielten jeweils ein eigenes Erscheinungsbild, ein Detail, das bei der Erstellung von visuellem Interesse half.The islands were each given their own look and feel, a detail that helped create visual interest. Ein ausgewogenes Gleichgewicht zwischen Modellierung und Texturierung würde zu einer geringen Darstellung von Zeichnungs aufrufen für die Renderingleistung führen, sodass ein stilisiertes Aussehen mit dem Hintergrund entworfen wurde.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.

Der frühe Spiel Entwurf skizziert einige frühe Skizzen für das Aussehen der Darstellung.Early game design sketches Some early sketches for what the experience might look like

Renderings der zweiten Insel Renderings der zweiten InselRenderings of the second island Renderings of the second island

Um den kurzen Produktions Zeitplan beizubehalten, haben wir uns zugestimmt, dass ein unverankertes Zeichen Absicht und Emotionen ohne strenge Animations Zyklen erfassen könnte.To keep within our short production schedule, we agreed that a floating character could capture intent and emotion without rigorous animation cycles. Und daher wurde Kippy!And so Kippy was born! Es werden einige unterschiedliche Ausdrücke durch die Augen und durch minimalistische, stimmungsvolle Klänge optimiert, die den Player im Laufe der Umgebung unterstützen.It emotes a few different expressions through its eyes and through minimalistic vocal sound effects to help guide the player throughout the experience.

Kippy zeigt unterschiedliche Ausdrücke über die Augen

Kippy zeigt unterschiedliche Ausdrücke über die AugenKippy showing different expressions via its eyes

Wenn der Benutzer zu lange braucht, um ein Rätsel zu beheben, gibt Kippy dem Benutzer einen Hinweis.

Wenn der Benutzer zu lange braucht, um ein Rätsel zu beheben, gibt Kippy dem Benutzer einen Hinweis.If the user takes too long to solve a puzzle, Kippy will give the user a hint

Über den Zeichen-und Umgebungs Entwurf hinaus haben wir einen konzertierten Aufwand unternommen, um das Spiel Spaß zu machen.Beyond the character and environment design, we made a concerted effort to make the game feel fun. Mit der Augen Verfolgung konnten wir Material-und audioattribute auslösen, die die wichtigsten Teile des Spiels hervorgehoben haben.Eye tracking allowed us to fire off material and sound attributes, which highlighted key pieces of the game. Mit räumlichem Audioinhalt können die Ebenen zu Hause in der Umgebung des Players werden.Spatial audio helped make the levels feel at home in the player’s surroundings. Durch das Erfassen von Objekten, durch Drücken von Schaltflächen und das Bearbeiten von Schiebereglern werden innovative Player Engagements gesteuert.Being able to grab objects, push buttons, and manipulate sliders drives innovative player engagements. Es war wichtig, sicherzustellen, dass diese Verbindungspunkte in natürlicher Bedeutung waren.It was important to make sure these connection points felt natural.

Das Ende des Brücken Kabels wird ausgeblendet, wenn der Benutzer die Hand anspricht.

Das Ende des Brücken Kabels wird ausgeblendet, wenn der Benutzer die Hand anspricht.The end of the bridge cable glows when the user’s hand approaches it

Entwickeln der SpielmechanikBuilding the game mechanics

Der Escapezeichen-Escapezeichen basiert stark auf den Komponenten der Mixed Reality-UX-Tools, um das Spiel interaktiv zu gestalten, d.h. Hand Interaktionen, Steuerelemente, Manipulatoren, Schieberegler und Schaltflächen.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.

Der Actor für die Hand Interaktion ermöglicht die direkte und lange Bearbeitung von holograms.The hand interaction actor enables both direct and far manipulation of holograms. Zu Beginn der "Kippy"-Escapesequenz erhält der Benutzer die Möglichkeit, den Speicherort des Spiels festzulegen.At the start of Kippy’s Escape, the user is given the opportunity to set the location of the game. Hand Balken, die sich aus der Benutzer Palme erstrecken, erleichtern es Ihnen, große Hologramme zu bearbeiten, die weit entfernt sind, wie im folgenden GIF dargestellt.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.

Hand Interaktion Actor GIF

Die Platzhalter Szene selbst kann mithilfe der bounds-Steuerungs Komponente der UX-Tools gezogen und gedreht werden.The placeholder scene itself can be dragged and rotated using UX Tools’ bounds control component.

Auf der zweiten Insel muss der Benutzer Edelsteine abrufen und in den entsprechenden Slots platzieren.On the second island, the user must pick up gems and place them in their matching slots. In den Edelsteinen sind Manipulatoren angefügt, die es dem Benutzer ermöglichen, diese auszuwählen und zu platzieren.The gems have manipulators attached to them that allow the user to pick them up and place them down.

Manipulatorbeispiel GIF

Eine Schaltfläche , die Sie verwenden können, ist der Schlüssel, um Bomben zur Verwendung auf der dritten Insel aufzubringen.A pressable button is the key to bringing up bombs for use on the third island.

Beispiel für eine Schaltfläche zum Komprimieren

Auf der vierten Insel wird eine Schiebereglerkomponente angezeigt, die die endgültige Bridge auslöst, die ausgelöst werden soll.A slider component appears on the fourth island, triggering the final bridge to be raised.

Beispiel für Schieberegler-Komponente GIF

Optimieren von hololens 2Optimizing for HoloLens 2

Mit jeder für die Ausführung auf einem mobilen Gerät erstellten Darstellung ist die Leistung kritisch.With any experience built to run on a mobile device, keeping an eye on performance is critical. Unreal 4,25 enthält ein wichtiges Update zur Unterstützung mobiler MultiView-Funktionen, wodurch der renderingaufwand erheblich reduziert und die Framerate erhöht werden.Unreal 4.25 includes a major update to support for mobile multi-view, which significantly reduces rendering overhead and boosts frame-rate. Wir empfehlen Ihnen, die anderen empfohlenen Leistungseinstellungen für die hololens 2-Entwicklung mit Unreal zu prüfen, wenn Sie optimieren.We recommend checking out our other recommended performance settings for HoloLens 2 development with Unreal when you're optimizing.

Die Leistung von Physik Objekten bleibt weiterhin teuer, daher wurden einige clevere Problem Umgehungen verwendet.Physics objects still remain costly for performance, so a couple clever workarounds were used. Beispielsweise erfordert die dritte "Bridge" das Aufblasen einiger Trümmer, die die Treppe blockieren.For instance, the third “bridge” requires blowing up some debris blocking the stairway. Anstatt eine Force als Physik Objekte zu verwenden, löst die Bomben-Detonation einen Austausch aus und schaltet die statischen Steine auf einen explodierenden Partikeleffekt.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.

Optimiertes Beispiel für hololens 2 GIF

Wir haben auch unsere Draw-Aufrufe von über 400 bis ~ 260 durch Folgendes reduziert:We also cut down our draw calls from over 400 to ~260 by:

  • Reduzieren der Mesh-KomplexitätReducing mesh complexity
  • Kombinieren von NetzenCombining meshes
  • Entfernen einiger unserer anfänglichen dynamischen BeleuchtungselementeRemoving some of our initial dynamic lighting elements

Obwohl es wahrscheinlich noch mehr möglich wäre, wäre es ein gutes Gleichgewicht zwischen Leistung und visueller Qualität.While there’s likely more we could have done, we felt that was a good balance between performance and visual quality.

Probieren Sie es aus!Try it out!

Starten Sie die hololens 2, und laden Sie die APP aus dem Microsoft Store herunter , oder Klonen Sie das Repository von GitHub, und erstellen Sie die APP selbst.Boot up your HoloLens 2 and download the app from the Microsoft Store, or clone the repository from GitHub and build the app yourself!

Informationen zum TeamAbout the team

Picture of Jack Caron Jack CaronJack Caron
Lead Spiel-DesignerLead Game Designer
Jack funktioniert derzeit in gemischten Umgebungen für Microsoft, einschließlich hololens 2-Projekten und altspacevr, und war zuvor ein Designer des hololens Platform-Teams.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 Sommer WuSummer Wu
ProducerProducer
Der Sommer arbeitet auf der Mixed Reality-Entwicklerplattform und leitet die Unreal Engine-bezogenen Anstrengungen des Teams ein.Summer works on the mixed reality developer platform and heads the team’s Unreal Engine related efforts.

Vielen Dank an unsere Freunde bei Framestore , um uns dabei zu unterstützen, das Escapezeichen in den Leben zu bringen.Special thanks to our friends at Framestore for helping us bring Kippy’s Escape to life. Von der Zeichen Entwicklung bis hin zum Asset-Design und zur Spielprogrammierung war die Zusammenarbeit mit diesem Projekt entscheidend.From character development, to asset design, to game programming, their collaboration on this project was pivotal.