【UE4】グレイマンに足跡をつけてみる-入門編

皆様お久しぶりです、アンナプルナプランナーの吉田です。

今回はUE4でお馴染みのグレイマンに足跡をつけてみたいと思います。

なるべくわかりやすく画像多めでご説明させていただきますので、どうぞ最後までお付き合いますようよろしくお願いします。
また、説明が多少簡易的だったりしており本来の意味と違う部分もあるかとございますが、幅広い方に読んでもらうためご理解していただけると幸いです。

※この記事で使用しているUnreal EngineのVersionは4.21.2です。

Step0:下準備

それでは早速Unrealを立ち上げていきましょう。

このブログで使用させて頂いているUnreal EngineのVersionは4.21.2です。

EpicGamesLauncherから4.21.2を起動させましょう。
※ランチャーがない人はダウンロードしましょう。
※4.21.2をインストールしていない方は、ランチャーにてインストールしましょう。

起動させたら、新規プロジェクト作成項目から、「ThirdPerson」テンプレートを選択してプロジェクトを作成します。

起動が完了したら早速作業を開始しましょう！

Step1:Deferred Decal Materialで足跡を作成

さて、この記事のネックとなる「Deferred Decal」というマテリアルの機能をご紹介します。

デカールについての公式ドキュメント：デカールの基礎

簡単に言えばプロジェクターのような機能で、ものに色などを焼き付けるための機能です。

この機能を使って足跡をつけて行きたいと思います。

まずは足跡のテクスチャーが必要になります。
以下にテクスチャーをご用意いたしましたので、ダウンロードしていただいてご使用ください。

※足跡テクスチャーの作成方法につきましては、次回アップする「【UE4】グレイマンに足跡をつけてみる-応用編」にてご紹介予定です。

・左足用マスクテクスチャ

・右足用マスクテクスチャ

まずは、マテリアルを作成します。

ContentBrowser左上の「Add New」を押して、「Material」を選択し、マテリアルアセットを作成します。

作成したマテリアルアセットをダブルクリックしてマテリアルエディターを開きましょう。

開いたらまず行うこととして、このマテリアルはデカール用のマテリアルであるという設定を行います。
何も選択していない状態でDetailウィンドウ内の以下の項目を編集しましょう。

Material Domain:「Deferref Decal」
Blend Mode:「Translucent」
Decal Blend Mode:「DBuffer Translucent Color」

終わりましたらGraphウィンドウでマテリアルブループリントを書いていきたいと思います。

簡単に説明しますと、
Base Colorにつないでいるのは「Constant 3 Vector」ノードで、足跡の色を表しています。
Opacityにつないでいるのは「Texture Sample Parameter 2D」をベースに、
「Scalar Parameter」ノードと「Multiply」でかけ合わせたもので、
これは、テクスチャーの白い部分のみ型を切り抜きたいためにマスクとして使い、
Scalar Parameterは足跡の透明度を表しています。（Scalar ParameterのDefault Valueは0.5です）

ノードを作成しましたら保存して一旦マテリアルエディターは閉じます。

今度は、Content Browser上で作成したマテリアルを、右クリックして一番上にある「Create Material Instance」を選択します。
※この作業は２回行ってください。

作成した２つのマテリアルインスタンスを開き、片方のマテリアルインスタンス内のDetail内にある
「Parameter Group」→「Texture Parameter Values」内にあるマテリアルBPで作成した
TextureParameter2Dの名前のパラメーターのチェックボックスを入れてあげ、
右足のテクスチャーを入れてあげます。

２つ目のマテリアルインスタンスには左足用のテクスチャーを入れてあげます。

作成した２つのデカールマテリアルインスタンスを試しにビューポートで確認してみましょう。

ビューポートで確認するには、作成したマテリアルインスタンスを
コンテンツブラウザからビューポートにドラッグ＆ドロップで入れることができます。

これで足跡のデカールマテリアルの準備はできました。

次は足跡の位置を明示するために、グレイマンの骨にソケットを入れていきます。

Step2:グレイマンのSkeletonにSocketを入れる

グレイマンのSkeletonアセットに足跡を生成する座標の情報を仕込んでいきます。

UE4_Mannequin_SkeletonというSkeletonアセットをコンテンツブラウザから探して
ダブルクリックしてみましょう。

SkeletonEditorを開き、その中のSkeletonTreeウィンドウの検索ボックスに
「foot」と入力してみましょう。

