Cardboard/タオバイザーハンズオン 初心者向け3DVRアプリ開発マニュアル - ReDo

2014年12月15日

Cardboard/タオバイザーハンズオン 初心者向け3DVRアプリ開発マニュアル

◯はじめに

本資料は以下のハンズオンイベント用の資料という位置づけですが、「Cardboard/タオバイザー向け3DVR AndroidアプリをUnityで作る初心者向けドキュメント」として整備していけたらいいな、と思っています。

以下の3コースがあります。共通編で環境を確認後、それぞれのコースに分かれて作業を継続してください。

・【Aコース】クエリちゃんコース
・【Bコース】ユニティちゃんCandyRockStarコース
・【Cコース】MMD4Mecanim+ドロイド君コース

◯【共通編】

1. Android SDKのセットアップ

Android開発環境が未セットアップの方は、以下のマニュアルを参考に、Andorid SDKのセットアップまでを完了させてください。Android SDKのみUnityからのアプリビルドに使用します。(Android Studioは本ハンズオンでは用いません。)

「Android Studio ではじめる 簡単 Android アプリ開発」補足資料」
http://keiji.github.io/the-androidstudio-book/archives/book.pdf

※SDKのセットアップとUnityのインストーラは数GBを超える大量のファイルのダウンロードが必要なため、必ず事前に完了するようにしておいてください。当日ハンズオン会場では申し訳ありませんがWiFi等インターネット接続環境はご提供できません。

2. Unityのインストールと起動

以下のページから、お使いのOSにあわせた最新版(4.6.1p1)をダウンロードしてください。

Unity Patch Releases
http://unity3d.com/unity/qa/patch-releases

ユーザ登録の上、Freeライセンスでセットアップします。以下の@ITさんの記事が参考になると思います。

@IT:ゲーム開発者以外も最低限知っておきたいUnityの基礎知識&無料版Unity 4.5のインストールチュートリアルと画面構成
http://www.atmarkit.co.jp/ait/articles/1410/27/news037.html

★★★時間と回線の都合上、ハンズオン当日までにここまでは完了させておいてください★★★


3. Dive SDKのセットアップとアプリのお試しビルド

以下のDurovis Dive向けSDKページに「Dive Unity Plugin Package 2.0 for Android/iOS.」というリンクからUnity向けプラグイン(Dive_Plugin_2-0-r498.unitypackage)をダウンロードします。

Durovis Dive SDK - creating games for Dive and OpenDive
https://www.durovis.com/sdk.html

ダウンロードが終わったら、Unityで新規プロジェクトを作成します。ここではabc2014wという名前にしたものとします。

dive1.png

・Create->3D Object->Cubeで立方体を生成し、Floorという名前に変えます。Positionを0,-0.5,0に、Scaleを100,1,100に変更します。
・Create->Light->Directional Lightを選択し、ライトを配置します。お好みでShadow Typeを設定してください。
・Create->3D Object->Sphereで球を生成し、Positionを0,0.5,0に変更します。
・Ctrl+sまたはFile->Save Sceneで現在のシーンを保存します。名前はMainとしたものとします。

dive2.png

ここまで来たらDive_Plugin_2-0-r498.unitypackageを選択肢、Diveプラグイン一式をImportします。

dive3.png

Main Cameraを削除して、Dive>Dive_CameraをHierarchyにD&Dして配置し、Positionを0,1,-1あたりに変更します。
再生してマウスをグリグリ動かすと、双眼で球が見えていればおそらく大丈夫です。ビルドしてAndroid実機で見てみましょう。

dive4.png

Ctrl+shift+BまたはFile->Build Settings...を開きます。
Add Currentボタンを選び、Mainシーンをビルド対象に追加します。PlatformにはAndroidを選択肢、Player Settings...を選択します。Resolution and PresentationのDefault OrientationをLandscape Leftに変更しましょう。

dive5.png
dive6.png

