2.プロジェクトと最初のアプリケーションの初期化2. Initializing your project and first application

概要Overview

この最初のチュートリアルでは、HoloLens 2 用の新しい Unreal アプリケーションの使用を開始します。In this first tutorial, you'll get started with a new Unreal application for HoloLens 2. これには、HoloLens プラグインの追加、レベルの作成と照明、およびゲーム ボードとチェスの駒の設定が含まれます。This is going to include adding the HoloLens plugin, creating and lighting a level, and populating it with a game board and chess piece. 3D チェスの駒とオブジェクト マテリアルには、事前に作成された資産を使用するため、何もないところからモデリングする必要はありません。You'll be using pre-made assets for the 3D chess piece and object materials, so don't worry about modeling anything from scratch. このチュートリアルを完了するまでに、複合現実に対応できる空のキャンバスが完成します。By the end of this tutorial you'll have a blank canvas that's ready for mixed reality.

続行する前に、「はじめに」ページにあるすべての前提条件を確認してください。Before continuing, make sure you have all the prerequisites from the Getting Started page.

目標Objectives

  • HoloLens 開発用の Unreal プロジェクトの構成Configuring an Unreal project for HoloLens development
  • 資産のインポートとシーンのセットアップImporting assets and setting up a scene
  • ブループリントを使用したアクターとスクリプトレベルのイベントの作成Creating Actors and script-level events with blueprints

新しい Unreal プロジェクトの作成Creating a new Unreal project

最初に必要なのは、作業するプロジェクトです。The first thing you need is a project to work with. HoloLens 用の Unreal アプリを初めて作成する場合は、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. Unreal Engine を起動します。Launch Unreal Engine

  2. [New Project Categories](新規プロジェクトのカテゴリ) で、 [ゲーム] を選択して [次へ] をクリックします。Select Games in New Project Categories and click Next.

ゲーム プロジェクト テンプレートの選択

  1. [Blank](空のプロジェクト) テンプレートを選択して [次へ] をクリックします。Select the Blank Template and click Next.

