Cardboard SDK for Unityを使ってVR対応アプリを作る ＆ Live2Dのキャラを目の前に召喚する

※最終的にこんなものが出来上がります
![05.gif](https://raw.githubusercontent.com/shima4rin/qiita/develop/06.gif)
Live2DのAdvent Calendar12日目！！
正直Advent Calendar追い切れていません…！！
とはいえ今日（記事下書き時）は何をしているのか…少しのぞいてみたのですが、とても刺激的で刺激的で…これでリンちゃんを描きたい動かしたい動かしたいいいいいいいいいいいいいいという衝動に駆られながら書いているのでこの記事を書くという行為は苦行に変わりつつあります。なんと恐ろしい（歓喜）
というか、何この発想…どうやって思いついたのか詳しく話を聞きたくなるくらいのあれですね…！！

さて、そんな感じでこの記事ではLive2Dの可能性を探るべく（興味の赴くままに）過去に自分が試したLive2D × Cardboard(VR)について共有します
！！ネタも半分くらい含むので軽く内容を確認したい方は概要と実験以下をご覧ください！！

##概要
* この記事は最終的にタイトルの通りCardboard SDK for Unityを使ってLive2Dのモデルを描画することを目的にしています
* はじめにこの記事で出てくる技術について雑記があります
* それぞれの動作をデモやサンプルで確認してみます
* Live2DのCubismSDK 2.1 for Unityのsample/SampleApp1で描画されるモデルをCardboardのSDKを使ってVR上に表示してみます
* Cardboardのトリガーを使ってLive2Dのモーションを再生させてみます

##現代の私たちが手にした技術 - この記事で扱う技術について
####VR(Virtual Reality)
* 仮想現実
* 詳しくは[Wiki](https://ja.wikipedia.org/wiki/バーチャルリアリティ)へ！  
* つまり自分の作った世界（例えばマイクラやMMDのフィールド）に自分もゲームのキャラの様に世界に入り込めたり、自分の好きなキャラ（例えばリンちゃんとか凛ちゃん）の五感を全て自分のものにできる＝りんちゃんになれる

####HMD(Head Mounted Display)
* VRを私たちが体験するのに視野（視覚）を表現するのに使われたりしている（もちろん他の使われ方もする）
* 最近は[Oculus](https://www.oculus.com/en-us/)や[PlayStationVR（PSVR）](http://www.jp.playstation.com/psvr/)などで認知・理解が広まりつつある
* 上記のような製品版の発売もあり2016年に大きな動きがありそう
* 2013年頃にOculus DK1で遊んでいたのはもう遠い昔の事のよう
* これによってリンちゃんとのデートが実現できるようになるはずだった…（未だに満足の行く形になっていない）
* 詳しくは[Wiki](https://ja.wikipedia.org/wiki/ヘッドマウントディスプレイ)へ！

####Unity
* 複数のプラットホームに対応するゲームエンジン（[公式Webサイト](http://japan.unity3d.com/)） 
* ゲーム開発の民主化を進めるために生まれたとか聞いてる（記憶が定かでない）
* とにかく手軽にばんばんゲーム作れるし好き（他のゲームエンジンも好きだけど…）
* アセットストアとかすごい
* Unity5あたりからまた新機能とか面白い感じになってきている
* 仮想現実というか自分の世界・ゲームを作るのに最高のツール！
* 夢を実現するのを手伝ってくれる最高のツール！！
* この辺で他のもだけどわざわざ書かなくてもみんなわかるのではって気がしてくる…遅い

####Cardboard
* Google Developersにあるお手軽VR体験キット（[公式Webサイト](https://developers.google.com/cardboard/?hl=ja)）
* APIとしてCardboard SDK for AndroidとCardboard SDK for Unityがある
* 似たもので[ハコスコ](http://hacosco.com/)もある（コンセプトが違う？）
* 手軽にVRが楽しめるという点で最高！夢がひろがリンぐ！！

####Live2D
* 自分の描いたイラストを原画そのままに動かすことができる技術（[公式Webサイト](http://www.live2d.com/)）
* 二次元のキャラに命を吹き込むことが出来る
* Euclidによる360度の立体表現への未来がある
* [テンプレート機能](http://sites.cybernoids.jp/cubism2/modeler/edit-keyform/template)によるモデル作成の補助機能などもある(テンプレートモデルの[サンプル](http://sites.cybernoids.jp/cubism2/templates)) 
* [SDKの対応範囲](http://www.live2d.com/products/cubism_sdk)が広いのでモデルの再利用とかもできるし夢がひろがリンぐ！！
* [サンプルモデル](http://sites.cybernoids.jp/cubism2/samples)を利用してアプリとかが簡単に作れる(ガイドラインなどは別途確認)
* 困ったときには[フォーラム](http://forum.live2d.com/)に聞いたりできる
* 成人向けのアプリも作っていいらしい（[参考](http://sites.cybernoids.jp/cubism2/faq/general#Q08)）

##何を作ろう？
実はとある昔、某所でこんなものをもらった
![000.jpg](https://qiita-image-store.s3.amazonaws.com/0/105171/2b293462-e9ab-6fca-35a7-12a9484bb6db.jpeg)


とりあえず、世に出ているVRアプリ（例えば[VR Jump Tour](https://itunes.apple.com/jp/app/vr-jump-tour/id888974043?mt=8)）で遊んだりした
で、自分で何か作ってみたいなと思い始めうろうろしているとCardboardと出会う

お、じゃぁこいつを使って何かしよう、
「えー、大画面でキャっ、キャラたちの躍動する世界をみんなに見せたいね」（ゆらゆらしながら）
…よし、まずはとりあえずLive2Dの板を3Dの世界におけるか試してみよう！

##実験
※最終的にこんなものが出来上がります
![05.gif](https://raw.githubusercontent.com/shima4rin/qiita/develop/06.gif)


前置きが思ったよりも長くなってしまいましたが実験開始

####開発環境
* Mac OS X El Capitan 10.11.1
* Xcode 7.1
* Unity5.2.1f1
* iPhone 5S(iOS9.1)


###Cardboardのデモを動かしてみる
![01.gif](https://raw.githubusercontent.com/shima4rin/qiita/develop/01.gif)
まずはCardboardからCardboard SDK for Unityの[iOS用Unityのスタートガイド](https://developers.google.com/cardboard/unity/get-started-ios?hl=ja)を読む

スタートガイドにある通りなので省略しますが、
要はCardboard SDK for UnityとUnity 用 Cardboard Demoをダウンロードしてインポートすればいい

自分は両方ともunitypackageでダウンロードして進めました
また、ダウンロードするパッケージの名前が、
CardboardSDKForUnity.unitypackage（Cardboard SDK for Unity）と
CardboardDemoForUnity.unitypackage（Unity 用 Cardboard Demo）で似ているので気をつけた方がいいかもしれません

あと、Unity上でのデバッグは以下を参照するといいと思います
Cardboard SDK for Unityの[デベロッパーガイド](https://developers.google.com/cardboard/unity/guide?hl=ja)のUnityエディターでCardboardをシミュレートする


ついでにUnityからiOS向けにも書き出してみる
これもスタートガイドをよく読みましょう！
手順5にある、Bundle Identifierへアプリケーションの有効なパッケージ名を入力するというところにハマりかけました
そういえばこのあたりを試しているときにiOSでの実機デバッグが無料でできるようになってたことを知りました

###Live2DをUnityで動かしてみる
![02.gif](https://raw.githubusercontent.com/shima4rin/qiita/develop/02.gif)
まずは、Live2Dのチュートリアルのやってみよう！の[Unityでグリグリ動かしてみよう](http://sites.cybernoids.jp/cubism2/lets-do-it/my-first-lapp)を読む

チュートリアルの通りなので省略
[SDKをダウンロード](http://sites.cybernoids.jp/cubism-sdk2/)してきてあとは実行するだけというレベルなので省略
※オリジナルのモデルの組み込みやWeb上に書き出すなどは見ておくといいかもしれない


###Cardboard SDK for Unityを使ってLive2Dを表示してみる
![03.gif](https://raw.githubusercontent.com/shima4rin/qiita/develop/03.gif)

* ここまでの流れでそれぞれの動作を確認しておく
* Live2DのSDKにあるsample/SampleApp1を開く
* Cardboard SDK for Unityをインポートする
* Cardboard SDK for Unityの[デベロッパーガイド](https://developers.google.com/cardboard/unity/guide?hl=ja)のプレハブを使用してVRを追加するの要領で追加していきます
* SampleApp1のMainCameraを削除するか無効にします
* インポートして追加されたプロジェクトのCardboard/PrefabsにあるCardboardMainをHierarchyに追加します
* CardboardMainのPositionのZを-13ぐらいに設定します
* 再生して確認します

###Cardboardでトリガーを使ってみる
![05.gif](https://raw.githubusercontent.com/shima4rin/qiita/develop/05.gif)

* カードボードについている横の磁石をトリガーというらしい
* これを引いたときにキャラにモーションを再生させてみる
* Projectで適当なところにCreate > C# Scriptで以下のコードを貼り付ける

```lang:script.cs
using UnityEngine;
using System.Collections;

public class script : MonoBehaviour {

    // Use this for initialization
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
        if(Cardboard.SDK.Triggered) {
            Debug.Log("script:triggerd");
            var model = GameObject.Find("Live2D_Canvas_Haru").GetComponent<LAppModelProxy>().GetModel(); 
            model.StartRandomMotion(LAppDefine.MOTION_GROUP_TAP_BODY, LAppDefine.PRIORITY_NORMAL);
        }
    }
}
```

* HierarchyでCreate > Create Emptyとかで空のゲームオブジェクトを作って上のScriptを適用させる

##最後に
* Live2Dのキャラを板状にしておいて原画そのままにキャラのアニメーションなどの表現ができることが確認できた
* Cardboardのデモで遊んでみるとわかるようにちょっとしたアクションとか、
注視（画面の中央を視点と仮定して一定時間見ているような状況）についても実装できそう
* Advent Calendarとは別にTwitter上にあるLive2Dされたイラストたちをひたすらに流し続けるツールとか作ったら面白そうだなとか思ってたりします…
* ほかにもポッキーゲームとかキスとかいろいろできそうですよね！！！！！！！！（大歓喜）

今後のアイデアを実現する時にこんなこともできたなという感じに思い出していただけると幸いです

では12日目はこれにて！
13日目はasobotさんです！よろしくお願いします！！