2. Initialisieren des Projekts und der ersten Anwendung2. Initializing your project and first application

ÜbersichtOverview

In diesem ersten Tutorial beginnen Sie mit einer neuen Unreal-Anwendung für HoloLens 2.In this first tutorial, you'll get started with a new Unreal application for HoloLens 2. Dies beinhaltet das Hinzufügen des HoloLens-Plug-Ins, das Erstellen und Einleuchten eines Levels und das Bestücken des Levels mit einem Spielbrett und einer Schachfigur.This is going to include adding the HoloLens plugin, creating and lighting a level, and populating it with a game board and chess piece. Sie verwenden vorgefertigte Medienobjekte für die 3D-Schachfigur und Objektmaterialien, Sie brauchen also nichts von Grund auf neu zu modellieren.You'll be using pre-made assets for the 3D chess piece and object materials, so don't worry about modeling anything from scratch. Am Ende dieses Tutorials verfügen Sie über einen leeren Zeichenbereich, der für Mixed Reality bereit ist.By the end of this tutorial you'll have a blank canvas that's ready for mixed reality.

Bevor Sie fortfahren, stellen Sie sicher, dass alle auf der Seite Erste Schritte genannten Voraussetzungen erfüllt sind.Before continuing, make sure you have all the prerequisites from the Getting Started page.

ZieleObjectives

  • Konfigurieren eines Unreal-Projekts für die HoloLens-EntwicklungConfiguring an Unreal project for HoloLens development
  • Importieren von Medienobjekten und Einrichten einer SzeneImporting assets and setting up a scene
  • Erstellen von Akteuren und Ereignissen auf Skriptebene mithilfe von BlaupausenCreating Actors and script-level events with blueprints

Erstellen eines neuen Unreal-ProjektsCreating a new Unreal project

Als erstes benötigen Sie ein Projekt, mit dem Sie arbeiten können.The first thing you need is a project to work with. Wenn Sie zum ersten Mal eine Unreal-App für HoloLens erstellen, müssen Sie aus dem Epic-Startprogramm unterstützende Dateien herunterladen.If this is your first time creating an Unreal app for HoloLens, you'll need to download supporting files from the Epic Launcher.

  1. Starten der Unreal EngineLaunch Unreal Engine

  2. Wählen Sie unter New Project Categories (Kategorien für neues Projekt) die Option Games (Spiele) aus, und klicken Sie auf Next (Weiter).Select Games in New Project Categories and click Next.

Wählen Sie die Projektvorlage „Games“ (Spiele) aus.

  1. Wählen Sie die Leere Vorlage aus, und klicken Sie auf Weiter.Select the Blank Template and click Next.

Auswählen einer leeren Vorlage

  1. Legen Sie C++ , Scalable 3D or 2D, Mobile/Tablet (Skalierbares 3D oder 2D, Mobilgerät/Tablet) und No Starter Content (Keine Startinhalte) als Ihre Projekteinstellungen fest, wählen Sie dann einen Speicherort aus, und klicken Sie auf Projekt erstellen.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.

Hinweis

Anstelle eines Blaupausenprojekts müssen Sie ein C++-Projekt auswählen, um das UX Tools-Plug-In zu erstellen, das Sie später in Abschnitt 4 einrichten.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.

Anfängliche Projekteinstellungen

Das Projekt sollte automatisch im Unreal Editor geöffnet werden, und damit sind Sie für den nächsten Abschnitt bereit.The project should open up automatically in the Unreal editor, which means you're ready for the next section.

Aktivieren der erforderlichen Plug-InsEnabling required plugins

Bevor Sie mit dem Hinzufügen von Objekten zur Szene beginnen, müssen Sie zwei Plug-Ins aktivieren.Before you start adding objects to the scene you'll need to enable two plugins.

  1. Öffnen Sie Edit > Plugins (Bearbeiten > Plug-Ins), und wählen Sie in der Liste der integrierten Optionen Augmented Reality aus.Open Edit > Plugins and select Augmented Reality from the built-in options list.
    • Scrollen Sie nach unten zu HoloLens, und aktivieren Sie Enabled (Aktiviert).Scroll down to HoloLens and check Enabled.

