2. Initialisation de votre projet et de votre première application2. Initializing your project and first application

Dans le premier tutoriel, vous allez commencer avec un nouveau projet Unreal et activer le plug-in HoloLens, créer et éclairer un niveau, et ajouter des pièces du jeu d’échecs.In the first tutorial, you'll start out with a new Unreal project and enable the HoloLens plugin, create and light a level, and add chess pieces. Vous allez utiliser des ressources prédéfinies pour tous les objets 3D et les matériaux : vous n’avez donc rien à modéliser vous-même.You'll be using our pre-made assets for all 3D objects and materials, so don't worry about modeling anything yourself. À la fin de ce tutoriel, vous disposerez d’un canevas vide prêt pour la réalité mixte.By the end of this tutorial, you'll have a blank canvas that's ready for mixed reality.

Important

Vérifiez que vous avez tous les prérequis mentionnés dans la page Bien démarrer.Make sure you have all the prerequisites from the Getting Started page.

ObjectifsObjectives

  • Configuration d’un projet Unreal pour le développement HoloLensConfiguring an Unreal project for HoloLens development
  • Importation de ressources et configuration d’une scèneImporting assets and setting up a scene
  • Création d’acteurs et d’événements au niveau du script avec des blueprintsCreating Actors and script-level events with blueprints

Création d’un projet UnrealCreating a new Unreal project

La première chose dont vous avez besoin est un projet avec lequel travailler.The first thing you need is a project to work with. Si vous commencez juste à développer dans Unreal, vous devez télécharger les fichiers de prise en charge auprès d’Epic Launcher.If you're a first-time Unreal developer, you'll need to download supporting files from the Epic Launcher.

  1. Lancer Unreal EngineLaunch Unreal Engine

  2. Sélectionnez Games dans New Project Categories, puis cliquez sur Next.Select Games in New Project Categories and click Next.

Sélectionner le modèle de projet Games

  1. Sélectionnez le modèle Blank, puis cliquez sur Next.Select the Blank Template and click Next.

Sélectionner le modèle Blank

  1. Définissez C++ , Scalable 3D or 2D, Mobile/Tablet et No Starter Content dans Project Settings, puis choisissez un emplacement d’enregistrement et cliquez sur Create Project.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.

Notes

Vous devez sélectionner un projet C++ plutôt qu’un projet Blueprint afin de générer le plug-in UX Tools, que vous configurerez plus loin dans la section 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.

Paramètres du projet initial

Le projet doit s’ouvrir automatiquement dans l’éditeur Unreal, ce qui signifie que vous êtes prêt à passer à la section suivante.The project should open up automatically in the Unreal editor, which means you're ready for the next section.

Activation des plug-ins nécessairesEnabling required plugins

Vous devez activer deux plug-ins pour pouvoir commencer à ajouter des objets à la scène.You'll need to enable two plugins before you can start adding objects to the scene.

  1. Ouvrez Edit > Plugins et sélectionnez Augmented Reality dans la liste des options prédéfinies.Open Edit > Plugins and select Augmented Reality from the built-in options list.
    • Faites défiler la liste jusqu’à HoloLens et cochez la case Enabled.Scroll down to HoloLens and check Enabled.

Activation des plug-ins HoloLens

  1. Sélectionnez Virtual Reality dans la liste des options prédéfinies.Select Virtual Reality from the built-in options list.
    • Faites défiler la liste jusqu’à Microsoft Windows Mixed Reality, cochez la case Enabled, puis redémarrez votre éditeur.Scroll down to Microsoft Windows Mixed Reality, check Enabled, and restart your editor.

Activation du plug-in Windows Mixed Reality

Notes

Les deux plug-ins sont nécessaires pour le développement HoloLens 2.Both plugins are required for HoloLens 2 development.

Une fois les plug-ins activés, votre niveau vide est prêt à avoir de la compagnie.With the plugins enabled, your empty level is ready for company.

