【スマホVR】Unity 5 PersonalとCardboard SDKで嫁をAndroidに召喚する【MMD】 - ReDo

2015年4月18日

【スマホVR】Unity 5 PersonalとCardboard SDKで嫁をAndroidに召喚する【MMD】

(2016.06.18注記)
MMD4Mecanim_Beta_20150821でも設定を変更すると動作する模様です。

Google VR SDK for UnityでMMDモデルを眺めるアプリ作成とそのやり方の話。
http://tecofalltolt.hatenablog.jp/entry/2016/06/16/215546
>Delayed Awake Frameの値を0にしてください。それ以外ではAndroid端末上でモーションが再生できません。

また、Android SDKのコマンドラインツール最新(?)installer_r24.4.1-windows.exeのインストール後のSDK Maganerによるパッケージ選択に、少々罠があるので、回避方法は以下の通りです。

以下、古いですが本編(そのうちGoogle VRになりましたし刷新します)

----

vr-ss-04.png

スマホ向け双眼3D VRゴーグル、Google Cardboard(タオバイザー/ハコスコ DX等のCardboard互換ゴーグル含む)向けにUnityで3D VRアプリを作るマニュアルを、Android SDKインストールからがっつりフルで書いてみました。Unity 5 Personalの登場で開発環境が無料で済むようになりましたので、よかったら皆様もお手持ちのスマホに嫁を召喚してみませんか。

vr-mokuji.png

◯目次

0. はじめに
1. Android開発環境の構築(JDK)
2. Android開発環境の構築(Android SDK)
3. Unity5のインストールとプロジェクトの作成
4. Cardboard SDKの導入
5. MMD4Mecanimの導入

○0. はじめに

ゲームエンジン+アプリ開発環境であるUnityを使って、Androidスマホ向け3D VRアプリを作ってみましょう。Unityといくつかのライブラリ・SDKを利用し、Androidアプリ開発環境の構築も必要なためそれなりに手順は多いです。がんばってください。

<想定ターゲット読者>
・Android実機+Cardboard互換デバイスを持っている。

ハコスコCardboard等、Google公式設計図クローンであれば5インチがベスト、どちらかというとGPUパワーの都合上ある程度新しい(1年半以内の発売が望ましいです)機種である必要があります。相性等はGoogle Cardboard公式アプリ等でご確認を!

・それなりにPC操作に慣れている。

ソースコードを編集することはないノンコーディングの手順となっており、プログラマでない方にもチャレンジいただけます。プログラマの方、特にAndroid開発者の方であればさらにハードルは下がるでしょう。

・Windowsユーザ(Macの人は各種開発環境のインストール手順がすこし違います)

・Unityはいずれかのチュートリアルは事前に済ませておくことをオススメします。

Unity - Developer - はじめての Unity - 第1回 世界の「骨格」をつくろう
http://japan.unity3d.com/developer/document/tutorial/my-first-unity/01.html
Unity入門 (全26回) - プログラミングならドットインストール
http://dotinstall.com/lessons/basic_unity

<各種確認環境・バージョン・素材>
おそらく環境バージョン差による致命的な差分はないと思いますが、環境が違っていたり、新しいバージョンのものがリリースされている際には、適時読み替えてください。
・Windows 8.1 64bit
Java SE 8u45
Android SDK tools r24.1.2
Unity 5 Personal 5.0.1p1
Cardboard SDK for Unity v0.4.10
MMD4Mecanim Beta_20150418
モデル:gisupeke BowlRoll:ドロイド君
モデル:Appearance Miku あぴミク
楽曲:サイバーサンダーサイダー
モーション:【MMD-DMC4】サイバーサンダーサイダー【モーション配布】

著作権等は各製作元に帰属します。ピアプロライセンスについてはこちらを参照ください。


○1. Android開発環境の構築(JDK)

AndroidアプリのビルドにはJDK(Java Development Kit)が必要です。

Java SE - Downloads | Oracle Technology Network | Oracle
http://www.oracle.com/technetwork/java/javase/downloads/index.html
から、Java SE 8の「JDK」をダウンロードしてインストールしましょう。

vr-jdk-01.png

Accept License Agreementにチェックを入れライセンス条項に同意し、jdk-8u45-windows-x64.exeをダウンロードして、インストーラexeを起動します。インストールパスを変更する必要もないと思いますそのままインストールしましょう。

vr-jdk-02.png
vr-jdk-03.png
vr-jdk-04.png

○2. Android開発環境の構築(Android SDK)

JDKに続いて、Android SDK toolsをインストールしましょう。JavaによるAndroidアプリの開発には統合開発環境(IDE)であるAndroid Studioが必要なのですが、本件ではUnityからAndroid SDK toolsが呼び出されてビルドされますのでSDK tools onlyで十分です。