出てきた骨・ソケットの中から「foot_l」という骨を選択し、
右クリック→「Add Socket」でソケットを追加しましょう。

すると、「foot_lSocket」という名前で「foot_l」にソケットがアタッチされます。

そのまま「foot_lSocket」を選択した状態でDetailウィンドウ内の
「RelativeLocation」と「RelativeRotation」を以下の値に変えましょう。

RelativeLocation:「X=-13.0,Y=7.0,Z=0.0」
RelativeRotation:「X=180.0,Y=180.0,Z=0.0」

「foot_r」という骨にも「foot_l」と同じ用に「Add Socket」をしてソケットを追加してやります。

そして同じ用にDetail内の以下の値を編集してあげます。

RelativeLocation:X=「13.0,Y=-7.0,Z=0.0」
RelativeRotation:X=「0.0,Y=0.0,Z=0.0」

ひとまずこれでグレイマンの足裏の座標を取るための下準備ができました。

次は作成したデカールを生成する機能の作成と生成タイミングを設定したいと思います。

Step3:AnimNotifyを使って任意のタイミングで足跡を生成する

足跡をつけるには、アニメーションと同期させてデカールを生成する必要があります。

アニメーションの任意のタイミングで処理をしたい場合は、
「AnimNotify」という機能を使用して実装していきたいと思います。

まずは、ContentBrowser左上の「Add New」から「BluePrint Class」を選択します。

親クラスの指定ウィンドウが出てきたら、「AnimNotify」クラスを選択してSelectを押します。

作成したらダブルクリックをしてブループリントを開きましょう。

まずは必要となる変数を作成します。

今回は「Boolean」型の変数で「IsLeftFoot」という名前の変数を作成しました
（DefaultValueはFalseのままです）

つづいて、「Received Notify」という関数をオーバーライドします。

MyBluePrintウィンドウ内のFunctionと書かれたタブの右に「Override」というボタンが有るので
クリックし、「Received Notify」という関数を選択しましょう。

そうすると、Graphウィンドウが開きますので以下のように処理を組んでいきます。

説明しますと、「Line Trace by Channel」でキャラクターの回転情報を元に、
足元から真下に向かってラインを飛ばして、もし何かにあたったらその場所に、
キャラの回転情報を元にした向きで足跡デカールを生成するという処理です。

このデカールは「Set Fade Out」により自動的に消えていき、
完全に消えたらアクターごとレベル上から消えてくれます。

※生成→破棄とやっているのでGarbage Collectionに与える影響は少なからず出るのではと思います。
もしそこまで気にしていましたら、
予めアセットプールなどを独自で作成して使い回すのが良いかもしれません。(ここでは紹介しません)

作成が終わりましたら、今度は歩き・走りのアニメーションに作成したNotifyを設定したいと思います。

Content Browser上で「ThirdPersonWalk」というAnimationSequenceアセットを
探してダブルクリックします。

アニメーションエディターを開きましたら、
「Notifies」と書いてあるタイムラインの中で右クリックをして、
「Add Notify」→先ほど作成したブループリントクラスの名前を選択しましょう。

そうすると、右クリックをした場所に、AnimNotifyのキーが打たれます。
この追加したキーが右足のデカールを生成する処理が走るタイミングとなります。
キーの位置はタイムライン上の大体0.327秒あたりがちょうどいい位置になります。

左足用のAnimNortifyのキーも同じように追加してあげ、
大体0.825秒あたりにキーを配置してあげましょう。
左足用のキーは、選択した状態でDetailウィンドウ内にある
「IsLeftFoot」のチェックを入れてあげましょう。

これで一旦「ThirdPersonWalk」アセットの編集は終わりで、
同じことを「ThirdPersonRun」アセットにも行いましょう。キーを打つ場所はそれぞれ
右足：0.246651
左足：0.571977 (IsLeftFootチェックを入れる)

さて、一通りの作業が終わりました！

これでエディターのプレイボタンを押してみて動き回って見ましょう！
以下の動画のように黒っぽい足跡が付けば成功です！

今回は単純に色を投影して足跡を作成してみました。

次回はもう少しだけ見た目に拘ってみたり、足跡テクスチャの作成方法の紹介をしてみたいと思います。

以上となります。

関連記事：【UE4】グレイマンに足跡をつけてみる-応用編