Aktivieren der HoloLens-Plugins

  1. Wählen Sie in der Liste der integrierten Optionen Virtual Reality aus.Select Virtual Reality from the built-in options list.
    • Scrollen Sie nach unten zu Microsoft Windows Mixed Reality, aktivieren Sie Enabled (Aktiviert), und starten Sie den Editor neu.Scroll down to Microsoft Windows Mixed Reality, check Enabled, and restart your editor.

Aktivieren des Windows Mixed Reality-Plug-Ins

Hinweis

Beide Plug-Ins werden für die Entwicklung für HoloLens 2 benötigt.Both plugins are required for HoloLens 2 development.

Nachdem dies erledigt ist, ist Ihr leeres Level jetzt bereit, belebt zu werden.With that done your empty level is ready for company.

Erstellen eines LevelsCreating a level

Ihre nächste Aufgabe besteht darin, ein einfaches Player-Setup mit einem Startpunkt und einem Würfel als Referenz und Maßstab zu erstellen.Your next task is to create a simple player setup with a starting point and a cube for reference and scale.

  1. Wählen Sie File > New Level (Datei > Neues Level) und dann Empty Level (Leeres Level) aus.Select File > New Level and choose Empty Level. Die Standardszene im Viewport sollte nun leer sein.The default scene in the viewport should now be empty.

  2. Wählen Sie auf der Registerkarte Modes (Modi) Basic (Einfach) aus, und ziehen Sie PlayerStart auf die Szene.Select Basic from the Modes tab and drag PlayerStart into the scene.

    • Legen Sie auf der Registerkarte Details Location (Position) auf X = 0, Y = 0 und Z = 0 fest. Dadurch wird der Benutzer beim Start der App in der Mitte der Szene platziert.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.

Viewport mit „PlayerStart“

  1. Ziehen Sie einen Würfel von der Registerkarte Basic (Einfach) auf die Szene.Drag a Cube from the Basic tab into the scene.
    • Legen Sie Location (Position) auf X = 50, Y = 0 und Z = 0 fest.Set Location to X = 50, Y = 0, and Z = 0. Dadurch wird der Würfel beim Start 50 cm vom Spieler entfernt platziert.This positions the cube 50 cm away from the player at start time.
    • Ändern Sie Scale (Maßstab) in X = 0,2, Y = 0,2 und Z = 0,2, um den Würfel zu verkleinern.Change Scale to X = 0.2, Y = 0.2, and Z = 0.2 to shrink the cube down.

Sie können den Würfel erst sehen, wenn Sie Ihrer Szene eine Lichtquelle hinzufügen, und das ist Ihre letzte Aufgabe vor dem Testen der Szene.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. Wechseln Sie im Bereich Modes (Modi) zur Registerkarte Lights (Lichtquellen), und ziehen Sie ein Directional Light (Gerichtetes Licht) auf die Szene.Switch to the Lights tab in the Modes panel and drag a Directional Light into the scene. Positionieren Sie das Licht oberhalb von PlayerStart, sodass Sie es sehen können.Position the light above PlayerStart so you can see it.

Viewport mit hinzugefügtem Licht

  1. Navigieren Sie zu File > Save Current (Datei > Aktuelle speichern), benennen Sie Ihr Level Main (Hauptlevel), und klicken Sie auf Save (Speichern).Go to File > Save Current, name your level Main, and click Save.

Nachdem die Szene jetzt festgelegt ist, drücken Sie auf Play (Wiedergabe) in der Symbolleiste, um den Würfel in Aktion zu sehen!With the scene set, press Play in the toolbar to see your cube in action! Wenn Sie Ihre Arbeit genügend gewürdigt haben, drücken Sie Esc, um die Anwendung zu beenden.When you're finished admiring your work, press Esc to stop the application.

