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

最初のチュートリアルでは、新しい Unreal プロジェクトから始めて、HoloLens プラグインを有効にし、レベルを作成して照明し、チェスの駒を追加します。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. 3D のすべてのオブジェクトとマテリアルには、事前に作成された資産を使用するため、自分でモデリングする必要はありません。You'll be using our pre-made assets for all 3D objects and materials, so don't worry about modeling anything yourself. このチュートリアルを完了するまでに、Mixed Reality に対応できる空のキャンバスが完成します。By the end of this tutorial, you'll have a blank canvas that's ready for mixed reality.

重要

はじめに」ページにあるすべての前提条件を確認してください。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. Unreal で初めて開発する場合は、Epic Launcher からサポート ファイルをダウンロードする必要があります。If you're a first-time Unreal developer, 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 つのプラグインを有効にする必要があります。You'll need to enable two plugins before you can start adding objects to the scene.

  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 the plugins enabled, your empty level is ready for company.

レベルの作成Creating a level

次のタスクは、参照とスケール用の開始点とキューブを使用してプレーヤーのセットアップを作成することです。Your next task is to create a 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 = 0Z = 0 に設定して、アプリの起動時にユーザーをシーンの中心に設定します。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.

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 離れた位置に配置されます。to position 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 can't 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 select 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 set up, 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. 7-zip を使用して、GitHub 資産フォルダーをダウンロードして解凍します。Download and unzip the GitHub assets folder using 7-zip.

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

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

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

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

    • 資産には、チェス盤の 3D オブジェクト メッシュと FBX 形式の駒、およびマテリアルに使用する TGA 形式のテクスチャ マップが含まれています。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. [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](すべてインポート) を選択します。Select 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](コンテンツ ブラウザー)[新規追加] > [新しいフォルダー] の順に選択し、「ブループリント」という名前を付けます。Select Add New > New Folder in the Content Browser and name it Blueprints.

注意

ブループリントを初めて使用する場合、これらのブループリントは、新しい種類のアクターとスクリプト レベルのイベントを作成するためのノードベースのインターフェースを提供する特別な資産になります。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 という名前を付けます。Select 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. [コンポーネント] パネルから [コンポーネントの追加] > [Static Mesh](静的メッシュ) を選択し、SM_Board という名前を付けます。Select 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 を選択し、 [詳細] パネルの [Static Mesh](静的メッシュ) セクションまで下にスクロールして、ドロップダウンから ChessBoard を選択します。Select SM_Board, scroll down to the Static Mesh section of the Details panel, and select ChessBoard from the dropdown.

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

  1. 引き続き [詳細] パネルで、 [Materials](マテリアル) セクションを展開し、ドロップダウンから [Create New Asset](新しい資産の作成) > [Material](マテリアル) を選択します。Still in the Details panel, expand the Materials section and select 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 4 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 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](プレイ) ボタンを選択して、新しいチェス盤をレベルに表示します。Select 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. [ブループリント] フォルダーに移動し、右クリックして [Blueprint Class](ブループリント クラス) を選択し、 [Actor](アクター) を選択します。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, select 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_Albedo に設定し、 [RGB][Base Color](基本色) ピンにリンクします。Set Texture to ChessWhite_Albedo and link the RGB to the Base Color pin.
    • [テクスチャ]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! [Play](再生) を選択して、データ設定されているレベルの動作を確認し、終了する準備ができたら Esc キーを押します。Select Play to see your populated level in action, and press Esc when you're ready to exit. 簡単なプロジェクトを作成するだけのために多くの基本について学習しましたが、シリーズの次の部分である Mixed Reality の設定に進む準備ができました。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.

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