ぎんさんとゲームと映像と...

ゲームデザイナーによるUE4,5と映像技術ブログ

【UE5】MetaHuman Animatorを使ってみる

最近追加されたUE5の新機能を使ってみたので備忘録として。

プラグインを有効化

エディタのプラグインからMetaHumanを有効にしましょう。

チェックを入れたら一度UE5を再起動してください。

必要なものを追加していく

・キャプチャソースを追加

中身を開き、キャプチャーソースタイプをLive Link Face Archivesに変更

Storage Pathには、Live Link Faceアプリで撮影した動画のファイルを選択します。

ツールからキャプチャマネージャーを追加します。

キャプチャーソースを選択することで、追加した動画がフッテージを取り込むという欄に表示されていると思います。(自分の顔なので隠してます)

その後、動画ファイルをクリックしたらキューに追加します。

選択すると右側のインポートボタンが押せるようになっていると思うので、インポートしてください。

できたら一度閉じて、MetaHumanIdentityを追加します。

ファイルを開き、コンポーネントを作成→フッテージから追加している動画を選択します。

動画を読み込めた後は、下側にあるタイムラインを動かし、フェイシャルのデフォルトポーズを選んでいきます。以下の注意点に気を付けながら選んでください。

◆注意点

顔が正面を向いている状態のとき

唇は閉じている状態

まっすぐ前を向いている状態

以上を確認したら+ボタンを選択します。

+ボタンを選択した後は、動画の顔に緑のマーカーが追加されたのではないでしょうか。

では、上のほうにあるMetaHuman Identityの解決を選択します。

選択し終わると、真ん中のほうにあるA  B を切り替えることで、実際の映像・Meshと切り替えることが可能になります。

更にBの右側にある3つあるボタンを切り替えることにより、見比べることができます。

プロパティからフェイシャルをあてたいモデルのボディを選択してください。

次にメッシュをMetaHumanに変換します。

左の追加から歯のポーズを追加します。

歯が映らないフェイシャルなら要らなさそう..?今回は調整の部分は省きます。

パフォーマンスの準備を押します。PCのスペックによると思いますが、結構かかります!もしかしたらクラッシュする可能性もあるので保存してから押しましょう!

終了したらMetahumanのパフォーマンスを作成します。

ファイルを開き、Footage Capture DataとMetahuman identityに先ほど作成したのを割り当てる。

詳細をスクロールしていき、Start Frame to ProcessとEndで開始位置と終了位置を指定します。これがフェイシャルアニメーションの時間になります。

設定ができたら左上にあるプロセスを押します。

おそらくアニメーションが再生できているようになっているので、問題がなければアニメーションとして出力するために、エクスポートしましょう。

作成できたアニメーションを再生してみます。

動いてますね!

Metahumanのモデルに適用してみた。

坊主だと違和感ありましたが、自然なモデルだと違和感なくなりましたね

 

【UE5】バーチャルカメラとシーケンサーの応用

前回の記事

gingamedev.hatenablog.com

さて、前回でバーチャルカメラを有効化することができたので、早速シーケンサーでリアルな映像を作ってみましょう!......どうやって使うの?

シーケンサーへの使い方

Take Recorderを追加

答えは簡単。ウィンドウからシネマティクスを選び、Take Recorderを追加します。

Take Recorderのソースから前回追加したVcamActor_Recordを選択します。

これで右上の録画ボタンが押せるようになっているはずなので、録画してみましょう。

Tips

なんかカメラがどっか違うところに飛んで行った!という方は、レイアウトを2画面にして、カメラを指定の場所に移動させてください。

また僕の環境ではスマホのカバーが邪魔して、カメラがドラゴンボールくらい吹っ飛ばされたので、挙動が怪しい方はそちらも確認してみてください。

シーケンスファイルの場所

作成したシーケンスファイルは、Cinematicsというフォルダに格納されています。

またTake Recorderの左上にある、このボタンからでも確認することができます。

予め作っていたシーケンサーで、直接カメラを録画したいんだけどという方については、その右側にあるアイコンからプルダウンで指定したいシーケンサーファイルを選びましょう。

