Tutti Lab

元シリコンバレー在住のおっさん技術者、モバイルVRアプリ開発に挑戦中

CardboardでVRアプリを作ってみる(2)

はじめに

CardboardでモバイルVRを作ってみる、ということで、前回はまずCardboardのインストールと、デモシーンをiOS/Androidで動かす、というところまでやってみました。今回は、このデモシーンに背景やキャラクターを配置し、FPSゲームっぽい画面を実現したいと思います。

f:id:tuti107:20160321102451p:plain

CardboardでVRアプリを作ってみる(全体構成)

第1回(Cardboardのビルド)

第2回(シーンを構成)【今回】

第3回(敵を動かす)

第4回(敵を倒す)

第5回(敵を出現させる)

第6回(ゲームオーバーとコンティニュー処理)

背景となるアセットのインポート

Unity Asset Storeより、Dangeon Creater KIT LITEという無料のアセットをダウンロードし、インポートします。このアセットは、その名の通りダンジョンを簡単に生成するためのアセットです。有料版($15)には、本無料版に含まれる3Dモデル・プレファブの他、よりリッチなダンジョンを生成するための様々なオブジェクトが含まれているようです(私は試しておりません)

アセットのインポートが完了したら、Assets/Dangeon Creater KIT LITE/Prefabs/Medium Room 2.prefabをシーンへドラッグ&ドロップして設置します(適当な場所でよいです)。

f:id:tuti107:20160322133315p:plain

なんだかかなり明るいですが、かなり本格的なダンジョンがシーンに配置されました。再生ボタンを押して、エディタ上で動作確認をしてみると、、

f:id:tuti107:20160322134236p:plain

前回のデモシーンと比べ、これだけでかなりゲームっぽくなりました。

次に、今は単色でのっぺらな感じの空を変更してみます。3 Skyboxes 2というアセットをダウンロード・インポートします。インポートが完了したら、Window→Lightingを選択し、表示されたポップアップのSkyboxに、インポートしたマテリアルBlueGreenNebularをセットします(Skybox右側の◎をクリックすると一覧が表示されるので、そこからBlueGreenNebularを選択します)。

f:id:tuti107:20160322142953p:plain

次にカメラの設定を変更します。Cardboardのデモシーンのカメラは濃い青色で背景をクリアするように設定されているため、これを変更し、先ほど設定したSkyboxで背景をクリアするように変更します。Hierarchy(デフォルトで画面左側)からCardboardMain→Head→Main Cameraを選択し、インスペクタ(デフォルトで画面右側)のCamera→Clear FlagsをSolid ColorからSkyboxに変更してください。 

f:id:tuti107:20160322143345p:plain

再生ボタンを押すと、以下のように空がかっこいい感じで表示されるようになります。

f:id:tuti107:20160322143705p:plain

敵キャラクタを試し配置

次に敵キャラクタとなるスケルトンをシーンに配置してみます。Fantasy Monster - Skeletonをダウンロード・インポートします。インポート後、Assets/FantasyMonster/Skeleton/Character/Skeleton@Skin.FBXをシーンにドラッグ&ドロップします。ここで、先に配置したMedium Room 2と、このSkeleton@Skin、及びCardboard Mainの位置と大きさを以下のように調整します。

  • Medium Room 2は、Tranform→Positionを(X,Y, Z)=(0, 0, -6)
  • Skeleton@Skinは、Transform→Positionを(X, Y, Z)=(0, 0.2, -8)に、Scaleを(X, Y, Z)=(10, 10, 10)
  • Cardboard MainのTransform→Rotationを(X, Y, Z)=(0, 180, 0)

この状態で再生ボタンを押すと、それぞれの位置が調整され、以下のような表示となります。f:id:tuti107:20160322145930p:plain

なおこのままだと敵キャラクタが棒立ちした状態であまりかっこよくないので、アニメーションするようにしてみます。まずはProject→Assetsにて右クリックし、Create→Folderを選択して適当なフォルダを生成します(tutti/animという名前にしました)。次にこの生成したフォルダ上で右クリックし、Create→Animation Controllerを選択して、Animation Controllerを生成します(SkeletonAnimController.controllerという名前にしました)。

f:id:tuti107:20160322152221p:plain

ここで生成したSkeletonAnimController.controllerをダブルクリックすると、アニメーションコントローラのエディット画面が表示されます。

f:id:tuti107:20160322153345p:plain

このエディット画面内(濃い灰色の方眼紙状の部分)にて右クリック→Create State→Emptyを選択してStateを生成します。この生成したState(オレンジ色)をクリックするとインスペクタにこのStateの情報が現れますので、最上部のNew StateとなっているテキストフィールドをIdleに変更、MotionをIdleに変更(Motion右側の◎をクリックし、一覧よりIdleを選択)します。

f:id:tuti107:20160322153802p:plain

これで、このアニメーションコントローラは、開始後Idle状態に遷移し、Motionで指定したIdleのアニメーションを行うよう、振る舞うようになります。早速このアニメーションコントローラを、先ほど棒立ちとなっていたスケルトンに設定してみます。HierarchyよりSkeleton@Skinを選択し、インスペクタのAnimator→ControllerをSkeletonAnimControllerにします。

f:id:tuti107:20160322154103p:plain

この状態で再生すると、一度だけブラブラ周りを見回すようなアニメーションをするものの、その後ピタリと止まってしまいます。そこでこのIdleアニメーションのループ設定を変更してみます。Assets→Fantasy Monster→Skeleton→Anim→Skeleton@Idle.FBXを選択し、インスペクタにてLoop Timeにチェックを入れます。

f:id:tuti107:20160322154401p:plain

この状態で再生すると、

f:id:tuti107:20160322154528p:plain

無事アニメーションを繰り返してくれるようになりました。

まとめ

今回は、前回作成したCardboardデモシーンに、様々なアセットを配置し、ゲームっぽい画面を構成してみました。Asset Storeでは多数の有用なアセットが提供されており、わずかな手間で本格的なゲームシーンを構成することが可能です。

次回は、ただ立ち止まってブラブラしている敵キャラクターを、主人公を狙って移動・攻撃するように動かしてみます。