UnityでVuforiaを使ってLive2DとARの可能性を感じる

#モチベーション
* 楽しいことをするために現存する技術に触れる
* ARのアプリ開発とかしてみたかった
* Live2Dとか今ある表現方法と技術を組み合わせる練習
* 技術自体に触ってハッピーになる

#出来上がるもの
* こんな感じのものが出来上がる

![](https://github.com/shima07/qiita/raw/master/simple_unity_vuforia_live2d/article/img_4954.gif) 

#開発環境
* Unity 5.2.1f1
* Vuforia (packageはvuforia-unity-5-0-10.unitypackage)
* Live2D Cubism SDK for Unity Version 2.1.00_1

#流れ
##準備
###Live2Dの準備
* Live2DのSDKをダウンロード [link](http://sites.cybernoids.jp/cubism-sdk2/unity2-1)

### マーカーの準備
Vuforiaで使うマーカーの準備

* Single Image用の画像(.jpgか.pngで一枚用意)
* Cuboid用のマーカー(立方体（正六面体）の何かの展開図とそれぞれの面の画像)

Cuboidのテスト用のサンプル画像は[github](https://github.com/shima07/qiita/tree/master/simple_unity_vuforia_live2d/resource)に置いてあるのでご自由に

###Vuforiaの準備
ここでは以下の二つを行う

* VuforiaをUnityで使うためのパッケージファイルをダウンロード
* アプリで使うマーカ（ターゲット）をWebサイト上で準備してパッケージにしてダウンロード

####手順

* [Vuforia](https://developer.vuforia.com/)に登録
* VuforiaのSDKからDownload for Unityをダウンロード [link](https://developer.vuforia.com/downloads/sdk)
* VuforiaのDevelop > License Manager で Add License Key
![2016-02-19_22h16_45.png](https://qiita-image-store.s3.amazonaws.com/0/76553/2587e759-8c9f-da28-a812-a240d398feb6.png)
画面の通りに入力していく。DeviceはMoblie、License KeyはStarterを選択
![2016-02-19_22h17_14.png](https://qiita-image-store.s3.amazonaws.com/0/76553/5f0f887a-873e-3cac-2506-cece630345f7.png)
　

* 登録が終わったら、作成されたLicenseのキーをメモしておく![2016-02-19_22h40_49.png](https://qiita-image-store.s3.amazonaws.com/0/76553/d2e9c775-3810-4175-f188-463dcbf8e156.png)
　
* VuforiaのDevelop > Target Manager で Add Database 
![2016-02-19_22h17_26.png](https://qiita-image-store.s3.amazonaws.com/0/76553/1cb83ff8-e211-2379-1683-016ea7bd5dff.png)
　
![2016-02-19_22h17_31.png](https://qiita-image-store.s3.amazonaws.com/0/76553/437a3dac-4297-b029-c258-4953f37f6430.png)
　
* 作成したDatabase内で Add Target
![2016-02-19_22h17_55 - コピー.png](https://qiita-image-store.s3.amazonaws.com/0/76553/f825f8de-68f1-a489-db93-e0091b79e105.png)
　
* ここで画面に従いながらマーカー（ターゲット）を設定していく（今回はSingle Image, Cuboidの2種類を試す）  
Single Imageはマーカー(ターゲット)とサイズと名前を設定する
![2016-02-19_22h18_00.png](https://qiita-image-store.s3.amazonaws.com/0/76553/def0d31c-30ce-cf0b-3d40-55c7a5eb3d41.png)
　
Cuboidはサイズと名前を設定する（各面のマーカーは後から設定する）
![2016-02-19_22h18_04.png](https://qiita-image-store.s3.amazonaws.com/0/76553/b3f0619f-cb85-6d69-f9b3-ed8adc89f6ed.png)
　
作成されたオブジェクトの面それぞれに画像を設定していく、右の展開図をクリックすると画像をアップロードできる
![2016-02-19_22h18_18.png](https://qiita-image-store.s3.amazonaws.com/0/76553/2d5b0818-433b-11f9-344d-9f9a6877df4b.png)
　
* 終わったらDownload Dataset(All)でUnityのパッケージにしてダウンロード
![2016-02-19_22h17_55.png](https://qiita-image-store.s3.amazonaws.com/0/76553/791b14a0-a22c-297d-e811-97ab616af549.png)
　
![2016-02-19_22h19_07.png](https://qiita-image-store.s3.amazonaws.com/0/76553/783f6673-fae6-ca75-264c-96557d61e100.png)


###Unityでプロジェクトを作り、SDKを配置したりパッケージをインポートしたりする
ここまでで以下のものが準備できたはずだ

* Live2D SDK
* Vuforia SDKのpackage
* Vuforia のマーカーのpackage（Download Dataset(All)でダウンロードしたpackage）
* Vuforiaのアプリのライセンスキー

ここからUnity上で以上を組み合わせていく

* 一番簡単な方法として、Live2D SDKのsample/SampleApp1を使う
* UnityでLive2D_SDK_Unity_2.1.00_1_jp/sample/SampleApp1/Assets/Scene/Sample.unityを開く
* HierarchyにあるMainCameraを消す
* Assets > Import Package > Custom Package...からVuforia SDKのpackageとVuforia のマーカーのpackageをImportする
* ProjectにあるVuforia/Prefabs/ARCameraをHierarchyに追加
* ARCameraのInspector/Vuforia BehaviourのApp License KeyにVuforiaのアプリのライセンスキーを追加する
* ARCameraのInspector/Database Load BehaviourにあるLoad Data Set YOUR_APP_NAMEとActivateのチェックボックスを有効にする
* 続けて、Single ImageかCuboidマーカーのいずれかの設定を行う
 　

#### Single Imageのマーカーを設定する
* ProjectにあるVuforia/Prefabs/ImageTargetをHierarchyに追加
* ImageTargetのInspector/Image Target BehaviourのData SetとImage Targetを設定する


#### Cuboidのマーカーを設定する
* ProjectにあるVuforia/Prefabs/MultiTargetをHierarchyに追加
* MultiTargetのInspector/Multi Target BehaviouのData SetとMulti Targetを設定する

あとは、マーカーの位置とLive2Dのモデルの位置を修正すれば完成！！
iOSにも普通にビルドできる！

![](https://github.com/shima07/qiita/raw/master/simple_unity_vuforia_live2d/article/img_4954.gif) 

Unityちゃんマークからハルが召喚される…時間があったら治そう…
![](https://github.com/shima07/qiita/raw/master/simple_unity_vuforia_live2d/article/img_4957.gif)