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

この度、サイバーエージェントグループで、ゲーム関連の最新技術ばかりを扱う新しい組織「ゲーム技術戦略室」を立ち上げました。

宣伝も兼ねてブログを書かせていただきたいと思います。

ゲーム技術戦略室では、UnrealEngine・Amazon Lumberyard・CryEngineといったゲームエンジンだったり、Oculus Rift・HTC Vive・Play Station VRといったVRの話だったり、さらにはAppleTV・AppleWatch・ChromeCast・Leap Motion・Theta Sといったガジェット系などなど、色んな最新技術に対してガツガツ攻めていきます。

技術戦略室で取り組んだ調査や制作物に関しては、下記の公式ブログにて展開していきますので、ブックマークをお願いいたします！

TechnoloGEEK ～ゲーム技術戦略室公式ブログ～

さて、前置きはこのくらいにして、実際に技術に触れていきたいと思います。

今回は”UnrealEngine+MMD+VR”を題材にします。

Unreal Engineに触れてみる

　Unreal Engineという統合開発環境をご存知ですか？昨年７月に発表された、「FINAL FANTASY VII REMAKE」がUnreal Engine4を採用したというニュースを耳にした方も多いのではないでしょうか？このニュースがUnreal Engineのランチャーメニューに表示されていたのを見て私たちも心が踊りました。また、Unreal Engineは昨年３月より誰でも無料で利用することが可能となりました。その影響により、企業だけでなく多くの一般ユーザによるUnreal Engineを使った開発が活発になったように思えます。最近では「UNREAL FEST」や「Unreal Engine MeetUp」などUnreal Engineに詳しい方たちによる講演が各地で行われています。

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

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

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

モーション名	作者
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をインストールして下さい。）

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」フォルダを作って中に入れます。

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

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

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

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

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

　無事にインポートできると、スケルタルメッシュのアニメーションタブを開いたときに、アセットブラウザウィンドウ内でアニメーションシーケンスがある事を確認できます（スクリーンショットでは４つのモーションデータをインポートしています）。これを使ってキャラクターの動きを制御していきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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