2. Inicializar o projeto e seu primeiro aplicativo2. Initializing your project and first application

Visão geralOverview

Neste primeiro tutorial, você começará com um novo aplicativo do Unreal para o HoloLens 2.In this first tutorial, you'll get started with a new Unreal application for HoloLens 2. Isso incluirá adicionar o plug-in do HoloLens, criar e iluminar um nível e populá-lo com um jogo de tabuleiro e uma peça de xadrez.This is going to include adding the HoloLens plugin, creating and lighting a level, and populating it with a game board and chess piece. Você usará ativos pré-criados para a peça de xadrez 3D e materiais de objeto, então não será necessário fazer a modelagem de nada do zero.You'll be using pre-made assets for the 3D chess piece and object materials, so don't worry about modeling anything from scratch. No final deste tutorial, você terá uma tela em branco que está pronta para a realidade misturada.By the end of this tutorial you'll have a blank canvas that's ready for mixed reality.

Antes de continuar, verifique se você atende a todos os pré-requisitos da página Introdução.Before continuing, make sure you have all the prerequisites from the Getting Started page.

ObjetivosObjectives

  • Como configurar um projeto do Unreal para desenvolvimento no HoloLensConfiguring an Unreal project for HoloLens development
  • Como importar ativos e configurar um cenárioImporting assets and setting up a scene
  • Como criar Atores e eventos em nível de script com blueprintsCreating Actors and script-level events with blueprints

Como criar um projeto do UnrealCreating a new Unreal project

A primeira coisa que você precisa é de um projeto com o qual trabalhar.The first thing you need is a project to work with. Se esta é a primeira vez que você empacota um aplicativo do Unreal para o HoloLens, baixe os arquivos de suporte do Epic Launcher.If this is your first time creating an Unreal app for HoloLens, you'll need to download supporting files from the Epic Launcher.

  1. Iniciar Unreal EngineLaunch Unreal Engine

  2. Selecione Jogos em Novas Categorias de Projeto e clique em Avançar.Select Games in New Project Categories and click Next.

Selecionar um modelo de projeto de jogos

  1. Selecione o modelo Em Branco e clique em Avançar.Select the Blank Template and click Next.

Selecionar o modelo Em Branco

  1. Defina C++ , 3D ou 2D Escalonável, Celular/Tablet e Nenhum Conteúdo Inicial como as Configurações de Projeto e escolha uma localização de salvamento e clique em Criar Projeto.Set C++, Scalable 3D or 2D, Mobile/Tablet, and No Starter Content as your Project Settings, then choose a save location and click Create Project.

Observação

Você precisará selecionar um projeto C++ em vez de um projeto Blueprint para criar o plug-in das Ferramentas de UX, que você vai configurar mais adiante na seção 4.You must select a C++ project rather than a Blueprint project in order to build the UX Tools plugin, which you'll be setting up later on in section 4.

Configurações iniciais do projeto

O projeto deve ser aberto automaticamente no editor Unreal, o que significa que você está pronto para a próxima seção.The project should open up automatically in the Unreal editor, which means you're ready for the next section.

Como habilitar os plugins necessáriosEnabling required plugins

Antes de começar a adicionar objetos à cena, você precisará habilitar dois plug-ins.Before you start adding objects to the scene you'll need to enable two plugins.

  1. Abra Editar > Plug-ins e selecione Realidade Aumentada na lista de opções internas.Open Edit > Plugins and select Augmented Reality from the built-in options list.
    • Role para baixo até HoloLens e marque Habilitado.Scroll down to HoloLens and check Enabled.

Como habilitar plugins do HoloLens

  1. Selecione Realidade Virtual na lista de opções internas.Select Virtual Reality from the built-in options list.
    • Role a página para baixo até Microsoft Windows Mixed Reality, marque a opção Habilitado e reinicie o editor.Scroll down to Microsoft Windows Mixed Reality, check Enabled, and restart your editor.

