A criação do escape do KippyThe Making of Kippy's Escape

Kippy o robô é ativado para se encontrar em uma ilha.Kippy the robot wakes up to find itself stranded on an island. Cabe a você colocar sua solução de problemas para ajudá-lo a encontrar um caminho de volta para seu Rocket Ship!It’s up to you to put on your problem-solving hat to help it find a path back to its rocket ship! A tira do seu HoloLens 2 e Baixe o aplicativo do Microsoft Store ou clone o repositório do GitHub e obtenha o 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

Verifique se você está usando o mecanismo não real 4,25 ou posterior se estiver compilando o escape do Kippy no repositório github.Make sure you're using Unreal Engine 4.25 or later if you're building Kippy's Escape from the GitHub repository.

O escape do Kippy é um aplicativo de exemplo do HoloLens 2 de software livre criado com as ferramentas de UX inreal do mecanismo 4 e da realidade misturada para o inreal.Kippy’s Escape is an open-source HoloLens 2 sample app built with Unreal Engine 4 and Mixed Reality UX Tools for Unreal. Nesta postagem, vamos orientá-lo pelo processo dos primeiros princípios e Design Visual para implementar e otimizar a experiência.In this post, we’ll walk you through our process from first principles and visual design to implementing and optimizing the experience. Você pode encontrar mais informações sobre como desenvolver aplicativos de realidade misturada com as ferramentas do MRTK UX na visão geral do desenvolvimento inreal.You can find more information on developing Mixed Reality applications with MRTK UX Tools in the Unreal development overview.

Primeiros princípiosFirst principles

Na configuração para criar o escape do Kippy, nosso objetivo era criar uma experiência que realçasse o suporte do hololens 2 do mecanismo inreal, os recursos do hololens 2 e o kit de ferramentas de realidade misturada.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 os desenvolvedores a imaginar o que poderiam criar com o inreal e o HoloLens 2.We wanted to inspire developers to imagine what they could create with Unreal and HoloLens 2.

Nós chegamos a três princípios de orientação para a experiência: que precisa ser divertido, interativo e ter uma barreira baixa 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. Queríamos que a experiência seja intuitiva o suficiente, até mesmo um usuário de realidade misturada pela primeira vez não precisará de um tutorial para passar por ele.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.

Projetando o jogoDesigning the game

O HoloLens 2 tem acesso aos recursos de design encontrados em qualquer lugar no jogo hoje.The HoloLens 2 has access to design features found nowhere else in gaming today. Os objetos podem ser enviados por Push ou manipulados diretamente usando suas mãos ou direcionados com acompanhamento de olho.Objects can be directly pushed or manipulated using your hands or targeted with eye tracking. Esses recursos principais estão por trás de algum tempo divertido que criamos no escape do Kippy.These key features are behind some of the fun moments we built out in Kippy’s Escape.

Usando os recursos exclusivos do HoloLens 2 como orientação para nosso design de jogos, fizemos um escopo de alguns cenários de ambiente pequeno.Using the unique HoloLens 2 features as guidance for our game design, we scoped out a few small environment scenarios. As ilhas faziam sentido porque podem ser ajustadas para diferentes alturas do jogador e fornecer ideias de ponte divertidas.Islands made sense because they can be adjusted for different player heights, and provided some entertaining bridge ideas. Nós descarregoumos o tema de Civilization antigo que cumprem a tecnologia Sci-Fi, com a ideia de que alguém tinha criado máquinas sobre ruins aproveitando uma energia estranha fornecida por cada ilha.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. As ilhas eram cada uma dada à aparência própria, um detalhe que ajudou a criar interesse visual.The islands were each given their own look and feel, a detail that helped create visual interest. Um bom equilíbrio entre modelagem e texturing manteria as chamadas de desenho baixas para o desempenho de renderização, de modo que uma aparência estilizada foi projetada com isso em mente.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.

O design inicial de jogos esboça alguns esboços iniciais sobre a aparência da experiênciaEarly game design sketches Some early sketches for what the experience might look like

Renderizações dos renderizadores da segunda ilha da segunda ilhaRenderings of the second island Renderings of the second island

Para manter em nossa programação de produção curta, concordamos que um caractere flutuante poderia capturar intenções e emoções sem ciclos de animação rigorosos.To keep within our short production schedule, we agreed that a floating character could capture intent and emotion without rigorous animation cycles. Kippy nasceu!And so Kippy was born! Ele emotes algumas expressões diferentes por meio de seus olhos e por meio de efeitos de som vocal mínimos para ajudar a orientar o Player durante toda a experiência.It emotes a few different expressions through its eyes and through minimalistic vocal sound effects to help guide the player throughout the experience.

Kippy mostrando expressões diferentes por seus olhos

Kippy mostrando expressões diferentes por seus olhosKippy showing different expressions via its eyes

Se o usuário levar muito tempo para resolver um quebra-cabeça, Kippy dará ao usuário uma dica

Se o usuário levar muito tempo para resolver um quebra-cabeça, Kippy dará ao usuário uma dicaIf the user takes too long to solve a puzzle, Kippy will give the user a hint

