1. サイトトップ
  2. ブログ
  3. Unreal Engine
  4. 【UE5】UE5で足跡を作成してみた

【UE5】UE5で足跡を作成してみた

カテゴリー

タグ

投稿日：2022.8.24

更新日：2022.8.24

初めに

こんにちは！情熱開発部・プログラム課の金澤です

お盆休みも終わりましたがまだ暑い日が続きますね

そんなお休み中、海へ行ってきたなんて人もいるのではないでしょうか？
キラキラと光る青い海や白い砂浜に残る足跡なんかも風情がありますよね

というわけで今回はUE5でデカールを使用して足跡を残していきたいと思います

今回使用するバージョンはUE5.0.3になります。

デカールとは

そもそもデカールとは何かをご説明すると

スタティックメッシュやスケルタルメッシュに対して投影するマテリアル

になります。

これだけだとピンと来ないかもしれませんが、以下のように段差などがあってもペタッと貼り付けられるシールのようなマテリアルです。

デカールマテリアルを作ってみる

というわけで早速そのデカールマテリアルを作ってみます

マテリアルを作ること自体に特別な操作は必要ありません。新しいコンテンツを作成からマテリアルを選んで作りましょう。

新規でマテリアルを作成したら以下の

MaterialDomainをDeferredDecalに

BlendModeをTranslucentに変更してください

これでこのマテリアルがデカールマテリアルとして設定されたことになります。

そして今回は足跡を作成したいため、足跡のテクスチャなどを設定しておきます。

こんな感じ

足跡の色は黒にして、footalphaで足跡の濃さを設定しています。この辺りはお好みで変更して大丈夫です。
足跡のテクスチャは白い部分のみを切り抜いてマスクとして使用されています。

デカールマテリアルの作成としては以上になります。
それでは足跡の生成に移りましょう！

足跡の生成

マテリアルインスタンスの作成

デカールマテリアルの作成が終わったので今度はそれを両足分用意しましょう！
というわけで先ほど作成したマテリアルからマテリアルインスタンスを二つ作成します。

作成したらマテリアルインスタンスを開き、右側にあるGlobalTextureParameterValuesにある先ほど設定した足跡のテクスチャの名前のパラメータにチェックを入れて左右それぞれのテクスチャを設定してあげましょう。

これで右と左それぞれのマテリアルインスタンスが作成されました。

ソケットの設定

マテリアルインスタンスを作成したら次は足跡を生成する座標を設定します。
生成するのにはSK_Mannequinのfoot_l_Socket/foot_r_Socketを使用します。

コンテンツブラウザからSK_Mannequinを検索し開いて、スケルトンツリー内のfootsocketたちを見つけます。

そしてfoot_l_Socket/foot_r_Socketが足裏の中央辺りに来るようにパラメータを以下のようにそれぞれ設定します。

↑foot_l_Socket
↑foot_r_Socket

アニメーションと同期させて生成させる

生成する座標の設定が終わったらいよいよ歩くアニメーションに合わせて生成させてみましょう。

アニメーションの任意のタイミングで生成させたいため、今回はAnimNotifyという機能を使って実装します。
AnimNotifyを新規で作成するには
コンテンツの新規作成からBluePrintClassを選択し、親を検索からAnimNotifyに設定します。

ブループリントの作成が出来たら開いて変数と関数の設定を行います。

変数に左右の判定のためBoolean型の「IsLeftFoot」をPublicで作成

関数はReceivedNotifyをオーバライドして作成します

というわけで関数内の処理をお見せすると

全体図
ラインを飛ばす処理
キャラの回転情報を取得して計算する処理
取得した位置に足跡を生成する処理

こうなります。

中身の説明をいたしますと、LineTraceByChannelで先ほど設定したソケットの座標を利用して足元へとラインを飛ばし、もし何か地面などがあればそこへ足跡を生成しています。
下のほうにある処理はキャラクターの回転情報をもとに足跡の向きを設定しています。

関数の作成が終わったらアニメーションへと組み込みを行います。

組み込むアニメーションはMF_Run_Fwd/MF_Walk_Fwdの二つになります。
コンテンツブラウザからこの二つのアニメーションを探して開きます。

そしてアニメーションの中で足をつくタイミングでNotifies(通知)のタイムライン内を右クリックし、AddNotifyから先ほど作成したAnimNotifyを選択します。
これをアニメーション内の全ての足をつくタイミングで行いましょう。
また、左足の場合はDetailウィンドウ内にある「IsLeftFoot」のチェックを入れて置く必要があります。

RunとWalk両方の設定が終わったら全ての作業が終わりになります。
ということで実際に歩いてみましょう

動きに合わせて足跡がつくようになりました！

フェードアウトの設定

動きに合わせて足跡がつくようになりましたが、このままだとずっと残り続けてしまうためフェードアウトするようにしてみましょう。

フェードアウトはデカールコンポーネントから呼ぶことができます。

AnimNotifyの関数内に戻り、SpawnDecalのReturnValueから引っ張ってSetFadeOutを呼び出します。
DelayとDurationの値を設定して実行してみましょう。

フェード…しませんね…

さて調べてみますと、どうやらフェードアウトの外観を制御するにはDecalLifetimeOpacityを設定する必要があるみたいです。

というわけで

マテリアルにDecalLifetimeOpacityの影響を受けるように設定しなおしましょう

すると

フェードされるようになりましたね！

これで足跡の生成～削除までの流れが出来たと思います。

最後に

今回はデカールで足跡の作成からフェードアウトまでをご紹介しましたが、デカールは足跡以外にも弾痕や水たまりなどにも利用できそうですし

壁に矢印で進行方向を示したり

他にもNormalを投影することができたりBP上で色の変更も行えるなど
拡張性も高いため、気になった方はぜひ調べてみてください。

足跡をピンク色にもできる

参考サイト

【UE4】グレイマンに足跡をつけてみる-入門編
【UE4】グレイマンに足跡をつけてみる-応用編
【UE4】デカールエフェクト、基礎編
【UE4】デカールの使い方と設定の紹介！

【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。