takumifukasawa’s blog

WebGL, Shader, Unity, UE4

【UE4】LeapMotion と Niagara を連携させる

先日、LeapMotionを入手しました。LeapMotionはざっくり言うと手を検出するデバイスです。VR向けのコントローラーとして使われることもあるみたいです。

developer.leapmotion.com

これまで LeapMotion を使ったことがなかったので、いろいろ遊んでみることにしました。UE4Niagaraとの連携をやってみます。今回は、1秒ごとに手の形に応じてパーティクルを表示する機能を作ってみます。

f:id:takumifukasawa:20200224161821g:plain

サンプルはこちらにアップしました。

github.com

環境

  • Windows10
  • UE4.23.1

LeapMotionの導入

1. PC

ツールのインストール

まず、LeapMotionのsetupを行う必要があります。こちらからセットアップツールをダウンロード → 中に入っているセットアップ用のファイルを開き、インストールを進めます。

developer.leapmotion.com

f:id:takumifukasawa:20200224164520p:plain

起動確認

インストールしたら、LeapMotionが問題なく起動するかを確認してみます。

インストールされたLeapControlPanelをダブルクリックすると、LeapMotionのコントロールパネルが有効になります。 インストールの場所などを特にカスタマイズしなかった場合はおそらく C:\Program Files\Leap Motion\Core Services に入っているはずです。

f:id:takumifukasawa:20200224164547p:plain

有効になると、タスクバーにこのようなアイコンが表示されます。右クリックしてビジュアライザーを開くと、手を検出したボーンのビジュアライズアプリが立ち上がります。

f:id:takumifukasawa:20200224183210p:plain

f:id:takumifukasawa:20200224220837p:plain

これで、LeapMotionが無事にPCで扱える状態になりました。 余談ですが、ビジュアライズアプリのアイコンを見るどうやらUnityで作られているようですね。

2. UE4

LeapMotion のプラグインを有効化

UE4でLeapMotionを使う場合、Pluginsから有効にするだけでLeapMotionを使う準備ができます。有効にしたら再起動が必要です。

f:id:takumifukasawa:20200224161936p:plain

Niagaraプラグインを有効化

NiagaraUE4の新しいVFXツールで、立ち位置的にはこれまでのCascadeパーティクルに変わるとされています。

docs.unrealengine.com

Niagaraを使うには、 NiagaraNiagara Extra を有効化にし、こちらもエディターを再起動する必要があります。Niagaraは扱いとしてはまだβ版のようですね。

f:id:takumifukasawa:20200224162009p:plain

Niagaraの作業

任意のSkeletalMeshからパーティクルを発生させるアセットを作成していきます。両手から発生させたいので、パーティクルのアセットは1つにし、SkeletalMeshを差し替えることのできるような構造になっているのがよさそうです。Niagara の実装はこちらを参考にさせていただきました。

www.youtube.com

Niagara System, Niagara Emitter を作成

Niagaraアセットの構成はこちらの記事がとてもわかりやすく解説してくださっています。

crabpunch.hatenablog.com

今回は、Niagara System と Niagara Emitter の2つのアセットを使っていきます。それぞれ FX_HandParticleSystem, FX_SurfaceParticle と名付けました。

Niagara Emitter で SkeletalMesh からパーティクルを発生させる機能をつくり、Niagara System から Niagara Emitter の SkeletalMesh を指定できるように設定を変更していきます。

f:id:takumifukasawa:20200224184922j:plain

Niagara のアセットを作る際にテンプレートを選ぶことができるのですが、Niagara System の方はテンプレートなしで、Niagara Emitter は Simple Sprite Burst テンプレートを使用します。

Niagara System f:id:takumifukasawa:20200224185817p:plain

Niagara Emitter f:id:takumifukasawa:20200224185833p:plain

Niagara Emitter: SkeletalMesh からパーティクルを発生させる

先ほど作った Niagara Emitter は、モジュールを足したり消したりして以下のような構成にしました。重要なものをピックアップしていきたいと思います。

ポイントは Spawn Burst InstanteneousInitialize Mesh Reproduction Sprite です。

f:id:takumifukasawa:20200224190249j:plain

Spawn Burst Instanteneous でパーティクル発生時に一定個数のパーティクルを発生させます。今回は Spawn Count を3000とし、Emitter Life CycleNextLoopDuration を 1としました。これで、1秒間隔で3000個発生させるパーティクルとなります。また、 Initialize ParticleLifeTime も1秒以内に収まるようにします。