その場合、録画ボタンを押す度に上書きされてしまうので注意。

カメラのレンズや被写界深度入れたい

VcamActorを選択して、詳細をスクロールしていきましょう。

ありました。こちらから設定していきましょう。VcamActorなにそれ!こわい!という方も、CineCameraActorとほぼ中身は同じなのでコワクナイヨ

カメラに移動を追加したい

手持ちでカメラの向きを追加するのはできた。でも歩かせたいんだよねという方いますよね。部屋の中をスマホをもって走り回るのは現実的ではないので、録画したあとに処理を追加します。

録画したファイルを開き、VcamActor_Recordをダブルクリックして、さらに階層を開いていきます。

なんか編集できない!....あわてずに鍵マークが右側にあるので外しましょう。

Transformを右クリックし、加算を選択します。

あとは追加したいタイミングで、キーフレームを入力していけば終了です。

POV視点って映像的には時間を盗めないから難しい手法だよなぁ  ゥ─σ(・´-・`*)─ン…

その辺の映像学的な話はまた今度にしよう。

【UE5】バーチャルカメラの使い方

お久しぶりです。前回の記事が2018年という事に驚きましたが、そんなことは置いておいて、今回はバーチャルカメラについて解説していこうと思います。

バーチャルカメラとは

UE5のバーチャルカメラは、モバイル端末を使用してUE5内のカメラをリアルタイムに制御することができる機能です。これにより、POV視点や手持ち感のある映像制作が簡単に行えます。

実際にテストで作ってみた映像がこちらです。

youtube.com

有効にするために必要なこと

Unreal Remote2 アプリ

 →こちらは各スマホのストアから無料でDL可能です。

DLができたらUE5エディタのプラグインを有効にしていきます。

・VirtualCamera

・Virtual Production Utilities

・Live Link

・Remote Control API

・Remote Session

Apple ARkit

プラグインを有効化したら一度UE5を再起動してください。

スマホとPCを連動させる

前提として接続しているPCとスマホは同じネットワークを使用する必要があります。

IPアドレスの確認については、コマンドプロンプトからipconfigコマンドを使用して調べちゃいましょう。

 

プロジェクト設定に進みます。
1. プラグインを選択し、UDPメッセージングを選択します。
2. ユニキャストエンドポイントを探し、末尾の「:0」以外の部分を削除し、IPアドレスを入力します。例えば、xxx.xxx.xx.xxx:0 のような形式です。
3. 入力が完了したら、スマホ側には「:0」を除いたIPアドレスを入力します。
コネクトはまだタップしなくて良いです。

バーチャルなカメラを配置していく

ここからはUE5上の作業になります。

Vcamアクタを配置します。これがスマホで操作することになるカメラです。

配置が終わったらウィンドウからLive Linkを表示します。

ここまできたらスマホUnreal Remoteアプリのコネクトをタップします。

接続ができたらLiveLinkのソースを選択してメッセージパスソースを確認します。

↑ソースタイプとソースマシンに何も表示されていなければ接続はうまくいっていないので今までの手順を確認しましょう。

 

追加できたら先ほど追加したVcamActorをアウトライナーから選択します。

詳細のところからLive link Subjectを選択して、Vcam1になっている部分をCamera Transformに変更します。

以上の設定が終わればスマホを動かすだけで画面がリアルタイムに動くのではないでしょうか。

稀にLive Link Subjectを押しても、CameraTransformが出ない場合があります。

その時はメッセージパスソースを削除して、再度追加してみてください。

バーチャルカメラを一旦止めておきたい場合は、Enabledのチェックを外しましょう。

 

シーケンサーの応用編について

gingamedev.hatenablog.com

映像知識0な僕が映画技法を学ぶためにした3つのこと

あるUE4の勉強会で映画基礎について登壇したときの質疑応答で「どういうところから勉強をしたのでしょうか?」という質問を頂きました。

そうなんです。以外とゲーム開発に携わる方は映像の知識が出回っていません。

そこで僕がした3つのことを説明します。これから勉強をしたいと思う方へ参考になればと思います。

本を読む

これが一番多くの知識を得ることが出来るでしょう。とはいえ、「映画技法 本」で検索をするとかなりの専門書がヒットします。もうその時点でどれを読めばいいのか分からないという方がいるでしょう。

そこで今回は僕が参考にさせてもらった書籍を2つほど紹介しようと思います。

www.borndigital.co.jp

映画のシーンの構図を画像付きで説明しています。

まずはこの本を読んで色々な撮り方を学んでいくのがいいと思います。

filmart.co.jp

様々なカメラワークを説明している本です。

この本を読む前にある程度映画を観ておかないと理解がしにくいと思います。

もちろん、これ以外にも良い本はありますし、僕も持っていますが一先ずはこの2冊だけで問題ないです。

またこれに関わらず、専門書等で読んだときに、この本が言ってるんだからこれが正解だ!とはならない様に気を付けましょう。あくまで参考程度が良いです。

サイトを調べる

これも有効です。多くの方々がブログ等に映画技法のことを書いています。そういったサイトを見て勉強するのもいいと思います。

ブログ以外ではどうか。...YouTubeを使いましょう。ゲームエンジンを触ったことがある人なら分かると思いますが日本語のドキュメントが少ないので英語で検索をかけるしかない。そう、まさにそれです。英語で映画技法と検索をかけましょう。英語が分からない方でも動画での説明ならまぁ少なくとも60%は理解できるはずです。

映画を観る

やはり映画を観ないことにはそもそも本を読んでも理解がしづらいでしょう。本では映画のワンシーンを元に説明しています。せめてその映画は観ておきたいところですね。

 

Q.忙しくて映画を観る時間がありません!

A.映画はたしかに1時間30分~長くて2時間30分などあります。学生ならともかく社会人にはとても時間が足りない。という方はドラマやアニメを見ましょう。ドラマやアニメにおいても技法は使われているので、時間が足りない場合はそちらでも問題無いです。

まとめ

以上が僕が行った3つのことです。恐らく当たり前じゃない?と思った方もいると思いますが、映画の専門や大学に通ってない人からすればどう勉強すればいいかわからない事が多いので今回纏めました。

この3つ以外にもやってきたことはありますが、あくまでこれはそういった専門の方が近くにいればの話ですが詳しい人に聞くということも有効的です。

そういった技法について分からないなぁ等あれば答えられる範囲はツイッターで連絡くれれば答えますので気軽にどうぞ。

少しでもこれから勉強したいと思っている方々に役に立てばと思います。

 

-2023年追記-

意外と見てくれている方が多くて驚き。今はゲーム開発の現場において、カットシーンを担当することが多くなってきたので、勉強しておいてよかったぁと思っています。

またゲーム開発的な視点からの映像知識や僕なりの知識等を纏められたらなぁと思います。

ゲームなど映像で使われるイマジナリーラインについて

よくイマジナリーラインを超えてはいけないという言葉を

耳にする方も多いと思います。

 

そもそもイマジナリーラインがなんぞやという方に説明します(´◉◞౪◟◉)

あ、僕はゲーム会社に勤務するしがないゲームデザイナーです..。

イマジナリーラインについて

例としてよく挙げられていますがここでも二人の会話シーンで説明します。

f:id:Gingamedev:20180715193211p:plain

AさんとBさんを結ぶ真ん中の線をイマジナリーラインと言います。この線の片側どちらかにカメラを置いたらカメラを切り替えてもこの線を超えてはいけないという法則です。

この画像だと右側にカメラがあるのでこの線の反対側(左側)にカメラを持ってはいけません。

今回は2人ですが3人など複数の場合にも言えることです。

では、実際の映画ではどうなっているのか

こちらの18秒からの会話シーンの映像を見てもわかる通りカメラはイマジナリーラインを超えてはいません。

では人物だけイマジナリーラインが存在するのか?

それは間違いで被写体が物でもこの法則を使います。

被写体が物の場合

こちらも4:12秒から始まる黒電話と人物とでイマジナリーラインが存在しています。

なぜ超えてはいけないのか

超えてしまうとAさんとBさんとの位置関係と方向性が逆転してしまうため

視聴者側はAさんとBさんが瞬間移動したように感じるからです。

イマジナリーラインは超えてもいいのか

個人的に超えないように作るのが原則だと考えています。

ただ、超えても問題はないといえます。しかし、超えてしまうと人物の位置関係が

わかりづらくなるため超えるなら違和感のないように見せる作りにしなければいけません。

 ゲーム「The Order:1886」の1:52秒でカメラを回り込ませる方法で超えています。

このような方法も存在しますがまだまだ他にも超える方法はあります。

イマジナリーラインを超えるということは何かしらの変化(例:物語における人物の立場が変わった等)という意味で使われます。そういう意図を理解した上で故意にラインを超えるなら問題ないと思います。

ラインを超えている作品

イマジナリーラインを実際に超えている作品はというと「エスター」です。

エスターというこの女の子は不気味、裏があるというような存在として

物語では扱われています。そのことを意図的に伝えているシーンです('ω')

ゲームでは

ゲームでもNPCに話しかけたときなどの会話イベントで使われることが多いです。

二ノ国2でも4:36から5:32秒での会話イベントでラインが使用されています。

最近のゲームでは、シームレスにゲーム画面に遷移することが多いためカメラを回り込ませることが簡単でイマジナリーラインを超えることが安易になっています。

シームレスすぎるからこそ難しいときもありますが....。

【UE4】シーケンサー アニメーションブレンディングを使ってみる

4.15がリリースされました!と同時期にぷちコンも発表されました!

そんなわけで追加されていたアニメーションブレンディング触ってみました。

www.unrealengine.com

 

今までキャラクターをシーケンサー上で歩かせた場合

walk→idleに切り替わるときパッと切り替わってしまいました。

それが直せるってすごーーい!!

 

【1】まずは適当にキャラクターを歩かせて作っていきます。

※↓の場合、1秒間歩いてidle状態に戻ります。

f:id:Gingamedev:20170303015126j:plain

このままだと、いつものようにパッと切り替わってしまいます。↓

www.youtube.com

【2】idleアニメーションをwalkアニメーションと少し被せて

左側にあるWeight値を0にします。

f:id:Gingamedev:20170303015407j:plain

【3】今度は、シークバーをtransformと重なるようにしてWeight値を1にします。

f:id:Gingamedev:20170303015456j:plain

【4】今度は、シークバーを先ほどweightを0にしたところに持っていきます。

そして、walkアニメーションのweight値を1にします。

f:id:Gingamedev:20170303015559j:plain

【5】シークバーを先ほど1にしたところに合わせて

walkアニメーションの値を0にします。

f:id:Gingamedev:20170303015715j:plain

 

これで先ほどよりパッと切り替わることがなくなったと思います。

少しおかしいですが調整すれば直るはずです。

www.youtube.com

そして吹っ飛ぶグレイマン

【UE4】FPSゲームによくある懐中電灯のラグ

どうも、お久しぶりです。

先日、バイオ7と一緒にPS4も買ってしまいました。

わーい!すごーい!たーのしーけど凄い形相をしたオバさんフレンズに会いました。

そんな事は、置いておいて。

 

FPSゲームによくある懐中電灯のラグの作り方です。

先ほどなぜバイオ7を出したのかというと非VRモードでは、カメラを動かすと

懐中電灯の光が若干遅れます。

 

それです。

 

【1】まずは、懐中電灯用のスポットライトを追加しましょう。

f:id:Gingamedev:20170217022044j:plain

【2】SpringArmをAdd Componentから追加しましょう。

追加したらスポットライトと親子付けします。

f:id:Gingamedev:20170217022226p:plain

【3】SpringArmの詳細を見ます。

Camera CollisionのところでDo Collision Testからチェックを外します。

(外さないと懐中電灯の光が壁に埋もれる)

後は、Lagのところにチェックを入れましょう。

f:id:Gingamedev:20170217022505p:plain

【4】忘れてはいけない。

CameraにSpringArmを親子付けします。

(上下にカメラを移動させたときにライトがついてこない)

f:id:Gingamedev:20170217022643j:plain

恐らくこれで実装できると思います。

 

懐中電灯のリングについては、こちらで書きましたので気になる方は、どうぞ。

gingamedev.hatenablog.com