こんにちは！こんばんは！
プログラム1課の若尾です。
はやいものでもう12月ですね。寒いですね～。
こう寒いと顔がむくんじゃいますよね。そこで顔の体操をしてみたのですが、どんな表情がいいのかピンと来ない日々。
そうだ、ゲームキャラクターの豊かな表情変化を真似してみよう！
そこで今回はUE5でゲームキャラクターのフェイシャルアニメーションをじっくり確認するのに役立つ方法を記事にしたいと思います。
今回は下記環境にて行いました。
OS : Windows11
Unreal Engine 5.0.2
CPU:Intel(R)Core(TM)i7-12700
GPU:NVIDIA GeForce RTX 3070
実装手順
下記をそれぞれ実装していきます。
- モデルの用意
- フェイシャルアニメーション確認カメラアタッチ用ソケット作成
- カメラの生成と調整
- UMGを使ってゲーム画面に合成
まずゲームカメラをキャラクターの顔にアタッチして、常に顔がアップで見られるように配置します。そして、それがデバッグステージや通常のステージのカメラ画面でも確認できるように、UMGで顔カメラを合成します。バラエティー番組のパネラーのような感じですね！
モデルの用意
今回は例としてプロジェクトとモデルを用意して実演します。
EpicGamesLauncherからUE5を起動して新しいプロジェクトを作成します。
Blankのプロジェクトで良いです。
作成後、UE5を一旦閉じます。EpicGamesLauncherのUnrealEngine→ライブラリに戻り、マイダウンロードから事前に用意していたParagon:Narbashを先ほど作成したプロジェクトに追加します。
こちらのアセットはEpicGames社が無料で公開しているUnrealEngineマーケットプレイスのアセットです。詳しくは下記をご覧ください。
今回はこのアセットに含まれているMapのAnimationTestMapレベルを使って実演していきます。
カメラアタッチ用ソケット作成
顔カメラには常に顔をアップで映してもらいたいため、スケルタルメッシュのソケットにアタッチすることで、首の向きが変わっても顔が映り表情がわかるようにします。
それではNarbashに最適な顔カメラ位置を探って作っていきます。
コンテンツブラウザからNarbash_Skeleton(スケルトン)を開きます。
スケルトンツリーを見て、首や顔に該当する場所を探します。いろいろあってこの一覧を見ているだけでも楽しいですね😊
“head”というスケルトンがありましたね。これがちょうど良さそうです。
ではここに、ソケットを作ってみましょう。名前を”FaceCamera”としました。
ソケットの位置(Location)を調整します。プレビュー画面を見ながら、顔とちょっと離した位置に置きます。
ゲーム画面で顔カメラ確認・調整
それでは、プレイビューで顔カメラがどのように映るか確認していきます。
NarbashPlayerCharacter(ブループリントクラス)を開いて、イベントグラフを開きます。
下図のように、BeginPlayにて顔カメラ用のCameraActorをスポーンしてそれをMeshのFaceCameraソケットにアタッチして、最後に顔カメラをゲームのメインカメラとして設定します。アタッチ位置はソケットと同一にしたいため、RuleをSnaptoTargetにします。
実行すると
うーん、モヒカンしか映らないですね。
これは回転(Rotation)の調整が必要そうです。
実際にプレイ中に編集して調整してみます。
プレイを一時停止して、アウトライナーからNarbashPlayerCharacterにアタッチされぶら下がっているCameraActorを選択し、トランスフォーム→回転を調整してみます。
今回のNarbashではこの値が良さそうですね。
Xを90.0,Zを270.0としました。(Pitch=0.000000,Yaw=270.000000,Roll=90.000000)
それではこの値を再度Narbash_Skeleton(スケルトン)を開いてFaceCameraソケットの値に設定します。
保存したら、再度プレイビュー実行してみます。
いいですね。いきいきしてますね😄
フェイスカメラ用UMG作成
このままでも十分表情筋のトレーニングの参考にできそうですが、デバッグ目的としても使えるように、通常のゲーム画面と今回の顔カメラが同時に移せるようにしましょう。ゲーム画面右上に顔カメラ映像を重ねて表示するようにしてみます。
UMGの設定手順はこちらです。
- 描画ターゲット(TextureRenderTarget2D)をコンテンツブラウザに作成する。
- そこからマテリアルを作成して、UI用にする。
- UMGを作成して2.で作成したマテリアルを映す。
- CanvasPanelを追加する
- CanvasPanelの子要素としてImageを追加する
- Imageのアピアランス→Brush→Imageを 2.で作成したマテリアルにする。
- アンカーを右上にして、サイズを調整する。このサイズがゲーム画面に追加される顔カメラ画像のサイズになるのでプレイしながら調整するとよいでしょう。
プレイビューで確認
UMGの作成ができたら、NarbashPlayerCharacter(ブループリントクラス)のBeginPlayで確認してみましょう。今度はCameraActorではなくSceneCapture2Dを生成し、TextureRenderTarget2Dを設定します。それを先ほど同様にMeshのFaceCameraソケットにアタッチします。最後に作成したUMGを生成してメインカメラに追加・表示することで確認できます。
実行すると
ゲーム画面に顔カメラ画面を重ねて表示することが無事できました。
デバッグ用として実際に用いる場合は、今回作成したBeginPlayからの命令群をデバッグメニューや特定の操作によって呼び出す形式にするとよいでしょう。
是非皆さんも表情筋を鍛えながらゲーム制作していきましょう！
おまけ
ロジカルビー子とツーショット。
参考文献
【免責事項】
本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。
