VRで美少女を踊らせてみた（仮）

2016年05月30日 11:55:00
テクノロジー
VR Inside

※本記事はCyber Agent 公式エンジニアブログの中からVRに関連する技術記事を寄稿いただいております。

kokomin_01

Unreal Engineでここみんを踊らせてみる

「ここみん」とは、Amebaによって運営されているスマートフォン向けソーシャルゲーム「ガールフレンド（仮）」に登場する「椎名心実」というキャラクターです。

このように、Unreal Engineは簡単にVRプレビューができますし、MMDのモデルを使うことによって好きなキャラクターを動かすことも容易です。マーケットプレイスで販売されているアセットの数も徐々に増えてきているので、プロダクトの開発速度も加速していくことでしょう。

Unreal Engineでここみんを操作するためにやったこと

今回、Unreal EngineにMMDモデルを読み込むために利用したものとしては、IM４UプラグインによるMMDモデルインポート、MMDとMMDBridgeを使ったモーションデータの出力となります。ここからは実際に行った手順をスクリーンショットと併せて説明していきます。

開発環境

Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz

実装RAM 16.0GB

64ビットオペレーティングシステム

Windows 8.1 Pro

Unreal Engine 4.10.4

Oculus Rift DK2

Unreal Engineの新規プロジェクトにて利用したテンプレート：Third Person

使用したモデルは下記書籍に収録されています。

kokomin_02

使用したモーションは下記の通りです。ありがとうございました。