Création d’un niveauCreating a level

La tâche suivante consiste à créer une configuration de joueur avec un point de départ, et un cube pour la référence et la mise à l’échelle.Your next task is to create a player setup with a starting point and a cube for reference and scale.

  1. Sélectionnez File > New Level, puis choisissez Empty Level.Select File > New Level and choose Empty Level. La scène par défaut dans la fenêtre d’affichage doit maintenant être vide.The default scene in the viewport should now be empty.

  2. Sélectionnez Basic sous l’onglet Modes, puis faites glisser PlayerStart dans la scène.Select Basic from the Modes tab and drag PlayerStart into the scene.

    • Définissez Location sur X = 0, Y = 0 et Z = 0 dans l’onglet Details pour définir l’utilisateur au centre de la scène lors du démarrage de l’application.Set Location to X = 0, Y = 0, and Z = 0 in the Details tab to set the user at the center of the scene when the app starts up.

Fenêtre d’affichage avec PlayerStart

  1. Faites glisser un cube à partir de l’onglet Basic dans la scène.Drag a Cube from the Basic tab into the scene.
    • Affectez à Location les valeurs X = 50, Y = 0 et Z = 0.Set Location to X = 50, Y = 0, and Z = 0. pour placer le cube à 50 cm du joueur au moment du démarrage.to position the cube 50 cm away from the player at start time.
    • Affectez à Scale les valeurs X = 0,2, Y = 0,2 et Z = 0,2 pour réduire le cube.Change Scale to X = 0.2, Y = 0.2, and Z = 0.2 to shrink the cube down.

Vous ne pouvez pas voir le cube, sauf si vous ajoutez une lumière à votre scène, ce qui constitue votre dernière tâche avant de tester la scène.You can't see the cube unless you add a light to your scene, which is your last task before testing the scene.

  1. Passez à l’onglet Lights dans le panneau Modes, puis faites glisser un Directional Light dans la scène.Switch to the Lights tab in the Modes panel and drag a Directional Light into the scene. Placez la lumière au-dessus de PlayerStart pour pouvoir la voir.Position the light above PlayerStart so you can see it.

Fenêtre d’affichage avec une lumière ajoutée

  1. Accédez à File > Save Current, nommez votre niveau Main, puis sélectionnez Save.Go to File > Save Current, name your level Main, and select Save.

Une fois la scène définie, appuyez sur Play dans la barre d’outils pour voir votre cube en action !With the scene set, press Play in the toolbar to see your cube in action! Lorsque vous avez fini d’admirer votre travail, appuyez sur Échap pour arrêter l’application.When you're finished admiring your work, press Esc to stop the application.

Un cube dans la fenêtre d’affichage

Maintenant que la scène est configurée, vous pouvez commencer à y ajouter l’échiquier et la pièce pour compléter l’environnement de l’application.Now that the scene is set up, you can start adding in the chess board and piece to round out the application environment.

Importation de ressourcesImporting assets

La scène a l’air un peu vide pour le moment, mais vous allez y remédier en important les ressources prêtes à l’emploi dans le projet.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. Téléchargez et décompressez le dossier des ressources GitHub avec 7-zip.Download and unzip the GitHub assets folder using 7-zip.

  2. Sélectionnez Add New > New Folder à partir du Content Browser et nommez ce dossier ChessAssets.Select Add New > New Folder from the Content Browser and name it ChessAssets.

    • Double-cliquez sur le nouveau dossier où vous allez importer les ressources 3D.Double-click the new folder where you'll import the 3D assets.

Afficher ou masquer le panneau des sources

  1. Sélectionnez Import à partir du Content Browser, sélectionnez tous les éléments inclus dans le dossier des ressources décompressé, puis cliquez sur Open.Select Import from the Content Browser, select all the items in the unzipped assets folder and click Open.

    • Les ressources incluent les maillages d’objets 3D pour l’échiquier et les pièces au format FBX ainsi que les cartes de texture au format TGA que vous allez utiliser pour les matériaux.Assets include 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. Lorsque la fenêtre FBX Import Options s’affiche, développez la section Material et affectez à Material Import Method la valeur Do Not Create Material.When the FBX Import Options window pops up, expand the Material section and change Material Import Method to Do Not Create Material.

    • Sélectionnez Import All.Select Import All.