Ein Würfel im Viewport

Nachdem die Szene nun eingerichtet ist, können Sie damit beginnen, das Schachbrett und die Schachfigur hinzuzufügen, um die Anwendungsumgebung abzurunden.Now that the scene is setup, you can start adding in the chess board and piece to round out the application environment.

Importieren von MedienobjektenImporting assets

Die Szene sieht momentan etwas leer aus, aber das beheben Sie, indem Sie die vorgefertigten Medienobjekte in das Projekt importieren.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. Laden Sie den Medienobjektordner von GitHub herunter, und entpacken Sie ihn mit 7-zip.Download and unzip the GitHub assets folder using 7-zip.

  2. Klicken Sie im Inhaltsbrowser auf Add New > New Folder (Neu hinzufügen > Neuer Ordner), und benennen Sie ihn ChessAssets (Schachobjekte).Click Add New > New Folder from the Content Browser and name it ChessAssets.

    • Doppelklicken Sie auf den neuen Ordner – dies ist der Ort, in den Sie die 3D-Medienobjekte importieren.Double-click the new folder - this is where you'll import the 3D assets.

Anzeigen oder Ausblenden des Quellenbereichs

  1. Klicken Sie im Inhaltsbrowserauf Importieren, wählen Sie im Ordner mit den entpackten Medienobjekten alle Elemente aus, und klicken Sie auf Öffnen.Click Import from the Content Browser, select all the items in the unzipped assets folder and click Open.

    • Dieser Ordner enthält die Gittermodelle der 3D-Objekte für das Schachbrett und Teile im FBX-Format sowie Strukturschemas im TGA-Format, die Sie für Materialien verwenden.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. Wenn das Fenster mit den FBX-Importoptionen eingeblendet wird, klappen Sie den Abschnitt Material auf, und ändern Sie die Material Import Method (Methode für den Materialimport) in Do Not Create Material (Kein Material erstellen).When the FBX Import Options window pops up, expand the Material section and change Material Import Method to Do Not Create Material.

    • Klicken Sie auf Import All (Alle importieren).Click Import All.

FBX-Importoptionen

Mehr müssen Sie für die Medienobjekte nicht unternehmen.That's all you need to do for the assets. In der nächsten Reihe von Aufgaben befassen Sie sich mit dem Erstellen der Bausteine der Anwendung mithilfe von Blaupausen.Your next set of tasks is to create the building blocks of the application with blueprints.

Hinzufügen von BlaupausenAdding blueprints

  1. Klicken Sie im Inhaltsbrowser auf Add New > New Folder (Neu hinzufügen > Neuer Ordner), und benennen Sie ihn Blueprints (Blaupausen).Click Add New > New Folder in the Content Browser and name it Blueprints.

Hinweis

Falls Sie Blaupausen noch nicht kennen – bei ihnen handelt es sich um spezielle Medienobjekte, die eine knotenbasierte Oberfläche bieten, über die neue Arten von Akteuren und Ereignissen auf der Skriptebene erstellt werden können.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. Doppelklicken Sie auf den Ordner Blaupausen, klicken Sie dann mit der rechten Maustaste, und wählen Sie Blueprint Class (Blaupausenklasse) aus.Double-click into the Blueprints folder, then right-click and select Blueprint Class.
    • Wählen Sie Actor (Akteur) aus, und benennen Sie die Blaupause Board (Brett).Select Actor and name the blueprint Board.

Auswählen einer übergeordneten Klasse für Ihre Blaupause

Die neue Board-Blaupause wird nun im Ordner Blueprints (Blaupausen) angezeigt, wie im folgenden Screenshot zu sehen.The new Board blueprint now shows up in the Blueprints folder as seen in the following screenshot.

Die neue Blaupause „Board“

Sie sind jetzt bereit, den erstellten Objekten Materialien hinzuzufügen.You're all set to start adding materials to the created objects.

Arbeiten mit MaterialienWorking with materials