Como habilitar o plug-in do Windows Mixed Reality

Observação

Os dois plug-ins são necessários para o desenvolvimento no HoloLens 2.Both plugins are required for HoloLens 2 development.

Com isso feito, o nível vazio estará pronto para ter companhia.With that done your empty level is ready for company.

Criar um nívelCreating a level

A sua próxima tarefa é criar uma configuração de jogador simples com um ponto de partida e um cubo para referência e escala.Your next task is to create a simple player setup with a starting point and a cube for reference and scale.

  1. Selecione Arquivo > Novo Nível e escolha Nível Vazio.Select File > New Level and choose Empty Level. A cena padrão no visor agora deve estar vazia.The default scene in the viewport should now be empty.

  2. Selecione Básico na guia Modos e arraste PlayerStart para a cena.Select Basic from the Modes tab and drag PlayerStart into the scene.

    • Defina Localização como X = 0, Y = 0 e Z = 0 na guia Detalhes. Isso define a localização do usuário no centro da cena quando o aplicativo é iniciado.Set Location to X = 0, Y = 0, and Z = 0 in the Details tab. This sets the user at the center of the scene when the app starts up.

Visor com PlayerStart

  1. Arraste um Cubo da guia Básico para a cena.Drag a Cube from the Basic tab into the scene.
    • Defina Localização como X = 50, Y = 0 e Z = 0.Set Location to X = 50, Y = 0, and Z = 0. Isso posiciona o cubo a 50 cm do jogador na hora de início.This positions the cube 50 cm away from the player at start time.
    • Altere Escala para X = 0,2, Y = 0,2 e Z = 0,2 para diminuir o cubo.Change Scale to X = 0.2, Y = 0.2, and Z = 0.2 to shrink the cube down.

Você não poderá ver o cubo, a menos que adicione uma luz à sua cena, que é sua última tarefa antes de testar a cena em questão.You won’t be able to see the cube unless you add a light to your scene, which is your last task before testing the scene.

  1. Alterne para a guia Luzes no painel Modos e arraste uma Luz Direcional até a cena.Switch to the Lights tab in the Modes panel and drag a Directional Light into the scene. Posicione a luz acima PlayerStart para que você possa vê-la.Position the light above PlayerStart so you can see it.

Visor com luz adicionada

  1. Vá para Arquivo > Salvar Atual, nomeie seu nível Principal e clique em Salvar.Go to File > Save Current, name your level Main, and click Save.

Com a cena preparada, pressione Jogar na barra de ferramentas para ver o cubo em ação!With the scene set, press Play in the toolbar to see your cube in action! Quando tiver terminado de admirar seu trabalho, pressione Esc para interromper o aplicativo.When you're finished admiring your work, press Esc to stop the application.

Um cubo no visor

Agora que a cena está configurada, você pode começar a adicionar o tabuleiro de xadrez e a peça para completar o ambiente do aplicativo.Now that the scene is setup, you can start adding in the chess board and piece to round out the application environment.

Como importar ativosImporting assets

A cena está parecendo um tanto vazia no momento, mas você corrigirá isso importando os ativos prontos para o projeto.The scene is looking a bit empty at the moment, but you'll fix that by importing the ready-made assets into the project.

  1. Baixe e descompacte a pasta de ativos do GitHub usando o 7-zip.Download and unzip the GitHub assets folder using 7-zip.

  2. Clique em Adicionar Novo > Nova Pasta do Navegador de Conteúdo e nomeie-o como ChessAssets.Click Add New > New Folder from the Content Browser and name it ChessAssets.

    • Clique duas vezes na nova pasta: é nela que você importará os ativos 3D.Double-click the new folder - this is where you'll import the 3D assets.