[Blank](空のプロジェクト) テンプレートを選択する

  1. [C++][Scalable 3D or 2D](スケーラブル 3D または 2D)、[Mobile/Tablet](モバイル/タブレット)[No Starter Content](スターター コンテンツを有効にしない)[Project Settings](プロジェクト設定) として設定し、保存場所を選択して、 [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.

注意

UX Tools プラグインをビルドするには、ブループリント プロジェクトではなく、C++ プロジェクトを選択する必要があります。UX Tools プラグインは、この後のセクション 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.

最初のプロジェクト設定

Unreal エディターでプロジェクトが自動的に開きます。つまり、次のセクションに進む準備はできています。The project should open up automatically in the Unreal editor, which means you're ready for the next section.

必要なプラグインの有効化Enabling required plugins

オブジェクトをシーンに追加する前に、2 つのプラグインを有効にする必要があります。Before you start adding objects to the scene you'll need to enable two plugins.

  1. [編集] > [プラグイン] を開き、組み込みオプション リストから [拡張現実] を選択します。Open Edit > Plugins and select Augmented Reality from the built-in options list.
    • HoloLens まで下にスクロールし、 [有効] をオンにします。Scroll down to HoloLens and check Enabled.

HoloLens プラグインの有効化

  1. 組み込みオプション リストから [仮想現実] を選択します。Select Virtual Reality from the built-in options list.
    • [Microsoft Windows Mixed Reality] まで下にスクロールし、 [有効] をオンにして、エディターを再起動します。Scroll down to Microsoft Windows Mixed Reality, check Enabled, and restart your editor.

Windows Mixed Reality プラグインを有効にする

注意

HoloLens 2 の開発には、両方のプラグインが必要です。Both plugins are required for HoloLens 2 development.

これで空のレベルを使用できるようになりました。With that done your empty level is ready for company.

レベルの作成Creating a level

次のタスクは、参照とスケール用の開始点とキューブを使用して単純なプレーヤーのセットアップを作成することです。Your next task is to create a simple player setup with a starting point and a cube for reference and scale.

  1. [ファイル] > [新しいレベル] を選択し、 [空のレベル] を選択します。Select File > New Level and choose Empty Level. この時点では、ビューポートの既定のシーンは空です。The default scene in the viewport should now be empty.

  2. [モード] タブから [基本] を選択し、 [PlayerStart] をシーンにドラッグします。Select Basic from the Modes tab and drag PlayerStart into the scene.

    • [詳細] タブで、 [場所]X = 0Y = 0、および Z = 0 に設定します。これにより、アプリの起動時にユーザーがシーンの中心に設定されます。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.

PlayerStart を表示したビューポート

  1. [キューブ][基本] タブからシーンにドラッグします。Drag a Cube from the Basic tab into the scene.
    • [位置]X = 50Y = 0、および Z = 0 に設定します。Set Location to X = 50, Y = 0, and Z = 0. これにより、キューブは開始時にプレーヤーから 50 cm 離れた位置に配置されます。This positions the cube 50 cm away from the player at start time.
    • キューブを縮小するには、 [スケール]X = 0.2Y = 0.2、および Z = 0.2 に変更します。Change Scale to X = 0.2, Y = 0.2, and Z = 0.2 to shrink the cube down.

シーンにライトを追加しない限り、キューブを表示することはできません。これは、シーンをテストする前の最後のタスクです。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. [モード] パネルの [Lights](ライト) タブに切り替えて、Directional Light をシーンにドラッグします。Switch to the Lights tab in the Modes panel and drag a Directional Light into the scene. ライトが見えるように、PlayerStart の上にライトを配置します。Position the light above PlayerStart so you can see it.

ライトが追加されたビューポート

  1. [ファイル] > [現在を保存] に移動し、レベルに Main という名前を付けて、 [保存] をクリックします。Go to File > Save Current, name your level Main, and click Save.

シーンを設定したら、ツールバーの [再生] を押して、キューブの動作を確認します。With the scene set, press Play in the toolbar to see your cube in action! 作業内容を鑑賞したら、Esc を押してアプリケーションを停止します。When you're finished admiring your work, press Esc to stop the application.

ビューポート内のキューブ

シーンがセットアップされたので、チェス盤とピースを追加して、アプリケーション環境を完成させます。Now that the scene is setup, you can start adding in the chess board and piece to round out the application environment.

資産のインポートImporting assets

現在、シーンは空であるように見えますが、既製の資産をプロジェクトにインポートして修正します。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. GitHub 資産フォルダーをダウンロードして解凍します。Download and unzip the GitHub assets folder.

  2. [コンテンツ ブラウザー] から [新規追加] > [新しいフォルダー] をクリックし、ChessAssets という名前を付けます。Click Add New > New Folder from the Content Browser and name it ChessAssets.

    • 新しいフォルダーをダブルクリックします。ここに 3D 資産をインポートします。Double-click the new folder - this is where you'll import the 3D assets.

ソース パネルの表示と非表示

  1. [コンテンツ ブラウザー] から [インポート] をクリックし、解凍した資産フォルダー内のすべての項目を選択して、 [開く] をクリックします。Click Import from the Content Browser, select all the items in the unzipped assets folder and click Open.

    • このフォルダーには、チェス盤の 3D オブジェクト メッシュと FBX 形式のピース、およびマテリアルに使用する TGA 形式のテクスチャ マップが含まれています。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. [FBX インポート オプション] ウィンドウが表示されたら、 [マテリアル] セクションを展開し、 [マテリアルのインポート方法][マテリアルを作成しない] に変更します。When the FBX Import Options window pops up, expand the Material section and change Material Import Method to Do Not Create Material.

    • [Import All](すべてインポート) をクリックします。Click Import All.

FBX インポート オプション

これで、資産に対して行う必要な操作は終わりました。That's all you need to do for the assets. 次の一連のタスクでは、ブループリントを使用してアプリケーションの構成要素を作成します。Your next set of tasks is to create the building blocks of the application with blueprints.

ブループリントの追加Adding blueprints

  1. [コンテンツ ブラウザー] で、 [新規追加] > [新しいフォルダー] をクリックし、Content Browser という名前を付けます。Click Add New > New Folder in the Content Browser and name it Content Browser.

注意

ブループリントを初めて使用する場合、これらのブループリントは、新しい種類のアクターとスクリプト レベルのイベントを作成するためのノードベースのインターフェースを提供する特別な資産になります。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-click into the Blueprints folder, then right-click and select Blueprint Class.
    • [Actor](アクター) を選択して、ブループリントに Board という名前を付けます。Select Actor and name the blueprint Board.

ブループリントの親クラスを選択する

次のスクリーンショットに示すように、新しい [ボード] ブループリントが [ブループリント] フォルダーに表示されます。The new Board blueprint now shows up in the Blueprints folder as seen in the following screenshot.

新しい Board ブループリント

作成したオブジェクトにマテリアルを追加するためのすべての設定が完了しました。You're all set to start adding materials to the created objects.

マテリアルの操作Working with materials

作成したオブジェクトは既定で灰色になりますが、これはあまり見栄えのよいものではありません。The objects you've created are default grey, which isn't much fun to look at. このチュートリアルの最後のタスク セットは、オブジェクトにマテリアルとメッシュを追加することです。Adding materials and meshes to your objects is the last set of tasks in this tutorial.

  1. [ボード] をダブルクリックして、ブループリント エディターを開きます。Double-click Board to open the blueprint editor.

  2. [コンポーネント] パネルから [コンポーネントの追加] > [シーン] をクリックし、Root という名前を付けます。Click Add Component > Scene from the Components panel and name it Root. 以下のスクリーンショットでは、RootDefaultSceneRoot の子として表示されていることに注意してください。Notice that Root shows up as a child of DefaultSceneRoot in the screenshot below:

ルートを置き換える

  1. ルートをクリックアンドドラッグして DefaultSceneRoot に置換し、ビューポート内の球体を削除します。Click-and-drag Root onto DefaultSceneRoot to replace it and get rid of the sphere in the viewport.

ルートを置き換える

  1. [コンポーネント] パネルから [コンポーネントの追加] > [静的メッシュ] をクリックし、SM_Board という名前を付けます。Click Add Component > Static Mesh from the Components panel and name it SM_Board. これは、ルートの下に子オブジェクトとして表示されます。It will appear as a child object under Root.

スタティック メッシュの追加

  1. [SM_Board] をクリックし、 [詳細] パネルの [静的メッシュ] セクションまで下にスクロールして、ドロップダウンから [ChessBoard] を選択します。Click SM_Board, scroll down to the Static Mesh section of the Details panel, and select ChessBoard from the dropdown.

ビューポート内のボード メッシュ

  1. 引き続き [詳細] パネルで、 [マテリアル] セクションを展開し、ドロップダウンから [新しい資産の作成] > [マテリアル] をクリックします。Still in the Details panel, expand the Materials section and click Create New Asset > Material from the dropdown.
    • この資産に M_ChessBoard という名前を付けて、ChessAssets フォルダーに保存します。Name the material M_ChessBoard and save it to the ChessAssets folder.

新しいマテリアルを作成する

  1. マテリアル エディターを開くには、M_ChessBoard マテリアルのイメージをダブルクリックします。Double-click the M_ChessBoard material imaged to open the Material Editor.

マテリアル エディターを開く

  1. マテリアル エディターで右クリックして、 [Texture Sample](テクスチャ サンプル) を検索します。In the Material Editor, right-click and search for Texture Sample.
    • [詳細] パネルの [Material Expression Texture Base](マテリアル式テクスチャ ベース) セクションを展開し、 [テクスチャ]ChessBoard_Albedo に設定します。Expand the Material Expression Texture Base section in the Details panel and set Texture to ChessBoard_Albedo.
    • [RGB] 出力ピンを M_ChessBoard の [Base Color](基本色) ピンにドラッグします。Drag the RGB output pin to the Base Color pin of M_ChessBoard.

基本色を設定する

  1. 前の手順をさらに 4 回繰り返して、次の設定でさらに 4 つの [テクスチャ サンプル] ノードを作成します。Repeat the previous step four more times to create four more Texture Sample nodes with the following settings:
    • [テクスチャ]ChessBoard_AO に設定し、RGB[アンビエント オクルージョン] ピンにリンクします。Set Texture to ChessBoard_AO and link the RGB to the Ambient Occlusion pin.
    • [テクスチャ]ChessBoard_Metal に設定し、RGB[メタリック] ピンにリンクします。Set Texture to ChessBoard_Metal and link the RGB to the Metallic pin.
    • [テクスチャ]ChessBoard_Normal に設定し、RGB[ノーマル] ピンにリンクします。Set Texture to ChessBoard_Normal and link the RGB to the Normal pin.
    • [テクスチャ]ChessBoard_Rough に設定し、RGB[ラフネス] ピンにリンクします。Set Texture to ChessBoard_Rough and link the RGB to the Roughness pin.
    • [Save] (保存) をクリックします。Click Save.

残りのテクスチャを接続する

続行する前に、マテリアルの設定が上のスクリーンショットのようになっていることを確認してください。Make sure the your material setup looks like the above screenshot before continuing.

シーンへのデータの読み込みPopulating the scene

[ボード] ブループリントに戻ると、作成したばかりのマテリアルが適用されていることがわかります。If you go back to the Board blueprint, you'll see that the material you just created has been applied. あとは、シーンをセットアップするだけです。All that's left is setting up the scene! 最初に、以下のプロパティを変更して、ボードが適切なサイズであり、シーンに配置されたときに角度が適切であることを確認します。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. [スケール](0.05、0.05、0.05) に設定し、 [Z 回転]90 に設定します。Set Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.
    • 上部のツールバーの [コンパイル] をクリックし、 [保存] をクリックして、メイン ウィンドウに戻ります。Click Compile in the top toolbar, then Save and return to the Main window.

マテリアルが適用されたチェス盤

  1. [キューブ] > [編集] > [削除] を右クリックして、 [ボード][コンテンツ ブラウザー] からビューポートにドラッグします。Right-click Cube > Edit > Delete and drag Board from the Content Browser into the viewport.

    • [位置]X = 80Y = 0、および Z = -20 に設定します。Set Location to X = 80, Y = 0, and Z = -20.
  2. [Play](プレイ) ボタンをクリックして、新しいチェス盤をレベルに表示します。Click the Play button to view your new board in the level. Esc キーを押してエディターに戻ります。Press Esc to return to the editor.

次に、ボードで行ったのと同じ手順に従って、チェスの駒を作成します。Now you'll follow the same steps to create a chess piece as you did with the board:

  1. [ブループリント] フォルダーに移動し、右クリックして [ブループリント クラス] を選択し、 [アクター] を選択します。Go to the Blueprints folder, right-click and select Blueprint Class and choose Actor. このアクターに WhiteKing という名前を付けます。Name the actor WhiteKing.

  2. WhiteKing をダブルクリックしてブループリント エディターで開き、 [コンポーネントの追加] > [シーン] をクリックして、Root という名前を付けます。Double click WhiteKing to open it in the Blueprint Editor, click Add Component > Scene and name it Root.

    • RootDefaultSceneRoot にドラッグアンドドロップして置換します。Drag-and-drop Root onto DefaultSceneRoot to replace it.
  3. [コンポーネントの追加]> [スタティック メッシュ] をクリックし、SM_King という名前を付けます。Click Add Component > Static Mesh and name it SM_King.

    • [詳細] パネルで、 [Static Mesh](スタティック メッシュ)Chess_King に設定し、 [Material](マテリアル) を、M_ChessWhiteという名前の新しいマテリアルに設定します。Set Static Mesh to Chess_King and Material to a new Material called M_ChessWhite in the Details panel.
  4. マテリアル エディターで、M_ChessWhite を開き、次の [テクスチャ サンプル] ノードを次のものに接続します。Open M_ChessWhite in the Material editor and hook up the following Texture Sample nodes to the following:

    • [テクスチャ]ChessWhite_AO に設定し、RGB[アンビエント オクルージョン] ピンにリンクします。Set Texture to ChessWhite_AO and link the RGB to the Ambient Occlusion pin.
    • [テクスチャ]ChessWhite_Metal に設定し、RGB[メタリック] ピンにリンクします。Set Texture to ChessWhite_Metal and link the RGB to the Metallic pin.
    • [テクスチャ]ChessWhite_Normal に設定し、RGB[ノーマル] ピンにリンクします。Set Texture to ChessWhite_Normal and link the RGB to the Normal pin.
    • [テクスチャ]ChessWhite_Rough に設定し、RGB[ラフネス] ピンにリンクします。Set Texture to ChessWhite_Rough and link the RGB to the Roughness pin.
    • [Save] (保存) をクリックします。Click Save.

続行する前に、M_ChessKing マテリアルは次の図のようになります。Your M_ChessKing material should look like the following image before continuing.

チェスのキングのマテリアルを作成する

もう少しで完了です。あとは新しいチェスの駒をシーンに追加するだけです。You're almost there, just need to add the new chess piece into the scene:

  1. WhiteKing ブループリントを開いて、 [Scale](スケール)(0.05, 0.05, 0.05) に、 [Z 回転]90 に変更します。Open the WhiteKing blueprint and change the Scale to (0.05, 0.05, 0.05) and Z Rotation to 90.

    • ブループリントをコンパイルして保存した後、メイン ウィンドウに戻ります。Compile and save your blueprint, then head back to the main window.
  2. WhiteKing をビューポートにドラッグし、 [ワールド アウトライナー] パネルに切り替え、WhiteKing[ボード] にドラッグして、子オブジェクトにします。Drag WhiteKing into the viewport, switch to the World Outliner panel drag WhiteKing onto Board to make it a child object.

[World Outliner](ワールド アウトライナー)

  1. [詳細] パネルの [Transform](トランスフォーム) で、WhiteKing[Location](位置)X = -26Y = 4Z = 0 に設定します。In the Details panel under Transform, set WhiteKing's Location to X = -26, Y = 4, and Z = 0.

これでおしまいです!That's a wrap! [再生] をクリックして、データ設定されているレベルの動作を確認し、終了する準備ができたら Esc を押します。Click Play to see your populated level in action, and press Esc when you're ready to exit. このチュートリアルでは、単純なプロジェクトを作成するための多くの基本について説明しましたが、プロジェクトはシリーズの次の部分である「複合現実の設定」に進む準備ができています。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.

次のセクション: 3.Mixed Reality 用のプロジェクト設定Next Section: 3. Set up your project for mixed reality