Download Android Studio and SDK Tools - Other Download Options
https://developer.android.com/sdk/index.html#Other
から、installer_r24.1.2-windows.exeをダウンロード、インストーラを起動します。

vr-asdk-01.png
vr-asdk-02.png
vr-asdk-03.png

Android SDK Toolsのインストール先パスはC:\Android\sdkの様に半角スペースを含まない独立パスに変更しておくことをオススメしておきます(歴史的に事故率が高いので...)

vr-asdk-04.png

インストール画面の最後から、もう一息作業があります。Start SDK Managerのチェックを外さずに、SDK Managerを起動して、コンポーネントのダウンロードが必要です。(チェックを外して閉じてしまった場合には、C\:Android\sdk\SDK Manager.exeを起動してください。)

vr-asdk-05.png

インストールするコンポーネントを選んで順番にダウンロード+展開を実施します。初期設定そのままインストールでもダウンロードに時間がかかるだけではあるのですが、Unity向けにAndroidのシミュレータイメージ等は不要なため、以下の様に少し削って、Android 2.3.3のコンポーネントを追加してください。

vr-asdk-06.png
vr-asdk-07.png

また、最後にAndroidアプリの本体であるapkファイルが生成できた後、コマンドプロンプトやbatファイルからapkを直接installできる様に、環境変数PathにSDK Toolsの2フォルダのパスを追加しておくことをオススメします。

エクスプローラ等からコンピュータまたはPCを右クリック→プロパティ→システムの詳細設定→「詳細設定」タブの「環境変数」ボタンを選択、Pathに以下の2つをセミコロンで繋いで追加しましょう。
C:\Android\sdk\platform-tools
C:\Android\sdk\tools

vr-env-01.png
vr-env-02.png
vr-env-03.png

パス設定がうまくいっているかどうかは、デスクトップWindowsマークの右クリックからコマンドプロンプトを起動し、adbとコマンドを入力してください。adbのヘルプがつらつらと流れたらパスは通っています。「'adb'は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されてません。」というエラーが表示されたらPath設定がうまくいっていません。見直してください。

vr-env-04.png

adbは「android debug bridge」の略で、さまざまな機能をもったコマンドラインツールです。Androidデバイスが母艦であるPCに正常に認識されているかを確認する「adb devices」、apkを直接インストールする「adb install XXX.apk」あたりをよく使います。(Unityは「ビルド」と「ビルド+インストール」のメニューしかなく、「インストール」のみがUnityからはできません・・・)
筆者はadbinstall.batという「adb install -r %1」と1行だけ書いたbatファイルを作って、ドラッグアンドドロップでapkがインストールできるようにしています。

<Android実機で動作させるために必要な3step>
1. Android実機で開発者向けオプションを有効にします
設定(Settings)->端末情報(About Device)->ビルド番号(Build Number)を7回ぐらい連打してください。

2. adb USBドライバの設定追加・インストール
android_winusb.inf(USBドライバ情報)の編集または専用USBドライバのインストールにて、PCからAndroidデバイスを認識させます。以下のサイト等を参考にしてください。(Mac OS Xでは必要ありません。また、利用する機種によっては稀に.android\adb_usb.iniにベンダIDを追加しないと認識されないという罠もあります。)

Google USB DriverでAndroid端末をWindowsに認識させる - Yahoo!知恵袋
http://note.chiebukuro.yahoo.co.jp/detail/n128056

3. USB接続と認証
USBマイクロケーブルでPCとAndroidを接続すると、信用における母艦PCかどうかの確認ダイアログがAndroid側に表示されます。正常に認識されていると、Android側でadb接続中を示すNotificationが表示されたり、PC側からadb devicesで接続中のデバイスIDが確認できます。

○3. Unity5のインストールとプロジェクトの作成

Unity - Unity QA - Patch Releases
http://unity3d.com/jp/unity/qa/patch-releases
から、パッチ 5.0.1p1をクリックし、UnityDownloadAssistant-5.0.1p1.exeをダウンロード、ダウンロードアシスタント兼インストーラを起動します。

vr-unity-01.png
vr-unity-02.png

複数のUnityバージョンを保持しておきたいわけでなければデフォルトのままで良いと思います。

vr-unity-03.png
vr-unity-04.png

プロジェクト名はHelloCB、プロジェクト作成パスはD:\cardboardとして、Unity 5を起動します。初回起動時にはLicenseまわりのプロンプトが出ると思いますが、Personalを選択し、ユーザ登録等を実施してください。

vr-unity-05.png
vr-unity-06.png
vr-unity-07.png
vr-unity-08.png

○4. Cardboard SDKの導入

では、Cardboard SDK for Unityを導入し、さっそくVRアプリの開発にとりかかりましょう。