f:id:takumifukasawa:20200224190902j:plain

いよいよメッシュの表面からパーティクルを発生させる部分に入ります。Initialize Mesh Reproduction Sprite モジュールを追加すると、SkeletalMesh の表面からパーティクルを発生させることができます。ここに手のメッシュを指定するのですが、これは LeapMotion のプラグインを有効化すると、そのフォルダの中に入っています。

f:id:takumifukasawa:20200224191231p:plain

f:id:takumifukasawa:20200224191444p:plain

ここまでの作業で、手の形からパーティクルが発生されるようになりました。

f:id:takumifukasawa:20200224231153p:plain

Niagara System: SkeletalMesh の指定

つづいて Niagara System で SkeletalMesh を自由に変更できるようにしていきます。変更可能にしておくことにより NiagaraSystem 1つでいくつもの SkeletalMesh に対応させることができます。

始めに作った Niagara System を開き、Track から先ほどの Niagara Emitter を追加します。

f:id:takumifukasawa:20200224192134p:plain

Userの中にSkeletalMesh型の変数を追加します。ここではUser.SkeletalMesh命名しました。次に、追加した変数を Initialize Mesh Reproduction SpriteMesh にドラッグします。すると、紫の鎖のようなマークとともに SkeletalMesh から User.SkeletalMesh に切り替わったかと思います。これで、発生源の SkeletalMesh を 変数から参照できるようになりました。

f:id:takumifukasawa:20200224192651p:plain

f:id:takumifukasawa:20200224192925p:plain

LeapMotion を扱う Actor を作成

ここでは、手の動きと Niagara を連携させる処理を作っていきます。具体的な処理は実際にダウンロードして中身を見ていただければと思います。この Actor はBP_LeapDesktopActor命名しました。

そもそも UE4 上で LeapMotion による手の動きと SkeletalMesh の連動は、手の SkeletalMesh に設定した Animation のインスタンスに対して 毎フレームごとに手の動きを更新する構造になっているようです。

Actor を作るにあたって、LeapMotion と手の動きを連携しつつ、手の表示もし、エフェクトと連携も行う Actor を Level 上に配置するだけで使えるようになることが再利用のしやすさ的にも理想なのですが、一つ問題があります。

それは、手のアニメーションと Niagara を連携させるためには、Level に配置した Niagara System の SkeletalMesh の Source に Actor を指定する 必要があること。具体的にはここです。

f:id:takumifukasawa:20200224220426p:plain

その理由から SkeletalMesh Actor を Level 上に配置することが必須となったため、このような中身にしました。大きなポイントは3つです。

  1. 手の動きを反映させる SkeletalMesh Component は Actor に追加したままで、非表示にしておく
  2. 代わりに、手を表示する SkeletalMesh Actor を Level 上で配置する
  3. 変数で SkeletalMesh を受け取るようにし、Blueprint内で その SkeletalMesh の Animation を更新する

これで、Level 上に SkeletalMesh Actor を置きつつ手の動きを Niagara に連携させることを実現しました。

Event Graph f:id:takumifukasawa:20200224193703p:plain

アニメーション更新メソッド(右手) f:id:takumifukasawa:20200224193744p:plain

Level に配置

LeapMotion を取り扱う Actor を配置し、子に Niagara System のアセットと SkeletalMesh を配置します。エフェクトと手の位置を合わせるため、position や rotation をゼロにしておきます。

注意点は親の Actor の rotation で、LeapMotion のデバイスの位置や向きに応じて回転を合わせます。

また、NiagaraOverride Parameters で手ごとの Default MeshSource を指定します。

f:id:takumifukasawa:20200224230551p:plain

完成

あとは好きなように色やサイズなどを調整します。

f:id:takumifukasawa:20200224161601p:plain

注意点

GPUパーティクルを有効にするとなぜかパーティクルが表示されなくなります。そのため現状CPUパーティクルのみ有効です。 他のSkeletalMeshでは問題なく動いたので、Niagaraの設定などを深堀りする必要がありそうです。こちらは調査中です。

参考

Niagaraの入門(2) Niagaraの構成 - カニミソの備忘録

https://www.youtube.com/watch?v=Ad6ABt_Vd5Y