Além do design de caractere e de ambiente, fizemos um esforço em conjunto para fazer com que o jogo fique divertido.Beyond the character and environment design, we made a concerted effort to make the game feel fun. O controle ocular nos permitiu disparar os atributos material e Sound, que realçaram as principais partes do jogo.Eye tracking allowed us to fire off material and sound attributes, which highlighted key pieces of the game. O áudio espacial ajudou a fazer com que os níveis se sintam em casa no ambiente do jogador.Spatial audio helped make the levels feel at home in the player’s surroundings. Ser capaz de captar objetos, botões de ação e manipular controles deslizantes impulsiona contratos de jogador inovadores.Being able to grab objects, push buttons, and manipulate sliders drives innovative player engagements. Era importante ter certeza de que esses pontos de conexão pareciam naturais.It was important to make sure these connection points felt natural.

O fim do cabo da ponte é brilho quando a mão do usuário se aproxima dele

O fim do cabo da ponte é brilho quando a mão do usuário se aproxima deleThe end of the bridge cable glows when the user’s hand approaches it

Criando a mecânica do jogoBuilding the game mechanics

O escape do Kippy depende muito de componentes de ferramentas de UX da realidade misturada para tornar o jogo interativo – ou seja, os atores, controles associados, manipuladores, controles deslizantes e botões.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.

O ator de interação manual permite a manipulação direta e longe de hologramas.The hand interaction actor enables both direct and far manipulation of holograms. No início do escape do Kippy, o usuário terá a oportunidade de definir o local do jogo.At the start of Kippy’s Escape, the user is given the opportunity to set the location of the game. As emissões de mão que se estendem da palma do usuário facilitam a manipulação de hologramas grandes que estão distantes, como visto no gif abaixo.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 do ator de interação manual

A própria cena de espaço reservado pode ser arrastada e girada usando componente de controle de limites de ferramentas de UX.The placeholder scene itself can be dragged and rotated using UX Tools’ bounds control component.

Na segunda ilha, o usuário deve selecionar Gems e colocá-las em seus slots correspondentes.On the second island, the user must pick up gems and place them in their matching slots. Os Gems têm os manipuladores anexados a eles que permitem que o usuário os pegue e os coloque.The gems have manipulators attached to them that allow the user to pick them up and place them down.

Gif de exemplo de manipulador

Um botão pressionável é a chave para colocar o bombas para uso na terceira ilha.A pressable button is the key to bringing up bombs for use on the third island.

Gif de exemplo de botão pressionável

Um componente Slider aparece na quarta ilha, disparando a ponte final a ser gerada.A slider component appears on the fourth island, triggering the final bridge to be raised.

Exemplo de componente de controle deslizante gif

Otimizando para o HoloLens 2Optimizing for HoloLens 2

Com qualquer experiência criada para ser executada em um dispositivo móvel, manter-se atento ao desempenho é essencial.With any experience built to run on a mobile device, keeping an eye on performance is critical. O inreal 4,25 inclui uma atualização importante para dar suporte a várias exibições móveis, o que reduz significativamente a sobrecarga de renderização e aumenta a taxa de quadros.Unreal 4.25 includes a major update to support for mobile multi-view, which significantly reduces rendering overhead and boosts frame-rate. É recomendável verificar nossas outras configurações de desempenho recomendadas para desenvolvimento de HoloLens 2 com inreal quando você está otimizando.We recommend checking out our other recommended performance settings for HoloLens 2 development with Unreal when you're optimizing.

Os objetos de física ainda permanecem caros para o desempenho, portanto, algumas soluções alternativas inteligentes foram usadas.Physics objects still remain costly for performance, so a couple clever workarounds were used. Por exemplo, a terceira "ponte" requer a sopro de alguns resíduos que bloqueiam o Stairway.For instance, the third “bridge” requires blowing up some debris blocking the stairway. Em vez de ter um impacto forçado nas pedras como objetos de física, o bomba denotação dispara uma permuta, alternando as pedras estáticas para um efeito de partículas explodida.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.

Exemplo otimizado para GIF 2 do HoloLens

Também reduzimos nossas chamadas de desenho de mais de 400 para ~ 260:We also cut down our draw calls from over 400 to ~260 by:

  • Reduzindo a complexidade da malhaReducing mesh complexity
  • Combinando malhasCombining meshes
  • Removendo alguns dos nossos elementos de iluminação dinâmica inicialRemoving some of our initial dynamic lighting elements

Embora seja muito provável que possamos ter feito, achamos que foi um bom equilíbrio entre desempenho e qualidade visual.While there’s likely more we could have done, we felt that was a good balance between performance and visual quality.

Experimente!Try it out!

Inicialize o seu HoloLens 2 e Baixe o aplicativo do Microsoft Store, ou clone o repositório do GitHub e crie o aplicativo por conta própria!Boot up your HoloLens 2 and download the app from the Microsoft Store, or clone the repository from GitHub and build the app yourself!

Sobre a equipeAbout the team

Picture of Jack Caron Jack-CaronJack Caron
Designer de jogo líderLead Game Designer
Atualmente, a Jack trabalha em experiências de realidade mista para a Microsoft, incluindo projetos do HoloLens 2 e AltspaceVR, e era um designer da equipe da plataforma do 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 de verãoSummer Wu
ProdutorProducer
O verão funciona na plataforma de desenvolvedor da realidade misturada e tem como mente os esforços relacionados ao mecanismo não real da equipe.Summer works on the mixed reality developer platform and heads the team’s Unreal Engine related efforts.

Obrigado especial aos nossos amigos em Framestore para nos ajudar a dar vida ao Kippy de escape.Special thanks to our friends at Framestore for helping us bring Kippy’s Escape to life. Desde o desenvolvimento de caracteres até o design de ativos até a programação de jogos, a colaboração desse projeto era dinamizada.From character development, to asset design, to game programming, their collaboration on this project was pivotal.