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

※最終的にこんなものが出来上がります

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へ！
つまり自分の作った世界（例えばマイクラやMMDのフィールド）に自分もゲームのキャラの様に世界に入り込めたり、自分の好きなキャラ（例えばリンちゃんとか凛ちゃん）の五感を全て自分のものにできる＝りんちゃんになれる

HMD(Head Mounted Display)

VRを私たちが体験するのに視野（視覚）を表現するのに使われたりしている（もちろん他の使われ方もする）
最近はOculusやPlayStationVR（PSVR）などで認知・理解が広まりつつある
上記のような製品版の発売もあり2016年に大きな動きがありそう
2013年頃にOculus DK1で遊んでいたのはもう遠い昔の事のよう
これによってリンちゃんとのデートが実現できるようになるはずだった…（未だに満足の行く形になっていない）
詳しくはWikiへ！

Unity

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

Cardboard

Google Developersにあるお手軽VR体験キット（公式Webサイト）
APIとしてCardboard SDK for AndroidとCardboard SDK for Unityがある
似たものでハコスコもある（コンセプトが違う？）
手軽にVRが楽しめるという点で最高！夢がひろがリンぐ！！

Live2D

自分の描いたイラストを原画そのままに動かすことができる技術（公式Webサイト）
二次元のキャラに命を吹き込むことが出来る
Euclidによる360度の立体表現への未来がある
テンプレート機能によるモデル作成の補助機能などもある(テンプレートモデルのサンプル)
SDKの対応範囲が広いのでモデルの再利用とかもできるし夢がひろがリンぐ！！
サンプルモデルを利用してアプリとかが簡単に作れる(ガイドラインなどは別途確認)
困ったときにはフォーラムに聞いたりできる
成人向けのアプリも作っていいらしい（参考）

何を作ろう？

実はとある昔、某所でこんなものをもらった

とりあえず、世に出ているVRアプリ（例えばVR Jump Tour）で遊んだりした
で、自分で何か作ってみたいなと思い始めうろうろしているとCardboardと出会う

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

実験

※最終的にこんなものが出来上がります

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

開発環境

Mac OS X El Capitan 10.11.1
Xcode 7.1
Unity5.2.1f1
iPhone 5S(iOS9.1)

Cardboardのデモを動かしてみる

まずはCardboardからCardboard SDK for UnityのiOS用Unityのスタートガイドを読む

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

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

あと、Unity上でのデバッグは以下を参照するといいと思います
Cardboard SDK for UnityのデベロッパーガイドのUnityエディターでCardboardをシミュレートする

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

Live2DをUnityで動かしてみる

まずは、Live2Dのチュートリアルのやってみよう！のUnityでグリグリ動かしてみようを読む

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

Cardboard SDK for Unityを使ってLive2Dを表示してみる

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

Cardboardでトリガーを使ってみる

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

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さんです！よろしくお願いします！！

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

概要