Cardboard SDK for Unityはgithubで配布されています。
https://github.com/googlesamples/cardboard-unity
SDKの機能や変更履歴等は以下の開発者向け公式サイトを参照ください。
https://developers.google.com/cardboard/unity/

CardboardSDKForUnity.unitypackageがSDKの本体です。githubに慣れていないとどこから落とせばいいか分かりづらいと思いますが、unitypackageのページを開いた後、View Rawをクリックするとバイナリがダウンロードされます。

vr-cb-01.png
vr-cb-02.png

ダウンロードが終わったらダブルクリックしてimportしましょう。Unityが起動した状態であればimportするファイルを確認するウィンドウが表示されます。

vr-cb-03.png

AssetsのCardboard>DemoSceneにCardboardデモSceneが格納されています。まずはこれで動作確認をしましょう。

vr-cb-04.png
vr-cb-05.png

DemoSceneが無事動いているようならCardboard SDKはうまく導入できています。次はUnityの設定を「Androidアプリ向け」に各種変更しておきましょう。

File->Build Settings...(Ctrl+Shift+B)を選択、Build Settingsウィンドウを開きます。
まずAdd Currentボタンをクリックし、Cardboard/DemoScene/DemoScene.unityをビルド対象のシーンリストに追加、PlatformでAndroidを選び、Switch Platformを選択します。

vr-cb-06.png

続いてEdit->Project Settings->Playerを開き、Company Name(自由)とProduct Name(アプリ名)を設定します。
・Resolution and PresentationのDefault OrientationをLandscape Leftに固定。
・Other SettingsのBundle Identifierを自分のドメイン+ProductNameに。ハイフン等、使えない文字があることに注意してください。

vr-cb-07.png
vr-cb-08.png

ここまで設定しおわったら、File->Save Projectを実施後、File->Build + Run(Ctrl+B)でBuild Settingsを開き、Build And Runボタンをクリック。apk名はHelloCB.apkで。

vr-cb-10.png

ビルドがはじまります。気長に待ちましょう。初回はAndroid SDKのパスを聞かれますので、前述の通りにインストールしていれば、「C:\Android\sdk」を指定してください。

vr-ss-01.png
vr-ss-02.png
vr-ss-03.png

無事こんな感じのアプリが起動すれば成功です。デフォルトはタップがマグネットスライドボタンの代替として動作しますので、下を向いてボタンに視線をあわせ、タップしてみましょう。「VR mode」で双眼(樽型歪み補正あり)/単眼が切り替え可能です。

○5. MMD4Mecanimの導入

さて、ある意味VRアプリとしてはここまででもできていると言えばできているのですが、せっかく3Dなことを活かすべく、+αでミクさんとドロイド君に踊ってもらうことにしましょう。

MMDモデルデータとモーションデータをUnityのMecanimに対応した形式に変換するMMD4Mecanimを導入します。Stereoarts HomePageよりMMD4Mecanim_Beta_20140929.zipをダウンロードし、展開したフォルダに含まれるMMD4Mecanim.unitypackageを起動します。

開いているUnityプロジェクトに自動的にImportされる確認ウィンドウが表示されますので、Importを選択します。

vr-mmd-01.png

続いて変換前3Dモデルデータとモーションデータ、楽曲(wav)をUnityプロジェクトに追加します。基本的にはフォルダ・ファイルをドラッグアンドドロップです。ファイル一式はUnityプロジェクトにコピーされるのでデータの置き場所は原則どこでも良いのですが、変換前データはPC上で整頓しておくと良いでしょう。

まず、前述のピアプロからAppearance Miku あぴミク_mamamana_201409222309.zipをダウンロードし、展開したAppearance MikuフォルダをUnityのAssets直下にドラッグアンドドロップでコピーします。

続けて、モデル:gisupeke氏のBowlRoll:ドロイド君をダウンロードし、同様に展開したドロイド君フォルダをドラッグアンドドロップでコピーします。

次に、モーションデータはniconicoの動画ページから説明文言中に"モーション配布"として紹介されているアップローダのURLを開き、サイバーサンダーサイダー(さっちゃそ).zipをダウンロードして開いたものをUnityのAssets直下に同様にドラッグアンドドロップします。

最後に、楽曲データも前述のピアプロからサイバーサンダーサイダー_EZFG_201410011258.mp3をダウンロードし、モーションデータと同じフォルダにコピーします。こちらはmp3をOggVoribisに変換するのにちょっと時間がかかります。HDD容量に余裕があればwavにデコードしてモーションと同一フォルダで保持しておくことをオススメします。

MMD4Mecanimのimportと、アセットの配置が終わるとだいたい以下の様な配置になっていると思います。

vr-mmd-02.png