また、Other Settingsを開き、Bundle Identifierに他のアプリとかぶらない適切なパッケージ名を設定してください。ここまで設定したらBuild and Runを選択しましょう。
初回はAndroid SDKのパスを聞かれるので、指定してください。いくつかAlertが出ますが、原則「Continue」を選択すれば逃げ切れると思います。正常にapkのビルドと、Androidデバイスへのインストールが成功すれば、自動的に起動されます。ビルドは成功するけどインストールがうまくいかない(adb devicesなどで認識されていない)際にはBuild and Runではなく、Buildでapkだけを出力し、なんとか実機にもっていってインストールするという回避策もあります。

dive7.png

◯【Aコース】クエリちゃんコース
query-chan-logo.png

クエリちゃん【デジタル・インタラクティブ・アイドル】OFFICIAL WEBSITE
http://www.query-chan.com/

さて、Aコースでは共通編の丸っこい球をクエリちゃんに変えるコースです。CC-BYのライセンスとクエリちゃんからのお願いを確認しつつ、Asset Storeからダウンロードしましょう。

query1.png

アセットの中に何が含まれているかどうかは以下の公式(?)docが分かりやすいです。

クエリちゃんの『いじりかた?』
http://www.slideshare.net/NobuhikoSasaki/ss-38173018

この前追加されたハロウィンの他、今はクリスマスクエリちゃんが含まれています。

query2.png

query3.png

ダウンロードとImportが完了したら、Assets内のPQAssets>Query-Chan>Query-Chan_ChristmasをD&DでHierarchyに配置します。後ろ向いてるクエリちゃはRotationに0,180,0を設定してこっち向いてもらった上で、元からあったSphereにはちょっとどいといてもらいましょう。

query4.png

あらかじめMecanimモーションが用意されていますので、何か適用してみましょう。クエリちゃんのInspectorからQueryMechanimController Scriptをダブルクリックで開いて、編集します。

ちゃんとするのであればUnityのライフサイクル等の説明が必要なのですが、ここでは割愛して、おもむろに以下のコードをUpdate()メソッドの手前ぐらいに記載してください。Update()は毎フレームごと呼ばれるコールバック、Awake()は起動時に1回だけ呼ばれるコールバックです。

  void Awake()
  {
    ChangeAnimation(QueryChanAnimationType.CH_Dance);
  }

再生してみて大丈夫そうならば、Build and Runしてみましょう。

query5.png

クリスマスクエリちゃんが踊ってくれれば成功です。めでたしめでたし。

◯【Bコース】ユニティちゃんCandyRockStarコース
ユニティちゃんライセンス
このコンテンツは、『ユニティちゃんライセンス』で提供されています

unity-crs2.jpg
ユニティちゃんのライブステージであるCandy Rock Starをタオバイザー対応にしてみましょう。

【注意】Candy Rock StarはUnity Pro向けのプロジェクトのため、Unity Freeでは一部エフェクト等が表示されません。再生によるプレビューもいろいろおかしな動きをしますがそんなもんということで諦めてください:)

以下のページから、プロジェクト一式を落としてきて、unitychan-crs-master.zipを展開します。

ユニティちゃんライブステージ! -Candy Rock Star-
http://unity-chan.com/download/releaseNote.php?id=CandyRockStar

Unityを起動し、File->Open Projectから、展開したunitychan-crs-masterを選択し、プロジェクトが開き終わるまでしばらく待ちましょう。開くのが終わったら、Scenes->Mainのシーンを開き、おもむろに再生します。

前節を参考に、Dive SDKをImportしてください。

unity-crs3.png

つづけて、双眼用カメラを設定しましょう。Candy Rock StarはカメラをStage Directorのプロパティとして指定します。

指定が終わったらBuild & Runを実行してください。ちょっと画面が壊れたりしているかもしれませんが、ユニティちゃんが歌って踊ってくれたら成功です!

unity-crs4.png

◯【Cコース】MMD4Mecanim+ドロイド君コース