Options d’importation FBX

C’est tout ce que vous devez faire pour les ressources.That's all you need to do for the assets. Votre prochaine série de tâches consiste à créer les composants de l’application avec des blueprints.Your next set of tasks is to create the building blocks of the application with blueprints.

Ajout de blueprintsAdding blueprints

  1. Sélectionnez Add New > New Folder dans le Content Browser et nommez ce dossier Blueprints.Select Add New > New Folder in the Content Browser and name it Blueprints.

Notes

Si vous ne connaissez pas les blueprints, il s’agit de ressources spéciales qui fournissent une interface basée sur des nœuds pour créer des types d’acteurs et d’événements au niveau des scripts.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. Double-cliquez dans le dossier Blueprints, puis cliquez avec le bouton droit et sélectionnez Blueprint Class.Double-click into the Blueprints folder, then right-click and select Blueprint Class.
    • Sélectionnez Actor et nommez le blueprint Board.Select Actor and name the blueprint Board.

Sélectionner une classe parente pour votre blueprint

Le nouveau blueprint Board apparaît maintenant dans le dossier Blueprints, comme l’illustre la capture d’écran suivante.The new Board blueprint now shows up in the Blueprints folder as seen in the following screenshot.

Le nouveau blueprint Board

Vous êtes fin prêt pour commencer à ajouter des matériaux aux objets créés.You're all set to start adding materials to the created objects.

Utilisation de matériauxWorking with materials

Les objets que vous avez créés sont gris par défaut, ce qui n’est pas très agréable à regarder.The objects you've created are default grey, which isn't much fun to look at. L’ajout de matériaux et de maillages à vos objets constitue la dernière série de tâches de ce tutoriel.Adding materials and meshes to your objects is the last set of tasks in this tutorial.

  1. Double-cliquez sur Board pour ouvrir l’éditeur de blueprint.Double-click Board to open the blueprint editor.

  2. Sélectionnez Add Component > Scene dans le panneau Components et nommez-le composant Root.Select Add Component > Scene from the Components panel and name it Root. Notez que Root apparaît en tant qu’enfant de DefaultSceneRoot dans la capture d’écran ci-dessous :Notice that Root shows up as a child of DefaultSceneRoot in the screenshot below:

Remplacement de root dans le blueprint

  1. Cliquez et faites glisser Root sur DefaultSceneRoot pour le remplacer et vous débarrasser de la sphère dans la fenêtre d’affichage.Click-and-drag Root onto DefaultSceneRoot to replace it and get rid of the sphere in the viewport.

Remplacement de la racine

  1. Sélectionnez Add Component > Static Mesh dans le panneau Components et nommez le composant SM_Board.Select Add Component > Static Mesh from the Components panel and name it SM_Board. Il apparaît en tant qu’objet enfant sous Root.It will appear as a child object under Root.

Ajout d’un maillage statique

  1. Sélectionnez SM_Board, faites défiler vers le bas jusqu’à la section Static Mesh du panneau Details, puis sélectionnez ChessBoard dans la liste déroulante.Select SM_Board, scroll down to the Static Mesh section of the Details panel, and select ChessBoard from the dropdown.

Le maillage de l’échiquier dans la fenêtre d’affichage

  1. Toujours dans le panneau Details, développez la section Materials, puis sélectionnez Create New Asset > Material dans la liste déroulante.Still in the Details panel, expand the Materials section and select Create New Asset > Material from the dropdown.
    • Nommez le matériau M_ChessBoard et enregistrez-le dans le dossier ChessAssets.Name the material M_ChessBoard and save it to the ChessAssets folder.

