Go to Qiita Advent Calendar 2024 Top
LoginSignup
44
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@shima_rin

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

Last updated at Posted at 2015-12-11

※最終的にこんなものが出来上がります
05.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へ！
  • つまり自分の作った世界（例えばマイクラや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の対応範囲が広いのでモデルの再利用とかもできるし夢がひろがリンぐ！！
  • サンプルモデルを利用してアプリとかが簡単に作れる(ガイドラインなどは別途確認)
  • 困ったときにはフォーラムに聞いたりできる
  • 成人向けのアプリも作っていいらしい（参考）

##何を作ろう？
実はとある昔、某所でこんなものをもらった
000.jpg

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

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

##実験
※最終的にこんなものが出来上がります
05.gif

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

####開発環境

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

###Cardboardのデモを動かしてみる
01.gif
まずは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で動かしてみる
02.gif
まずは、Live2Dのチュートリアルのやってみよう！のUnityでグリグリ動かしてみようを読む

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

###Cardboard SDK for Unityを使ってLive2Dを表示してみる
03.gif

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

###Cardboardでトリガーを使ってみる
05.gif

  • カードボードについている横の磁石をトリガーというらしい
  • これを引いたときにキャラにモーションを再生させてみる
  • 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さんです！よろしくお願いします！！

44
44
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
44
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?