Die Objekte, die Sie erstellt haben, sind standardgrau, was visuell nicht viel hermacht.The objects you've created are default grey, which isn't much fun to look at. Das Hinzufügen von Materialien und Gittermodellen zu Ihren Objekten ist der letzte Satz von Aufgaben in diesem Tutorial.Adding materials and meshes to your objects is the last set of tasks in this tutorial.

  1. Doppelklicken Sie auf Board, um den Blaupausen-Editor zu öffnen.Double-click Board to open the blueprint editor.

  2. Klicken Sie im Bereich Components (Komponenten) auf Add Component > Scene (Komponente hinzufügen > Szene), und benennen Sie sie Root (Stamm).Click Add Component > Scene from the Components panel and name it Root. Beachten Sie, dass Root im Screenshot unten als untergeordnetes Element von DefaultSceneRoot dargestellt ist:Notice that Root shows up as a child of DefaultSceneRoot in the screenshot below:

Ersetzen des Stammordners in Blaupausen

  1. Klicken Sie, und ziehen Sie Root auf DefaultSceneRoot, um es zu ersetzen und die Kugel im Viewport zu entfernen.Click-and-drag Root onto DefaultSceneRoot to replace it and get rid of the sphere in the viewport.

Ersetzen des Stamms

  1. Klicken Sie im Bereich Components (Komponenten) auf Add Component > Static Mesh (Komponente hinzufügen > Statisches Gittermodell), und benennen Sie es SM_Board.Click Add Component > Static Mesh from the Components panel and name it SM_Board. Es wird als untergeordnetes Objekt unter Root angezeigt.It will appear as a child object under Root.

Hinzufügen eines statischen Gitters

  1. Klicken Sie auf SM_Board, scrollen Sie im Bereich Details nach unten zum Abschnitt Static Mesh (Statisches Gittermodell), und wählen Sie in der Dropdownliste ChessBoard aus.Click SM_Board, scroll down to the Static Mesh section of the Details panel, and select ChessBoard from the dropdown.

Das Schachbrettgitter im Viewport

  1. Klappen Sie, wiederum im Bereich Details den Abschnitt Materials (Materialien) auf, und klicken Sie in der Dropdownliste auf Create New Asset > Material (Neues Medienobjekt erstellen > Material).Still in the Details panel, expand the Materials section and click Create New Asset > Material from the dropdown.
    • Benennen Sie das Material M_ChessBoard, und speichern Sie es im Ordner ChessAssets.Name the material M_ChessBoard and save it to the ChessAssets folder.

Erstellen eines neuen Materials

  1. Doppelklicken Sie auf das Bild des Materials M_ChessBoard, um den Material-Editor zu öffnen.Double-click the M_ChessBoard material imaged to open the Material Editor.

Geöffneter Material-Editor

  1. Klicken Sie im Material-Editor mit der rechten Maustaste, und suchen Sie nach Texture Sample (Texturbeispiel).In the Material Editor, right-click and search for Texture Sample.
    • Klappen Sie im Bereich Details den Abschnitt Material Expression Texture Base (Texturbasis für Materialausdruck) auf, und legen Sie Texture (Textur) auf ChessBoard_Albedo fest.Expand the Material Expression Texture Base section in the Details panel and set Texture to ChessBoard_Albedo.
    • Ziehen Sie den RGB-Ausgabepin auf den Basisfarbpin von M_ChessBoard.Drag the RGB output pin to the Base Color pin of M_ChessBoard.