Créer un matériau

  1. Double-cliquez sur l’image du matériau M_ChessBoard pour ouvrir l’éditeur de matériau.Double-click the M_ChessBoard material imaged to open the Material Editor.

Ouvrir l’éditeur de matériau

  1. Dans l’éditeur de matériau, cliquez avec le bouton droit et recherchez Texture Sample.In the Material Editor, right-click and search for Texture Sample.
    • Développez la section Material Expression Texture Base dans le panneau Details et affectez à Texture la valeur ChessBoard_Albedo.Expand the Material Expression Texture Base section in the Details panel and set Texture to ChessBoard_Albedo.
    • Faites glisser le repère de sortie RGB vers le repère Base Color de M_ChessBoard.Drag the RGB output pin to the Base Color pin of M_ChessBoard.

Définir la couleur de base

  1. Répétez l’étape précédente 4 fois de plus pour créer quatre autres nœuds Texture Sample avec les paramètres suivants :Repeat the previous step 4 more times to create four more Texture Sample nodes with the following settings:
    • Affectez à Texture la valeur ChessBoard_AO et liez le repère RGB au repère Ambient Occlusion.Set Texture to ChessBoard_AO and link the RGB to the Ambient Occlusion pin.
    • Affectez à Texture la valeur ChessBoard_Metal et liez le repère RGB au repère Metallic.Set Texture to ChessBoard_Metal and link the RGB to the Metallic pin.
    • Affectez à Texture la valeur ChessBoard_Normal et liez le repère RGB au repère Normal.Set Texture to ChessBoard_Normal and link the RGB to the Normal pin.
    • Affectez à Texture la valeur ChessBoard_Rough et liez le repère RGB au repère Roughness.Set Texture to ChessBoard_Rough and link the RGB to the Roughness pin.
    • Cliquez sur Enregistrer.Click Save.

Raccorder les textures restantes

Vérifiez que la configuration de votre matériau ressemble à la capture d’écran ci-dessus.Make sure your material setup looks like the above screenshot before continuing.

Remplissage de la scènePopulating the scene

Si vous revenez au blueprint Board, vous voyez que le matériau que vous venez de créer a été appliqué.If you go back to the Board blueprint, you'll see that the material you just created has been applied. Il ne vous reste plus qu’à installer la scène !All that's left is setting up the scene! Pour commencer, modifiez les propriétés suivantes pour vous assurer que l’échiquier est de taille raisonnable et qu’il est correctement incliné lorsqu’il est placé dans la scène :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. Affectez à Scale la valeur (0,05, 0,05, 0,05) et à Z Rotation la valeur 90.Set Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.
    • Cliquez sur Compile dans la barre d’outils supérieure, puis sur Save pour revenir à la fenêtre Main.Click Compile in the top toolbar, then Save and return to the Main window.

Échiquier avec un matériau appliqué

  1. Cliquez avec le bouton droit sur Cube > Edit > Delete, puis faites glisser Board depuis le Content Browser dans la fenêtre d’affichage.Right-click Cube > Edit > Delete and drag Board from the Content Browser into the viewport.

    • Affectez à Location les valeurs X = 80, Y = 0 et Z = -20.Set Location to X = 80, Y = 0, and Z = -20.
  2. Sélectionnez le bouton Play pour visualiser votre nouvel échiquier dans le niveau.Select the Play button to view your new board in the level. Appuyez sur Échap pour revenir à l’éditeur.Press Esc to return to the editor.