Mostrar ou ocultar o painel de fontes

  1. Clique em Importar do Navegador de Conteúdo, selecione todos os itens na pasta de ativos descompactados e clique em Abrir.Click Import from the Content Browser, select all the items in the unzipped assets folder and click Open.

    • Essa pasta contém as malhas de objetos 3D para o tabuleiro de xadrez e as peças no formato FBX, bem como os mapas de textura no formato TGA que você usará para os materiais.This folder contains the 3D object meshes for the chess board and pieces in FBX format and texture maps in TGA format that you'll use to for materials.
  2. Quando a janela Opções de Importação do FBX for exibida, expanda a seção Material e altere Método de Importação de Material para Não Criar o Material.When the FBX Import Options window pops up, expand the Material section and change Material Import Method to Do Not Create Material.

    • Clique em Importar Tudo.Click Import All.

Opções em Importar FBX

Isso é tudo o que você precisa fazer com relação aos ativos.That's all you need to do for the assets. Seu próximo conjunto de tarefas é criar os blocos de construção do aplicativo com blueprints.Your next set of tasks is to create the building blocks of the application with blueprints.

Como adicionar blueprintsAdding blueprints

  1. Clique em Adicionar Novo > Nova Pasta no Navegador de Conteúdo e nomeie-o como Blueprints.Click Add New > New Folder in the Content Browser and name it Blueprints.

Observação

Se você não está familiarizado com blueprints, saiba que eles são ativos especiais que fornecem uma interface baseada em nó para criação de tipos de Atores e eventos de nível de script.If you're new to blueprints, they're special assets that provide a node-based interface for creating new types of Actors and script level events.

  1. Clique duas vezes na pasta Blueprints, depois clique com o botão direito do mouse e selecione Classe de Blueprint.Double-click into the Blueprints folder, then right-click and select Blueprint Class.
    • Selecione Ator e nomeie o novo blueprint como Tabuleiro.Select Actor and name the blueprint Board.

Selecione uma classe pai para seu Blueprint

O novo blueprint Tabuleiro agora aparece na pasta Blueprints, conforme mostrado na captura de tela a seguir.The new Board blueprint now shows up in the Blueprints folder as seen in the following screenshot.

O novo Blueprint Board

Você está pronto para começar a adicionar materiais aos objetos criados.You're all set to start adding materials to the created objects.

Como trabalhar com materiaisWorking with materials

Os objetos que você criou são no padrão cinza, o que não os deixa com uma aparência muito divertida.The objects you've created are default grey, which isn't much fun to look at. Adicionar materiais e malhas a seus objetos é o último conjunto de tarefas neste tutorial.Adding materials and meshes to your objects is the last set of tasks in this tutorial.

  1. Clique duas vezes em Painel para abrir o editor de blueprints.Double-click Board to open the blueprint editor.

  2. Clique em Adicionar Componente > Cena no painel Componentes e nomeie-o como Root.Click Add Component > Scene from the Components panel and name it Root. Observe que Root aparece como um filho de DefaultSceneRoot na captura de tela abaixo:Notice that Root shows up as a child of DefaultSceneRoot in the screenshot below:

Como substituir a raiz no blueprint

  1. Clique e arraste Root para DefaultSceneRoot para substituí-lo e livrar-se da esfera no visor.Click-and-drag Root onto DefaultSceneRoot to replace it and get rid of the sphere in the viewport.

Substituindo a raiz

  1. Clique em Adicionar Componente > Malha Estática no painel Componentes e nomeie-o como SM_Board.Click Add Component > Static Mesh from the Components panel and name it SM_Board. Ele será exibido como um objeto filho em Root.It will appear as a child object under Root.

Adicionando uma malha estática

  1. Clique em SM_Board, role para baixo até a seção Malha Estática do painel Detalhes e selecione ChessBoard na lista suspensa.Click SM_Board, scroll down to the Static Mesh section of the Details panel, and select ChessBoard from the dropdown.

