[UE4]UnrealEngineで始めるMagicLeap開発

更新した内容を以下サイトにアップロードいたしました。(2020/05/14) ↓
[Iwaxlab](http://localhost:8000/articles?id=8)

今回はUnrealEngine4でMagicLeapの自作アプリ開発手順を紹介したいと思います
MagicLeapの開発を進めるにはいくつか下準備が必要で、まだその下準備が整っていない方はこちらの記事を参照してください
[MagicLeap入門以前](https://iwaxlab.com/articles?id=6)

##開発環境の準備
ではまずUE4で開発するにあたって必要な環境、パッケージを確認しましょう。
・LuminSDK
・Visual Studio 2017 Extension(for C++ debugging on Windows)
まだインストールされていない場合はMagicLeapのPackageManagerからインストールしてください。
また、Visual Studio 2017 Extensionを反映する為にLaunch Installerをクリックします。

![000.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/72f770ac-ec07-5614-a969-43b5b0a2a9ce.jpeg)

UE4で開発する場合は、Unity環境と少し違い、専用のエディタそのものをインストールする必要があります。
公式が推奨している方法でインストールしてみましょう。 30GB近く容量を持っていかれるので、空き容量にご注意ください
[ここ](https://www.epicgames.com/store/en-US/product/magic-leap/home)からEpicGamesにアクセスして入手しましょう。
すると、EpicLauncherのLibraryに"Magic Leap UE4 Editor"が追加されるのでインストールします。
結構時間がかかるので気長に待ちましょう...。
いい笑顔や

![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/ce37cb2f-a331-25c0-254b-3f541262159d.jpeg)

##プロジェクトの準備
それではインストールしたMagicLeapUE4Editorを立ち上げて、プロジェクトを作成してみましょう。
NewProject->Blueprint->Blankから好きな名前でプロジェクトを作成してください。

![002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/b312a44f-7a76-6b0b-8c8e-3d140e1f0d2f.jpeg)

プロジェクトを作成したら、まずディレクトリと作業レベルを用意しちゃいましょう。
以下の画像を参考にディレクトリを作成してください。
レベルは "File -> NewLevel -> EmptyLevel"で空の状態から作成し、"base_level"として"Maps"内に保存しましょう。

![003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/20ccf6a9-70ab-bdc5-88c8-9d07f4884480.jpeg)

次に、"Edit -> ProjectSettings"でプロジェクトのセッティング画面を出し、"Project -> Maps and Modes -> Default Maps"の"Editor Startup Map"と"Game Default Map"を、先ほど作ったレベルにします。

![004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/dfda9ce4-8e2c-615a-49fa-324e8891720c.jpeg)

次に、同じプロジェクトセッティング画面から、"Platforms -> Magic Leap"の"Magic Leap App Tile"の"Configure Now"を押して、MagicLeapのプラットフォームファイルを生成します。UEプロジェクトのBuildフォルダ内に"Lumin"ディレクトリが生成されているはずです。 (画像は公式から引用してます)
プロジェクトセッティングに戻って、"Distribution Signing"にこのアプリを認証させる ".cert"と".privatekey"があるディレクトリパスを指定します。
僕は先ほど作ったLuminディレクトリ内に一緒に入れました。

![005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/7b1273c4-2f27-085b-a168-a01b335c4eca.jpeg)

![006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/86a509e7-c3e8-5ff0-a560-fcb6a3a6a06c.jpeg)

最後に、同じプロジェクトセッティングの"Platforms -> Magic Leap SDK"の項目をクリックし、 "SDKConfig -> Location of Magic Leap SDK"に、LuminSDKのパスを指定します。
そしてエディタを再起動するように促されると思うので再起動してください。

![007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/62e0199c-29e4-6d99-1ac1-428311627f4b.jpeg)

これで環境設定は終わりです。次から実際にプロジェクトの中身を作っていきましょう！

##実践 MagicLeap開発
まだ空っぽのレベルである"base_level"を開いて"DirectionalLight"と"SkyLight"を追加しましょう。
また、SkyLightの"Details -> Light"の"SourceType"を"SLS Specified Cubemap"にし、"CubeMap"を"DaylightAmbientCubemap"にします。

![008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/b8f5bfa3-1739-46b6-56f2-953572ef3c16.jpeg)

"DaylightAmbientCubemap"はUE4のEngineContentなので、ViewOptionから選択できるように"Show Engine Content"にチェックを入れると直接選択できるようになります。

![009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/2924492a-f2a9-536c-51a6-1c3547133a20.jpeg)

次に、新規ブループリントを"Pawn"として"Blueprints"ディレクトリに、"XR_Pawn"として保存します。

![010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/51ef75a6-6ad8-5d21-693a-68142efa0651.jpeg)

XR_Pawnのブループリントエディタを開いて、コンポーネントに"Scene"と"Camera"、そして"Motion Controller"を追加します。
Motion Controllerコンポーネントは、MagicLeapのコントローラを使用する場合に追加するコンポーネントです。今回のサンプルで使用するわけではありませんが、存在を認知しておくためにも追加しておきましょう。
Sceneコンポーネントを"XR_Transform"とリネームして、その子要素として"Camera"と"Motion Controller"を配置しましょう。

![011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/960b1511-5655-3047-5b37-ab7ff0ae8ffd.jpeg)

ではXR_PawnをViewPortにドラッグアンドドロップしましょう。そして以下のように項目を設定します。
"Location" = "x:0, y:0, z:0"、"Auto Process Player" = "Player 0"。

![012.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/d691c0cc-a42b-5a0e-c6ba-43ce0066cf73.jpeg)

![013.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/66c06bf4-3019-efbc-e098-3a55230aab50.jpeg)

最後に、なんでもいいのでモデルをViewportに配置します。せっかくなのでマテリアルも作っておきましょう。
Materialsに新規追加で"M_cube"としてマテリアルを作成し、お好きな色でBaseColorを設定しましょう。

![014.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/014dd849-fae2-8314-65bb-11743ca47a9f.jpeg)

![015.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/3586a0ee-f00e-7d87-ed62-b94ab36b102f.jpeg)

"Modes -> Basic"から"Cube"を選択し、Viewportに追加、マテリアルに"M_cube"を割り当てましょう。
現在、WorldOutLinerには
・Cube
・DirectionalLight
・SkyLight
・XR_Pawn
の４つが在ります。ここまで大丈夫そうでしょうか！？ではでは、次の章で実際に動かしてみたいと思います。

![016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/df476e38-564f-a9fe-76d0-a40576c3c4e4.jpeg)

##MLRemote経由でコンテンツの確認
"LuminSDK"をインストールした際に一緒に追加されている"MLRemote"を立ち上げます
MagicLeap本体を持っている場合は"Start Device"、持っていない場合は"Start Simulator"を押しましょう。
今回は持っていないものとして"Start Simulator"を選択します。

![017.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/9458297a-2885-ae23-bfe3-5d2bd59e6cf4.jpeg)

すると次々にサーバーが立ち上がって"Interaction"という別ウィンドウが立ち上がるはずです。
次に、UnrealEditor側で、"EDit->ProjectSettings"の"Plugins -> MagicLeap Plugin"の"Enable Zero Interaction"にチェックを入れます。
その一つ下の項目である"Use ML Audio for Zero Iteration"にチェック入れると、ホスト側のPCからではなく、デバイス側からサウンドが出力されるようになります。
今回は使いませんが、興味のある方は適当にBGMを配置しておくと良きです。

![018.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/77bbd142-43ee-2640-b37a-3a1931f5df75.jpeg)

エディタの再起動が再び必要になるので、再起動します。
そして"Play -> VR Preview"を押して、MLRemote側で反映されていれば大成功です！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">[UE4]Unrealで始めるMagicLeap開発<a href="https://t.co/RDXOfgJTOR">https://t.co/RDXOfgJTOR</a> <a href="https://t.co/QhMWzcU0eU">pic.twitter.com/QhMWzcU0eU</a></p>&mdash; iwax (@iwax51101141) <a href="https://twitter.com/iwax51101141/status/1178266811285958657?ref_src=twsrc%5Etfw">September 29, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


##お疲れさまでした
以上がMagicLeapをUE4で開発する基本です。
Unityと違ってエディタそのものを落としてこなかったりと少々セットアップがヘビィ(容量的な意味で)ですが、やはりC++でプログラミングできる分、デバイスとの連携や世に溢れるThirdPartyライブラリと連携取れそうな分、夢の広がり方はUnityよりいいんじゃないかなと思っています(なんでもそうですが)。 深く考えなくていい分、使い勝手では圧倒的にUnityの方がいい気はしてますが。
また、何か間違っている記述とかがありましたらいつでもマサカリ飛ばしてください。
ではまた次の記事で！