[Unity+Vuforia] ARで動画ファイルを再生してみた [Mac] 

# はじめに
最近ようやく前から興味のあったAR技術を触り始めました。

今回は**Unity+Vuforia**でサクッとAR（拡張現実）で動画ファイルを再生する方法を紹介します。

参考にしたのはこちらの動画。
[Teaching UNITY to my GIRLFRIEND!](https://www.youtube.com/watch?v=57G8K8ToF_A)

ちなみにUnityは2D・3Dゲームを作るのに使われるゲームエンジンで、VuforiaはUnityでよく使われるARライブラリらしいです。（詳しくは知らない。。）

**(2018/10/18 11:05 追記)
VuforiaはUnity 2017.2 からUnityで公式サポートされており、Vuforia SDKはUnityに統合されたようです。**
[Unityでお手軽AR開発！vuforiaを使ってみる](https://qiita.com/chano2/items/8ddd263f0c2ddddaca85)

# 前提条件
- Unityの基本操作
- VRとARの違いが分かる程度の知識

# やりたい事
- ARマーカー（画像ファイル）がカメラに認識されたら動画ファイルが再生されるようにする

# 環境
- Mac 10.13.6 (High Sierra)
- エディタ：Visual Studio for Mac (Version 7.5.1)
- 開発言語：C#
- Unity (Version 2018.2.9fi Personal)
 
# 「Unity」をインストール (*インストールされていない場合)
「Unityを取得」から無料版をダウンロードしてきます。
https://unity3d.com/jp

# 【Unity】 AR Cameraを設置する
1. 「Main Camera」は使わないので削除しておきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/a5651e99-658f-fd21-02c4-ae261fd33b8b.png" width="700">

1. 「メニューバー > GameObject > Vuforia > AR Camera」を選択し、「AR Camera」をSceneにインポートします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/0561c4b2-4ba4-0179-380c-5ea436345b40.png" width=700>

1. 「AR Camera」が設置されました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/f7503930-fa83-3a9e-6944-313efd452a4f.png" width=700>

1. 次に 「メニューバー > File > Build Settings」を選択します。
<img width="584" alt="スクリーンショット 2018-10-18 1.40.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/12c34531-798e-c344-4dc3-d863d9440ccf.png">

1. 「Player Settings」をクリックします。
<img width="628" alt="スクリーンショット 2018-10-18 1.40.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/f2185f90-0b72-f87f-4f9a-a266cb6ed4db.png">

1. XR Settingsの「Vuforia Augmented Reality Supported」にチェックを入れます。
<img width="366" alt="スクリーンショット 2018-10-18 1.41.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/b75ec9b2-bdc0-74ce-e8c0-10349282d083.png">


# 【Vuforia】 ARマーカーを用意する
1. 以下のURLの「Register」から登録します。
https://developer.vuforia.com/

1. 「Develop > License Manager」 で「Get Development Key」をクリック。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/63aa37f1-af3e-886a-cd87-47d68128de89.png" width=700>
1. 「App Name」を入力し、規約同意のチェックボックスにチェックを入れて「Confirm」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/96c55ee5-6e86-695b-5ac8-9723fd820c42.png" width=700>
1. 新しい「License Key」が作成されました。クリックして進んだページで「License Key」の内容が確認できるのでコピーしておきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/c489801f-c50d-8412-58c3-57ccf8c0b574.png" width=700>
1. 「Target Manager」タブに切り替えて「Add Database」を選択します。
 <img src="https://qiita-image-store.s3.amazonaws.com/0/287161/8fc01f8f-1582-2640-f235-092fff21aadb.png" width=700>
1. 「Name」を適当に入力し、「Type」は「Device」を選んで「Create」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/0c9832d6-4340-1bd9-e371-eef595e96c56.png" width=700>

1. 追加したデータベースをクリックするとこの様な画面が表示されるので、「Add Target」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/a9a7313e-8eb5-f198-fc4f-2931fba1eadb.png" width=700>
1. ARマーカーとして使用したい画像をアップロードします。Widthは「5」に設定して「Add」をクリックします。（※WidthはUnity上でも変更できます。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/646ff100-a4ac-5950-c6ea-5d38abebfc9d.png" width=500>
1. 「Target」（ARマーカー）が追加されたので「Download Database (All)」からデータベースをローカルにダウンロードします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/f7387c42-2ea8-ba04-c488-6124a256df95.png" width=700>
1. 「Unity Editor」を選択して「Download」をクリックすると.unitypackage拡張子のファイルがダウンロードされます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/f0c4494b-a6a9-7373-1245-05de363a9f43.png" width=700>

# 【Unity】 ARマーカーをインポートする
1. 「AR Camera」が選択された状態で「Inspector」の「Open Vuforia configuration」をクリックします。<br>
<img width="500" alt="スクリーンショット 2018-10-18 1.41.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/93e9dd22-b094-0a71-1533-b72132f0794e.png">
1. コピーしておいたVuforiaのLicense Keyを「App License Key」の部分に貼り付けます。
<img width="700" alt="スクリーンショット 2018-10-18 1.42.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/db000a03-a5ab-8240-8f2d-1ed4b915eb7b.png">
1. Vuforiaのサイトでダウンロードした.unitypackage拡張子のファイルを「Assets」にドラッグ&ドロップします。<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/26ed844a-5141-8d34-615c-e401052e9515.png" width=700>
1. ついでに動画ファイルも「Assets」にドラッグ&ドロップしておきます。（スクショの都合上余計なものが混ざっちゃってますが気にしないで下さい）
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/d93077b7-889d-38a7-3f9b-3593c47494f0.png" width=700>
1. 「メニューバー > Game Object > Vuforia > Image」を選択するとVuforiaのデータベースに登録したARマーカーがSceneに追加されます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/158fb97c-0134-ae2f-9587-bb13c5e199ad.png" width=700>
1. 「ImageTarge > 3D Object > Quad」を選んで、クワッドオブジェクトを追加します。クワッドオブジェクトは動画再生などで使われることが多いみたいです。
[ドキュメント（プリミティブオブジェクト）](https://docs.unity3d.com/ja/500/Manual/PrimitiveObjects.html)
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/42f2fa2b-04c3-4daa-9980-556b9d8e388b.png" width=700>


1. 追加したクワッドオブジェクトが選択された状態で「Inspector」の「Add Component」からビデオプレイヤーコンポーネントを追加します。
<img width="362" alt="スクリーンショット 2018-10-18 2.18.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/0e49b4cb-2319-8f9c-09a2-df11ff758f69.png">

1. ビデオプレイヤーコンポーネントの「Video Clip」が空なので、先ほどAssetsフォルダーに入れておいた動画ファイルをドラッグ&ドロップします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/3757d99b-68dd-17a0-e7db-d607f24d7cc6.png" width=700>

1.  「Play On Awake」と「Wait For First Frame」のチェックを外します。(最初から動画が再生されないようにします)
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/180adbf3-c9a5-633f-8a45-7216dc700cdf.png" width=700>

1. 「Inspector」の「Transform」で動画が表示される座標を調整します。（お好みで）
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/a011a7e9-d5a1-f62b-94d9-e0e25ff33e89.png" width=700>

1. こんな感じに調整してみました。（かなり適当）
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/7d8b8d6c-d966-58a4-c5b4-82c84d564f55.png" width=700>



# 【Unity】 DeafultTrackableEventHandlerクラスを編集

1.  「ImageTarget」を選択した状態で「Inspector  > DefaultTrackableEventHandler(Script)」セクションの「Video Player」にクワッドオブジェクトをドラッグ&ドロップします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/287161/895030be-2851-3366-028e-fac9ec5c37b7.png" width=700>

1. 「Script」の「DefaultTrackableEventHandler」部分をダブルクリックしてC#のファイルを「Visual Studio Code for Mac」で開きます。
<img width="700" alt="スクリーンショット 2018-10-17 23.08.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/06ab0c77-7ba0-403a-22ee-28a07838c51a.png">

1.  以下のコードを追加します。

```
// 名前空間
using UnityEngine.Video;
```

```
// プロパティ
public VideoPlayer videoPlayer;
```

```
// OnTrackingEventFoundメソッドの先頭に追加 
// ARマーカーが認識されたら動画が再生されるようにします
videoPlayer.frame = 0;
videI Player.play();
```

```
// OnTrackingEventLostメソッドの先頭に追加
// ついでにARマーカーの認識が外れたら停止するようにしておきます
videoPlayer.frame = 0;
videoPlayer.stop();
```

# テストしてみる！

<img width="422" alt="スクリーンショット 2018-10-17 23.46.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/287161/e9a40def-8bfa-0075-6c87-d3c60d8b4773.png">

出来た！
無事登録したARマーカーをカメラが認識したら動画が再生されました！

※画像はXcodeでビルドしてiPhoneXに飛ばして試した時のものですが、実際はUnity上で「Play」を押してテストします。

# 感想
AR関連を今後もいじるかは不明ですが、とりあえずそれっぽいことができたのでお腹いっぱいです。