A malha do tabuleiro no visor

  1. Ainda no painel Detalhes, expanda a seção Materiais e clique em Criar Ativo > Material na lista suspensa.Still in the Details panel, expand the Materials section and click Create New Asset > Material from the dropdown.
    • Nomeie o material M_ChessBoard e salve-o na pasta ChessAssets.Name the material M_ChessBoard and save it to the ChessAssets folder.

Criar um material

  1. Clique duas vezes na imagem do material M_ChessBoard para abrir o editor de material.Double-click the M_ChessBoard material imaged to open the Material Editor.

Abrir editor de material

  1. No Editor de Material, clique com o botão direito do mouse e procure Exemplo de Textura.In the Material Editor, right-click and search for Texture Sample.
    • Expanda a seção Base de Textura de Expressão do Material no painel Detalhes e defina Textura para ChessBoard_Albedo.Expand the Material Expression Texture Base section in the Details panel and set Texture to ChessBoard_Albedo.
    • Arraste o marcador de saída RGB para o marcador de Cor Base de M_ChessBoard.Drag the RGB output pin to the Base Color pin of M_ChessBoard.

Definir a cor base

  1. Repita a etapa anterior quatro mais vezes para criar mais quatro nós Exemplo de Textura com as seguintes configurações:Repeat the previous step four more times to create four more Texture Sample nodes with the following settings:
    • Defina Textura como ChessBoard_AO e vincule o RGB ao marcador Oclusão Ambiente.Set Texture to ChessBoard_AO and link the RGB to the Ambient Occlusion pin.
    • Defina Textura como ChessBoard_Metal e vincule o RGB ao marcador Metálico.Set Texture to ChessBoard_Metal and link the RGB to the Metallic pin.
    • Defina Textura como ChessBoard_Normal e vincule o RGB ao marcador Normal.Set Texture to ChessBoard_Normal and link the RGB to the Normal pin.
    • Defina Textura como ChessBoard_Rough e vincule o RGB ao marcador Aspereza.Set Texture to ChessBoard_Rough and link the RGB to the Roughness pin.
    • Clique em Salvar.Click Save.

Conectar as texturas restantes

Verifique se a configuração do material está parecida com a captura de tela acima antes de continuar.Make sure the your material setup looks like the above screenshot before continuing.

Como popular a cenaPopulating the scene

Se você retornar ao blueprint Tabuleiro, verá que o material que acabou de criar foi aplicado.If you go back to the Board blueprint, you'll see that the material you just created has been applied. Tudo o que falta fazer é configurar a cena!All that's left is setting up the scene! Primeiro, altere as propriedades a seguir para assegurar que o tabuleiro seja de um tamanho razoável e esteja inclinado corretamente quando posicionado na cena:First, change the following properties to make sure the board is a reasonable size and angled correctly when it's placed in the scene:

  1. Defina Escala como (0,05, 0,05, 0,05) e Rotação Z como 90.Set Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.
    • Clique em Compilar na barra de ferramentas superior e depois em Salvar, então volte para a Janela principal.Click Compile in the top toolbar, then Save and return to the Main window.

Tabuleiro de xadrez com material aplicado

  1. Clique com o botão direito do mouse em Cubo > Editar > Excluir e arraste Tabuleiro do Navegador de Conteúdo para o visor.Right-click Cube > Edit > Delete and drag Board from the Content Browser into the viewport.

    • Defina Localização como X = 80, Y = 0 e Z = -20.Set Location to X = 80, Y = 0, and Z = -20.
  2. Clique no botão Jogar para exibir o novo tabuleiro no nível.Click the Play button to view your new board in the level. Pressione ESC para retornar ao editor.Press Esc to return to the editor.

