Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

モチベーション

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

出来上がるもの

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

開発環境

  • 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

マーカーの準備

Vuforiaで使うマーカーの準備

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

Cuboidのテスト用のサンプル画像はgithubに置いてあるのでご自由に

Vuforiaの準備

ここでは以下の二つを行う

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

手順

  • Vuforiaに登録
  • VuforiaのSDKからDownload for Unityをダウンロード link
  • VuforiaのDevelop > License Manager で Add License Key
    2016-02-19_22h16_45.png
    画面の通りに入力していく。DeviceはMoblie、License KeyはStarterを選択
    2016-02-19_22h17_14.png
     

  • 登録が終わったら、作成されたLicenseのキーをメモしておく2016-02-19_22h40_49.png
     

  • VuforiaのDevelop > Target Manager で Add Database
    2016-02-19_22h17_26.png
     
    2016-02-19_22h17_31.png
     

  • 作成したDatabase内で Add Target
    2016-02-19_22h17_55 - コピー.png
     

  • ここで画面に従いながらマーカー(ターゲット)を設定していく(今回はSingle Image, Cuboidの2種類を試す)

    Single Imageはマーカー(ターゲット)とサイズと名前を設定する
    2016-02-19_22h18_00.png
     
    Cuboidはサイズと名前を設定する(各面のマーカーは後から設定する)
    2016-02-19_22h18_04.png
     
    作成されたオブジェクトの面それぞれに画像を設定していく、右の展開図をクリックすると画像をアップロードできる
    2016-02-19_22h18_18.png
     

  • 終わったらDownload Dataset(All)でUnityのパッケージにしてダウンロード
    2016-02-19_22h17_55.png
     
    2016-02-19_22h19_07.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にも普通にビルドできる!

Unityちゃんマークからハルが召喚される…時間があったら治そう…

shima07
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away