Festlegen der Basisfarbe

  1. Wiederholen Sie den vorherigen Schritt, um vier weitere Knoten Texture Sample (Texturbeispiel) mit den folgenden Einstellungen zu erstellen:Repeat the previous step four more times to create four more Texture Sample nodes with the following settings:
    • Legen Sie Texture (Textur) auf ChessBoard_AO fest, und verknüpfen Sie RGB mit dem Pin Ambient Occlusion (Umgebungsverdeckung).Set Texture to ChessBoard_AO and link the RGB to the Ambient Occlusion pin.
    • Legen Sie Texture (Textur) auf ChessBoard_Metal fest, und verknüpfen Sie RGB mit dem Pin Metallic (Metallisch).Set Texture to ChessBoard_Metal and link the RGB to the Metallic pin.
    • Legen Sie Texture (Textur) auf ChessBoard_Normal fest, und verknüpfen Sie RGB mit dem Pin Normal.Set Texture to ChessBoard_Normal and link the RGB to the Normal pin.
    • Legen Sie Texture (Textur) auf ChessBoard_Rough fest, und verknüpfen Sie RGB mit dem Pin Roughness (Rauheit).Set Texture to ChessBoard_Rough and link the RGB to the Roughness pin.
    • Klicken Sie auf Speichern.Click Save.

Verbinden der restlichen Texturen

Vergewissern Sie sich, dass Ihre Materialeinrichtung wie der Screenshot oben aussieht, bevor Sie fortfahren.Make sure the your material setup looks like the above screenshot before continuing.

Auffüllen der SzenePopulating the scene

Wenn Sie zur Blaupause Board (Brett) zurückkehren, sehen Sie, dass Ihr soeben erstelltes Material übernommen wurde.If you go back to the Board blueprint, you'll see that the material you just created has been applied. Jetzt müssen Sie nur noch die Szene einrichten!All that's left is setting up the scene! Ändern Sie zunächst die folgenden Eigenschaften, um sicherzustellen, dass das Brett eine sinnvolle Größe aufweist und in richtigen Winkel in der Szene platziert wird: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. Legen Sie Scale (Maßstab) auf (0,05, 0,05, 0,05) und Z Rotation (Z-Drehung) auf 90 fest.Set Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.
    • Klicken Sie in der oberen Symbolleiste auf Compile (Kompilieren), dann auf Save (Speichern), und kehren Sie zum Hauptfenster zurück.Click Compile in the top toolbar, then Save and return to the Main window.

Schachbrett mit angewendetem Material

  1. Klicken Sie mit der rechten Maustaste auf Cube > Edit > Delete (Würfel > Bearbeiten > Löschen), und ziehen Sie Board (Brett) aus dem Content Browser (Inhaltsbrowser) in den Viewport.Right-click Cube > Edit > Delete and drag Board from the Content Browser into the viewport.

    • Legen Sie Location (Position) auf X = 80, Y = 0 und Z = -20 fest.Set Location to X = 80, Y = 0, and Z = -20.
  2. Klicken Sie auf die Schaltfläche Play (Wiedergabe), um das neue Brett im Level anzuzeigen.Click the Play button to view your new board in the level. Drücken Sie ESC, um zum Editor zurückzukehren.Press Esc to return to the editor.