À présent, vous allez suivre les mêmes étapes pour créer une pièce de jeu d’échecs que celles que vous avez effectuées pour l’échiquier :Now you'll follow the same steps to create a chess piece as you did with the board:

  1. Accédez au dossier Blueprints, cliquez avec le bouton droit et sélectionnez Blueprint Class, puis choisissez Actor.Go to the Blueprints folder, right-click, and select Blueprint Class and choose Actor. Nommez cet acteur WhiteKing.Name the actor WhiteKing.

  2. Double-cliquez sur WhiteKing pour l’ouvrir dans l’éditeur de blueprint, sélectionnez Add Component > Scene et nommez-le Root.Double-click WhiteKing to open it in the Blueprint Editor, select Add Component > Scene and name it Root.

    • Glissez-déposez Root dans DefaultSceneRoot pour le remplacer.Drag-and-drop Root onto DefaultSceneRoot to replace it.
  3. Cliquez sur Add Component > Static Mesh et nommez ce composant SM_King.Click Add Component > Static Mesh and name it SM_King.

    • Affectez à Static Mesh la valeur Chess_King et à Material la valeur d’un nouveau matériau appelé M_ChessWhite dans le panneau Details.Set Static Mesh to Chess_King and Material to a new Material called M_ChessWhite in the Details panel.
  4. Ouvrez M_ChessWhite dans l’éditeur de matériau et raccordez les nœuds Texture Sample suivants aux éléments suivants :Open M_ChessWhite in the Material editor and hook up the following Texture Sample nodes to the following:

    • Affectez à Texture la valeur ChessWhite_Albedo et liez le repère RGB au repère Base Color.Set Texture to ChessWhite_Albedo and link the RGB to the Base Color pin.
    • Affectez à Texture la valeur ChessWhite_AO et liez le repère RGB au repère Ambient Occlusion.Set Texture to ChessWhite_AO and link the RGB to the Ambient Occlusion pin.
    • Affectez à Texture la valeur ChessWhite_Metal et liez le repère RGB au repère Metallic.Set Texture to ChessWhite_Metal and link the RGB to the Metallic pin.
    • Affectez à Texture la valeur ChessWhite_Normal et liez le repère RGB au repère Normal.Set Texture to ChessWhite_Normal and link the RGB to the Normal pin.
    • Affectez à Texture la valeur ChessWhite_Rough et liez le repère RGB au repère Roughness.Set Texture to ChessWhite_Rough and link the RGB to the Roughness pin.
    • Cliquez sur Enregistrer.Click Save.

Votre matériau M_ChessKing doit ressembler à l’image suivante avant de continuer.Your M_ChessKing material should look like the following image before continuing.

Créer le matériau pour le roi

Vous y êtes presque, il vous suffit d’ajouter la nouvelle pièce à la scène :You're almost there, just need to add the new chess piece into the scene:

  1. Ouvrez le blueprint WhiteKing et affectez à Scale la valeur (0,05, 0,05, 0,05) et à Z Rotation la valeur 90.Open the WhiteKing blueprint and change the Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.

    • Compilez et enregistrez votre blueprint, puis revenez à la fenêtre principale.Compile and save your blueprint, then head back to the main window.
  2. Faites glisser WhiteKing dans la fenêtre d’affichage, basculez vers le panneau World Outliner, faites glisser WhiteKing sur Board pour en faire un objet enfant.Drag WhiteKing into the viewport, switch to the World Outliner panel drag WhiteKing onto Board to make it a child object.

World Outliner

  1. Dans le panneau Details sous Transform, affectez au paramètre Location de WhiteKing les valeurs X = -26, Y = 4 et Z = 0.In the Details panel under Transform, set WhiteKing's Location to X = -26, Y = 4, and Z = 0.

C’est terminé !That's a wrap! Sélectionnez Play pour voir votre niveau rempli en action, puis appuyez sur Échap quand vous êtes prêt à quitter.Select Play to see your populated level in action, and press Esc when you're ready to exit. Vous avez abordé de nombreux points liés à la création d’un projet simple, mais vous êtes maintenant prêt à passer à la partie suivante de la série : la configuration pour la réalité mixte.You covered a lot of ground just creating a simple project, but now you're ready to move on to the next part of the series: setting up for mixed reality.

Section suivante : 3. Configurer votre projet pour la réalité mixteNext Section: 3. Set up your project for mixed reality