モーション名	作者
H57_SO_女の子走り速め_s2500_p20.vmd	susuki様
歩行モーション_おんな_ゆっくり.vmd	ノラ様
11.やったぁ.vmd	おかっち様
rea_stand.vmd	あー、とり様
海自っぽい敬礼(海自）.vmd	McDuck<めぐみ>様
ようかい体操第一_配布用.vmd	jmccmy様

Unreal EngineでOculus Riftを使う前に

Unreal Engine4.10.4では、Oculus Runtimeのバージョンが0.8でなければVRプレビューを利用できませんでした。Oculus Runtime のインストール後はコンピュータを再起動しましょう。（※Unreal Engine4.11以降の場合は Oculus Runtimeのバージョンが0.8で動作しません。公式サイトより最新のRift Runtimeをインストールして下さい。）

kokomin_03

Unreal EngineでMMDモデルを読み込む

モデルインポートには、Unreal EngineにMMDモデルをインポートする時に便利なIM４Uプラグインを利用しました。こちらは、GitHubからアクセスすることができます。ご利用のUnreal Engineのバージョンに合ったプラグインを取得して下さい。

作者：bm9様

MIT License

https://github.com/bm9/IM4U/tree/4.10.X

ダウンロードしたIM４Uプラグインは、作成したUnreal Engineプロジェクトのフォルダ内に「Plugins」フォルダを作って中に入れます。

kokomin_04

KokominTest.uprojectを起動し、上部メニューの「編集＞Plugins」からIM４Uプラグインが有効になっているか確認します。チェック操作をした場合は、一度エディタを再起動して反映させます。

kokomin_05

kokomin_06

コンテンツブラウザ（ウィンドウ＞コンテンツブラウザ）を開き、お手持ちのMMDモデルデータをドラッグアンドドロップしてインポートします。MMDインポートオプションでは、「Import Morph Targets」、「Import Materials」、「Import Textures」にチェックを入れて「Import All」ボタンをクリックして下さい。

kokomin_07

スケルタルメッシュを開くと「メッシュに有効なスケルトンがありません。新しいスケルトンを作成しますか？」と表示されますが「はい」をクリックして問題ありません。シェーダーのコンパイルが終わるとモデルが表示されるはずです。

kokomin_08

kokomin_09

ここみんにモーションを付ける

ここまでの操作でモデルデータを読み込めましたが、まだ動作モーションが付いていないので歩いている動きなどを表現することができません。そこで、Unreal Engineでインポートしたモデルに適用可能なモーションデータを作っていきます。モーションデータの作成方法については「【MMDBridge】 VMD出力機能」という作者による投稿動画が参考になります。「元々人柱向けのプラグインのため、運が悪いと動かないこともあります」とも書かれているので、残念ながら確実に動作するという保証は無さそうです。

また、「Unreal Engine4でMMDモデルに表情を付ける方法」にて操作手順を記しているので必要であればご覧になられて下さい。無事にインポートできると、スケルタルメッシュのアニメーションタブを開いたときに、アセットブラウザウィンドウ内でアニメーションシーケンスがある事を確認できます（スクリーンショットでは４つのモーションデータをインポートしています）。これを使ってキャラクターの動きを制御していきます。

kokomin_10

ここみんの動作を制御する

歩行モーションを設定する

今回は歩行モーションの作成に、単一の入力値に基いてブレンドされる「ブレンドスペース１D」と呼ばれるアセットを使います。ブレンドスペース１Dを作成したいフォルダで下図のように選択して下さい。

kokomin_11

スケルトンを選択するように促されるので対象のスケルトンを選択します。

kokomin_12

ブレンドスペース１Dを開くと、中央下部にアニメーションシーケンスを配置できる一本の線が確認できます。赤い枠内にアニメーションシーケンスをドラッグアンドドロップして下さい。

kokomin_13

「椎名心実_待機_椎名心実_Skeleton2」を配置したのが下図になります。プレビュー中のここみんが動き始めました。

kokomin_14

次に、待機モーションをドラッグアンドドロップした場所から少し離した場所に、歩きモーションをドラッグアンドドロップします。すると、X軸を移動させることで自然に待機モーションから歩きモーションに切り替わっていくことが確認できると思います。

kokomin_15

最後に、歩きモーションをドラッグアンドドロップした場所から少し離した場所に、走りモーションをドラッグアンドドロップします。

kokomin_16

以上で歩行モーションの作成は完了です。

ジャンプモーションを設定する

ジャンプモーションは待機モーションと異なり、３つのアニメーションコンポジットに分割する必要があるので少し手間がかかります。まず、アニメーションコンポジットを作成したいコンテンツブラウザ上で右クリックして下図のように選択します。こちらもブレンドスペース1D同様に、スケルトンを選択するよう促されるので対象のスケルトンを選択しましょう。

kokomin_17

ここでは、JumpStartAnimComposite、JumpLoopAnimComposite、JumpEndAnimCompositとして３つ作成しておきました。まず、JumpStartAnimCompositeを開いてみると下図のような画面が表示されるので、赤い枠内に「椎名心実_ジャンプ_椎名心実_Skeleton2」をドラッグアンドドロップします。

kokomin_18

すると、ここみんがジャンプを開始します。しかし、JumpStartAnimCompositeにはジャンプを開始してから一番高い地点になるまでのモーションを設定したいので、開始時間と終了時間を設定してアニメーションシーケンスから切り取りましょう。上記スクリーンショットの赤い枠内に表示されているコンポジットトラックの上部分をクリックすると詳細ウィンドウが表示されます。この詳細ウィンドウで開始時間と終了時間を指定できるので、それぞれ「0.0」、「0.536」に設定しました（0.536秒の地点がジャンプしてから一番高い位置だったためです）。

kokomin_19

JumpLoopAnimCompositeにはジャンプ中の状態を設定したいので、開始時間と終了時間を共に「0.537」に設定しておきます。

kokomin_20

JumpEndAnimCompositにはジャンプ中からジャンプ終了までのモーションを設定したいので、開始時間と終了時間をそれぞれ「0.538」、「1.35」に設定しました。

kokomin_21

以上でアニメーションコンポジットの設定は完了です。次に、アニメーションブループリントを使ってここまで作成してきたアニメーションアセットを状態によって切り替えていきます。これにより、ここみんが動いていない時は待機モーションが実行されたり、空中にいる時はジャンプモーションが実行されたりといったことが可能となります。

アニメーションブループリントを設定する

アニメーションBP（ブループリント）はドキュメントによると、スケルタルメッシュのアニメーションを制御するグラフとのこと。アニメーションBPには「EventGraph」と「AnimGraph」という2つの主要コンポーネントがあり、この2つが連動して各フレームの最終アニメーションが作成されます。アニメーションBPを作成したいコンテンツブラウザ上で右クリックして下図のように選択します。

kokomin_22

対象のスケルトンを選択して生成されたアニメーションBPを開きましょう。

kokomin_23

下図の赤の枠で囲まれたノード（最終アニメーションポーズ）に流し込まれたアニメーションポーズをここみんがやってくれることになります。ですので、流し込むアニメーションポーズを条件によって切り替える必要があります。

kokomin_24

今回はステートマシーンを使ってキャラクターのアニメーションを切り替えていきます。アニムグラフタブ内のどこかで右クリックして「新規のステートマシーンを追加…」を選択します。

kokomin_25

生成されたステートマシーンノードを最終アニメーションポーズに接続し、ダブルクリックして「Kokomin State Machine」（名前は変更しました）を開きます。

kokomin_26

「Kokomin State Machine」内では、既に作成している「歩行モーション」、「ジャンプスタートモーション」、「ジャンプループモーション」、「ジャンプエンドモーション」の状態を作ります。これらの状態を条件によって切り替えることで、最終アニメーションポーズに最適なアニメーションポーズを流し込みます。「Kokomin State Machine」内のどこかで右クリックして「ステートを追加…」を選択します（名前には分かりやすいものを付けます）。

kokomin_27

生成された状態をダブルクリックで開くと、最終アニメーションポーズノードがあることを確認できます。最終アニメーションポーズに流し込まれたアニメーションポーズが、この状態から出力されるアニメーションポーズとなります。ステートの名前に「Wait/Walk/Run」と付けたので、歩行モーションアセットをアセットブラウザからドラッグアンドドロップして最終アニメーションポーズに接続します。

kokomin_28

「KokominBlendSpace1D」ノードには入力ピンがありますが、これが「KokominBlendSpace1D」を開いたときに表示されていた、アニメーションを滑らかに切り替える線のX軸の値です。入力する値をここみんの移動速度によって変化させたいので「Speed」という変数を作ります。変数はマイブループリントタブの変数項目で追加できます。

kokomin_29

Speedには値を代入していく必要があるのですが、今回はThirdPersonテンプレートを使っているので、「Mannequin＞Animations＞ThirdPerson_AnimBP」を参考にします。

kokomin_30

グレーマンアニメーションBPのイベントグラフタブを見ると、ここみんに必要な実装が載っているので全てコピーします（実際ステートマシーンもグレーマンアニメーションBPと同じように実装すれば問題ないです）。この時、「IsInAir?」という変数が無いので作っておきます。

kokomin_31

この状態で左上の保存とコンパイルを実行すると、プレビュー中のここみんが動き出します。まだジャンプの状態は作っていませんが、動作確認をしたいのでデフォルトのキャラクターとここみんを入れ替えてみます。コンテンツブラウザの「ThirdPersonBP＞Blueprints＞ThirdPersonCharacter」を開いて下さい。

kokomin_32

ビューポートタブを選択してグレーマンをクリックすると、自動的に詳細タブが開かれます。詳細タブ内の「Mesh」項目でスケルタルメッシュを設定できるので、作成したここみんのスケルタルメッシュを選択すると…

kokomin_33

表示されるキャラクターがここみんになりました！アニメーションが再生されていないようなので「Animation」項目の「Anim BluePrint Generated Class」で「KokominAnimBlueprint」を選択します。これでここみんが動き始めるはずです。

kokomin_34

ゲームをプレビューしてみます。うむ…良い。

kokomin_35

ただ、待機モーションから走りモーションまでの遷移が早過ぎるので、「KokominBlendSpace1D」のX軸範囲を修正します。これでモーション遷移の違和感が抑えられました。

kokomin_36

…と、完成した感が半端ないのですがジャンプの状態を作りましょう。作成したジャンプモーションアセットに対応した状態を作りたいので、「JumpStart」、「JumpLoop」、「JumpEnd」という３つの状態を作りました。

kokomin_37

まず「JumpStart」の設定です。アセットブラウザから「JumpStartAnimComposit」をドラッグアンドドロップして最終アニメーションポーズに繋ぎます。この時、デフォルトでループアニメーションのチェックが入っているのでチェックを取り除いておきます。これで設定は終わりです。同様の設定を「JumpLoop」、「JumpEnd」にも適用しておきます。

kokomin_38

次に作成したノードを線で繋がなければなりませんが、ジャンプという動作は歩行モーション中であればいつでも実行させたいので、「Wait/Walk/Run」ノードから「JumpStart」に繋ぎましょう。

kokomin_39

線を繋ぐとトランジションルール（遷移させるための条件）を付けることが出来ます。繋いだ線をダブルクリックして編集します。JumpStart状態には、ここみんが空中にいる時に遷移してほしいので、先ほど追加した「IsInAir?」を繋ぎましょう。

kokomin_40

次に、「JumpStart」と「JumpLoop」を繋ぎます。

kokomin_41

ここでは特に必要な条件がないので「Time Remaining」ノードを利用します。このノードを利用し、「JumpStartAnimComposit」の残り再生時間が0.1以下を切ったら「JumpLoopAnimComposit」に遷移するようにしました。「<」ノードは右クリックメニューで「<」と検索すると見つかります。また、ノードを整列する機能がありますので積極的に使っていきます！

kokomin_42