Agora você seguirá as mesmas etapas para criar uma peça de xadrez, do mesmo modo que você fez com o tabuleiro:Now you'll follow the same steps to create a chess piece as you did with the board:

  1. Acesse a pasta Blueprints, clique com o botão direito do mouse e selecione Classe de Blueprint, depois escolha Ator.Go to the Blueprints folder, right-click and select Blueprint Class and choose Actor. Nomeie esse ator como WhiteKing.Name the actor WhiteKing.

  2. Clique duas vezes em WhiteKing para abri-lo no Editor do Blueprint, clique em Adicionar Componente > Cena e nomeie-o como Root.Double click WhiteKing to open it in the Blueprint Editor, click Add Component > Scene and name it Root.

    • Arraste e solte Root em DefaultSceneRoot para substituí-lo.Drag-and-drop Root onto DefaultSceneRoot to replace it.
  3. Clique em Adicionar Componente > Malha Estática e nomeie-o como SM_King.Click Add Component > Static Mesh and name it SM_King.

    • No painel Detalhes, defina Malha Estática como Chess_King e Material como um novo material chamado M_ChessWhite.Set Static Mesh to Chess_King and Material to a new Material called M_ChessWhite in the Details panel.
  4. Abra M_ChessWhite no Editor de material e conecte os nós de Exemplo de Textura a seguir ao seguinte:Open M_ChessWhite in the Material editor and hook up the following Texture Sample nodes to the following:

    • Defina Textura como ChessWhite_Albedo e vincule o RGB ao marcador Cor de Base.Set Texture to ChessWhite_Albedo and link the RGB to the Base Color pin.
    • Defina Textura como ChessWhite_AO e vincule o RGB ao marcador Oclusão Ambiente.Set Texture to ChessWhite_AO and link the RGB to the Ambient Occlusion pin.
    • Defina Textura como ChessWhite_Metal e vincule o RGB ao marcador Metálico.Set Texture to ChessWhite_Metal and link the RGB to the Metallic pin.
    • Defina Textura como ChessWhite_Normal e vincule o RGB ao marcador Normal.Set Texture to ChessWhite_Normal and link the RGB to the Normal pin.
    • Defina Textura como ChessWhite_Rough e vincule o RGB ao marcador Aspereza.Set Texture to ChessWhite_Rough and link the RGB to the Roughness pin.
    • Clique em Salvar.Click Save.

Verifique se o material M_ChessKing tem aparência semelhante à da imagem a seguir antes de continuar.Your M_ChessKing material should look like the following image before continuing.

Criar o material para o rei do xadrez

Você está quase lá, falta apenas adicionar a nova peça de xadrez à cena:You're almost there, just need to add the new chess piece into the scene:

  1. Abra o blueprint WhiteKing, altere a Escala para (0,05; 0,05; 0,05) e a Rotação em Z para 90.Open the WhiteKing blueprint and change the Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.

    • Compile e salve o blueprint e, em seguida, retorne para a Janela principal.Compile and save your blueprint, then head back to the main window.
  2. Arraste WhiteKing para o visor, alterne para o painel Esboço do Mundo e arraste WhiteKing para o Tabuleiro para torná-lo um objeto filho.Drag WhiteKing into the viewport, switch to the World Outliner panel drag WhiteKing onto Board to make it a child object.

Contorno do Mundo

  1. No painel Detalhes, em Transformar, defina a Localização de WhiteKing como X = -26, Y = 4 e Z = 0.In the Details panel under Transform, set WhiteKing's Location to X = -26, Y = 4, and Z = 0.

Tudo concluído!That's a wrap! Clique em Jogar para ver o nível preenchido em ação e pressione Esc quando estiver pronto para sair.Click Play to see your populated level in action, and press Esc when you're ready to exit. Este tutorial abordou muito conteúdo sobre a criação de um projeto simples, mas seu projeto está pronto para passar para a próxima parte da série: configuração para a realidade misturada.This tutorial covered a lot of ground creating a simple project, but your project is ready to move on to the next part of the series: setting up for mixed reality.

Próxima seção: 3. Configurar seu projeto para a realidade misturadaNext Section: 3. Set up your project for mixed reality