続けて、変換・Sceneへの配置をします。MMD4Mecanimのマニュアルが非常に丁寧で分かりやすいので、「チュートリアル(基本編)」と「チュー トリアル(応用編)」を読んでください...でもいいのですがかんたんですが以下に手順を記載しておきます。

Appearance Miku/Appearance Miku.MMD4Mecanimを選択、利用規約を確認し、利用規約とPCL遵守のチェックを入れて同意する、を選択します。

vr-mmd-03.png

MMD4Mecanim InispectorでAdvanced Modeにチェックを入れ、Vertex Scaleをデフォルトの8から少し大き目の12に変更。
サイバーサンダーサイダー(さっちゃそ).vmdをProjectタブで開き、ドラッグアンドドロップでVMDの項に設定、ApplyとProcessボタンを順番に選択し、変換が終わるのを気長に待ちます。

vr-mmd-04.png

変換完了後はモーションの設定です。Appearance Mikuフォルダを選択、Create->Animator Controllerを選択、mikuという名前で作成します。

vr-mmd-05.png
vr-mmd-06.png

作成後はダブルクリックでAnimatorタブを開き、Appearance Mikuモデルオブジェクト(水色の立方体アイコン)の内側のサイバーサンダーサイダー(さっちゃそ).vmdをドラッグアンドドロップで配備します。

vr-mmd-07.png

ざっとSceneにミクさんを配置してみましょう。
・Hierarchyから、Cubeは削除します。
・Apperance Miku(水色の立方体アイコン)をドラッグアンドドロップでSceneに配置、Positionは0,0,3・Rotationは0,180,0に設定。
・Apperance Miku/miku(Animator Controller)をHierarchyのApperance Mikuにドラッグアンドドロップで設定
・MMD4Mecanim Model(Script)のAudio Clipに【VY1】サイバーサンダーサイダー楽曲データを設定。
・Point lightだけだと暗いので、HierarchyのCreate->LightからDirectional Lightを追加。
・少しミクさんを大きくしたので、CardboardMainのPositionもYをちょこっとあげておきます。

vr-mmd-08.png

Play(Ctrl+P)してみて、ミクさんがCTCを踊ってくれればOKです、File->Build Settingsから(Ctrl+Shift+B)Build and RunしてAndroidで見てみましょう。このあたりからビルド時間・Androidへのインストール(転送)時間が長くなりますので気長に!

同様の手順で、今度はドロイド君を反対側に配置してみます。Audioでのモーション同期の設定が少しややこしいのでお気をつけて。

・ドロイド君/doroid.MMD4Mecanimを選択、利用規約に同意。
・Advanced Modeにチェック、Vertex Scaleを8から12にして、VMDにサイバーサンダーサイダー(さっちゃそ)を設定。
・Apply+Processボタンを押して変換待ち。
・ドロイド君フォルダを開いた状態でProjectビューのCreate->Animator Controllerを選択、名前はdroidに設定。
・Animator ControllerのdroidをダブルクリックしてAnimatorビューを表示、先ほど生成されたdoroid(水色の立方体アイコン)の内側にあるサイバーサンダーサイダー(さっちゃそ).vmdをドラッグアンドドロップで設定。
・Hierarchyにdoroidを配置、ミクさんと向かい合わせ反対側になるようにPositionは0,0,-3.2・Rotationは0,0,0あたりを設定。
・HierarchyのAppearance Mikuを選択、Add ComponentからAudio Sourceを選択肢、コンポーネントとして追加。AudioClipにサイバーサンダーサイダー楽曲データを設定。
・HierarchyのdoroidのMMD4Mecanimコンポーネント設定で、ModelタブのAudio SourceにAppearance Mikuを設定、AnimタブのAnimations->Audio Clipにサイバーサンダーサイダー楽曲データを設定。

vr-mmd-09.png
vr-mmd-10.png

正面にミクさんが、くるっとまわって反対側にドロイド君が踊ってくれていれば成功です。お疲れ様でした!

vr-ss-04.png
vr-ss-05.png

コメント(4)

初めてのUnityで大変参考になりました!
本当に有難うございます!

WinやMacのUnity上では、ビルドすると、音楽も鳴り、ダンスもしてくれるのですが、Androidでビルド&ランすると、音はなりますが、踊ってくれません。
何が原因でしょうか?

>ばんちょーさん
Unity挑戦お疲れ様です。実は最初に少しだけ書いてあるのですが、現行入手可能なMMD4Mecanimではモバイルが対応から外れており、本エントリの内容通りにはAndroidやiOSでは動作しません。
古い話のままで申し訳ない。。。

こんにちは
自分もUnityに挑戦しましたが上記のコメントと同じ結果になりました
今できる方法はないでしょうか?

丁寧な解説をありがとうございました。
とっても参考になりました!

コメントする