Führen Sie nun die folgenden Schritte aus, um eine Schachfigur zu erstellen, so wie Sie das Brett erstellt haben:Now you'll follow the same steps to create a chess piece as you did with the board:

  1. Wechseln Sie zum Ordner Blueprints (Blaupausen), klicken Sie mit der rechten Maustaste auf Blueprint Class (Blaupausenklasse), wählen Sie sie aus, und wählen Sie dann Actor (Akteur) aus.Go to the Blueprints folder, right-click and select Blueprint Class and choose Actor. Nennen Sie den Akteur WhiteKing.Name the actor WhiteKing.

  2. Doppelklicken Sie auf WhiteKing, um ihn im Blaupausen-Editor zu öffnen, klicken Sie auf Add Component > Scene (Komponente hinzufügen > Szene), und benennen Sie sie Root (Stamm).Double click WhiteKing to open it in the Blueprint Editor, click Add Component > Scene and name it Root.

    • Ziehen Sie Root auf DefaultSceneRoot, um sie zu ersetzen.Drag-and-drop Root onto DefaultSceneRoot to replace it.
  3. Klicken Sie auf Add Component > Static Mesh (Komponente hinzufügen > Statisches Gittermodell), und benennen Sie es SM_King.Click Add Component > Static Mesh and name it SM_King.

    • Legen Sie im Detailbereich die Option Static Mesh (Statisches Gittermodell) auf Chess_King und die Option Material auf ein neues Material mit dem Namen M_ChessWhite fest.Set Static Mesh to Chess_King and Material to a new Material called M_ChessWhite in the Details panel.
  4. Öffnen Sie M_ChessWhite im Material-Editor, und verbinden Sie die folgenden Texture Sample-Knoten (Texturbeispiel) in folgender Weise:Open M_ChessWhite in the Material editor and hook up the following Texture Sample nodes to the following:

    • Legen Sie Textur auf ChessWhite_Albedo fest, und verknüpfen Sie RGB mit dem Pin Basisfarbe.Set Texture to ChessWhite_Albedo and link the RGB to the Base Color pin.
    • Legen Sie Texture (Textur) auf ChessWhite_AO fest, und verknüpfen Sie RGB mit dem Pin Ambient Occlusion (Umgebungsverdeckung).Set Texture to ChessWhite_AO and link the RGB to the Ambient Occlusion pin.
    • Legen Sie Texture (Textur) auf ChessWihte_Metal fest, und verknüpfen Sie RGB mit dem Pin Metallic (Metallisch).Set Texture to ChessWhite_Metal and link the RGB to the Metallic pin.
    • Legen Sie Texture (Textur) auf ChessWhite_Normal fest, und verknüpfen Sie RGB mit dem Stift Normal.Set Texture to ChessWhite_Normal and link the RGB to the Normal pin.
    • Legen Sie Texture (Textur) auf ChessWhite_Rough fest, und verknüpfen Sie RGB mit dem Pin Roughness (Rauheit).Set Texture to ChessWhite_Rough and link the RGB to the Roughness pin.
    • Klicken Sie auf Speichern.Click Save.

Ihr M_ChessKing-Material sollte wie die folgende Abbildung aussehen, bevor Sie fortfahren.Your M_ChessKing material should look like the following image before continuing.

Erstellen des Materials für den König (Schachfigur)

Sie haben es fast geschafft, wir müssen jetzt nur noch der Szene die neue Schachfigur hinzufügen:You're almost there, just need to add the new chess piece into the scene:

  1. Öffnen Sie die WhiteKing-Blaupause, ändern Sie den Scale (Maßstab) in (0,05, 0,05, 0,05) und Z Rotation (Z_Drehung) in 90.Open the WhiteKing blueprint and change the Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.

    • Kompilieren und speichern Sie die Blaupause, und kehren Sie anschließend wieder zum Hauptfenster zurück.Compile and save your blueprint, then head back to the main window.
  2. Ziehen Sie WhiteKing in den Viewport, wechseln Sie zum World Outliner (Gliederungs-Editor), und ziehen Sie WhiteKing auf Board, um ihn zum untergeordneten Objekt zu machen.Drag WhiteKing into the viewport, switch to the World Outliner panel drag WhiteKing onto Board to make it a child object.

Gliederungs-Editor

  1. Legen Sie im Bereich Details unter Transform (Transformieren) die Location (Position) von WhiteKing auf X = -26, Y = 4 und Z = 0 fest.In the Details panel under Transform, set WhiteKing's Location to X = -26, Y = 4, and Z = 0.

Das wäre geschafft!That's a wrap! Klicken Sie auf Play (Wiedergabe), um Ihr aufgefülltes Level in Aktion zu sehen, und drücken Sie Esc, wenn Sie die Szene beenden möchten.Click Play to see your populated level in action, and press Esc when you're ready to exit. In diesem Tutorial wurde das Erstellen eines einfachen Projekts ausführlich erläutert, aber Ihr Projekt ist für die Umstellung auf den nächsten Teil der Reihe bereit: Einrichten für Mixed Reality.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.

Nächster Abschnitt: 3. Einrichten Ihres Projekts für Mixed RealityNext Section: 3. Set up your project for mixed reality