3つ目はMMDモデルを召還するコースです。MecanimというのはUnity4で実装されたアニメーションシステムで、MMDモデルデータ(pmx)とモーションデータ(vmd)をMecanimに対応した形式に変換してくれるMMD4Mecanim(nora氏作成)というツールを用いる方式となります。

MMD4MecanimはNora氏の以下のページからMMD4Mecanim_Beta_20141213.zipを、
http://stereoarts.jp/
モデルはgisupeke氏のBowlRoll:ドロイド君を、
https://bowlroll.net/file/37398
モーションはsusuki氏のBowlRoll:走歩ス3.0をお借りしてきます。
http://www.nicovideo.jp/watch/sm21263509
それぞれ同梱されているReadmeをよく読んで、記載されている規約を守った使い方をするよう注意してください。

MMD4Mecanimを使ってドロイド君をUnityにお迎えするまでは、MMD4Mecanimの同梱されているマニュアルに今回はお任せし、以下の通りの簡易なメモで省略させていただきます。(そのうちちゃんとしますすいません...)

・Unityを開いて、適当に「Droid」という名前でシーンを保存します。
・MMD4Mecanim.unitypackageをダブルクリックし、MMD4Mecanim一式をImportします。
・ドロイド君と走歩ス3.0をフォルダごとUnityのProjectビュー内、Assets直下にD&Dし、コピーします。モーションデータは一部でも問題ありません。
・ドロイド君>droid.MMD4Mecanimを選択し、PMX2FBXタブのVMDという欄にVMDを設定します。胴体がおっきなドロイド君では少々変なモーションになってしまうかもしれませんが、今回そのへんは深く気にしないことにしましょう。
・ドロイド君のフォルダ配下に青いキューブができていたら変換に成功しています。
droid-01.png
・続けてMecanimアニメーションのセットアップです。Create->Animatrion Controllerを選択、名前はdroidmoveとします。droidmoveをダブルクリックしてAnimatorビューが開いたら、ドロイド君>doroid配下のモーションをD&Dします。
・Animatorビューで忘れずにsaveした後、ドロイド君をHierarchyに配置し、droidmove Animation ControlllerをD&Dで設定します。
・再生してテクテクドロイド君が歩いたり走ったりしてどっかにいっちゃったらひとまず成功です。

・続けて、Dive SDKの双眼カメラをセットします。Importと設定は前節を参照ください。
droid-02.png
・ドロイド君がかなり遠い位置を歩いてさみしいので、少しMecanimをいじってみましょう。Assetsの変換した後のdoroidを選択し、Animationタグを選択、フレーム数が1800(30fpsで60sec.)なのを300ぐらいに落とします。忘れずにApplyを実行してください。
droid-03.png
・そしてAnimatrion Controllerで当該モーションを2つセットアップし、右クリック->Make Transitionでお互いに矢印がむくように設定し、「モーションが終わったら遷移先のモーションを実行する」ようにします。
droid-04.png
・あとから実行されるモーションを選択し、Speedを-1に設定します。ビデオの巻き戻しのように後ろ移動を意味します。
・モーションによって適切な座標が変わりますが、Dive_CameraのPositionを1, 0.5, 5ぐらいにします。
・なんだかよく分からないけど自分の目の前を歩いて往復してくれるドロイド君になったらだいたい成功です。

droid-05.png

他のモデルやモーションに切り替えたり、Mecanimのフラグをスライドマグネットトリガでいじったりする側に挑戦するのも良いと思います。

◯Diveスプラッシュスクリーンほか

OpenDive SDKの利用規約として、アプリ起動時にスプラッシュスクリーンのシーンを足してくださいという旨が書かれています。
dive-splash.png
(個人的にクローズドな環境で楽しむ分には大丈夫だとは思いますが)どこかGoogle Playにアップロードするなど広く公開する際には、MMD関連のモデル・モーション・楽曲データ等含め、利用したパッケージ・アセットの利用規約はよく確認した上でそれぞれ従うように注意してください。

コメントする