アルゴンUE4/UE5&アプリ開発日記

UE4/UE5の機能やプラグインを紹介します。初心者や中級者向けになってます!!

【UE4】コントロールリグを設定してみた!

コントロールリグを使ってみます!

今回はコントロールリグを使ってみたので、

そちらの使い方と個人的に躓いた場所を紹介できたらと思います。

下のサンプルを参考にしながらやってみました。

UE4の4.25を使用しています(^ω^)

※まだ試験的な運用となっています。

※間違った説明などをしていたらコメント欄に記載してください。

www.unrealengine.com

コントロールリグとは?

UE4のコントロールリグではUE4上でスケルタルメッシュから、

コントロールリグファイルを作成してリグの設定を行えます。

またプログラム言語のPythonにも対応していて、

パイプラインなども自動化できるそうです。

www.unrealengine.com

手順としては下記のような手順で行いました。

1.UE4に自身のキャラクター(スケルタルメッシュ)を取り込む。

f:id:yoshikata1990:20200913145509p:plain

キャラクターの読み込み

2.読み込んだキャラクターからコントロールリグファイルを作成する。

f:id:yoshikata1990:20200913150341p:plain

コントロールリグファイルの追加

3.コントロールリグ設定画面でリグ用のコントローラーやスペースを取り付ける。

f:id:yoshikata1990:20200913204837p:plain

コントローラーやスペースの設定

4.シーケンサーを用いたアニメーションの作成

f:id:yoshikata1990:20200913151745p:plain

シーケンサーからのアニメーション作成

上記の手順で今回は説明していこうと思います。

コントロールリグの準備

コントロールリグを使用する場合はまずプラグインを追加します。

プラグイン設定からcontrolで検索すると出てきます。

f:id:yoshikata1990:20200913163841p:plain

controlrigプラグイン

プラグインをONにしたらキャラクターをインポートして、

右クリックすると「コントロールリグを作成」を選択します。

f:id:yoshikata1990:20200913165540p:plain

コントロールリグの作成

コントロールリグのファイルを作成したらフォルダが作成されます。

f:id:yoshikata1990:20200913171508p:plain

コントロールリグフォルダ

キャラクターにリグを設定

ここからは実際にリグを設定していきます。

コントロールリグの画面を開くと下のような画面になります。

f:id:yoshikata1990:20200913173313p:plain

コントロールリグ画面

この画面を表示されたらキャラクターのボーンに合わせて、

リグ用のコントロールとスペースを取り付けていきます。

スペース→ 位置や角度を設置する位置(動かさない)

コントローラー→ボーンやIKなどに合わせて動かすもの

右クリックで追加できます。

f:id:yoshikata1990:20200913174722p:plain

スペースとコントローラーの追加

実際にコントローラーとスペースを配置していきます。

アイコンごとに意味合いが異なります。

赤いアイコン→スペース

青いアイコン→コントローラー

※ボーンの階層もありますが別々の階層で作ったほうが、

 見やすく設定しやすいので分けています。

f:id:yoshikata1990:20200913180548p:plain

IK用のスペース

スペースの設定が完了したらコントローラーをキャラクターの位置に合わせます。

今回は下の絵のように設定しています。

f:id:yoshikata1990:20200913184956p:plain

キャラクターのコントローラーの設置

コントロールリグのBP設定

コントロールリグ用のブループリントを設定します。

今回はボーンに対してコントローラーのTransformを合わせる設定をしています。

f:id:yoshikata1990:20200913185952p:plain

コントローラーのブループリント

BPでの注意点

Propagate to Childrenが初期値でOFFになっていますが、

これをTrueにしないとボーンの子の方に移動が適応されないので、

必ずチェックを入れてください。

また、SetTransformのSpaceがLocalSpaceになっていることがあるので、

必ずGlobalSpaceにセットしてください。

IK用のBP設定

IKを設定する場合はBasicIKを使用します。

BoneA→上腕・BoneB→前腕・Effctor Bone→手をそれぞれ設定して、

関節の位置を左手のコントロールに指定して、

極ベクトルの位置をBasicIK用に作ったコントロールに設定しています。

f:id:yoshikata1990:20200913193358p:plain

Basic IKの設定

BPでの注意点

IKの軸を設定するためのPrimary AxisとSecoundary Axisは、

キャラクターの上腕の軸と前腕の軸の位置を指定するものとなっているため、

正しく設定しないとメッシュが正しい動きをしてくれません。

今回私のキャラクターは上腕の軸のy位置を-1.0しています。

またBasic IKのPropagate to childrenがFalseになっているので、

そちらもONにして手の動きが追従するように設定してあげてください。

実際にすべてのコントローラーに割り当てると下記の絵のようになります。

f:id:yoshikata1990:20200913195626p:plain

コントロールリグのBP

コントロールリグの設定は以上になります。

シーケンスで動きをつける

リグを設定したら今度は自分の好きなようにアニメーションをつけます。

先ほど作成したコントロールリグをシーンに配置します。

配置するとキャラクタ―とシーケンスが表示されます。

f:id:yoshikata1990:20200913201233p:plain

コントロールリグのキャラとシーケンス

あとはコントロールリグで設定したコントローラーを動かして、

キーを打ち込むことでアニメーションの動きを作成できます。

一連の流れを動画にしてみました。

www.youtube.com

自分の思い通りのアニメーションが完成したら、

キー欄の一番上を右クリックしたメニューから、

アニメーションシーケンスまたはポーズアセットに出力できます。

f:id:yoshikata1990:20200913204022p:plain

アニメーションの出力

以上でシーケンスでの主な設定などになります。

実際に動かしたものが下のTwitterの投稿になります。



UE4でディゾルブマテリアルを作ってみる!

ディゾルブマテリアルを作ります(^ω^)

今回は様々なマテリアルの計算を組み合わせて、

溶けたような表現のマテリアルを作成してみようと思います。

下の動画や公式サイトを参考にさせていただきました。

docs.unrealengine.com

www.youtube.com

UE4のバージョン4.25で作成しています。

どういった場面で使うのか?

ディゾルブのマテリアルは以下の場面で使われるかと思ってます。

・徐々消えていく表現

・武器や扉など新しく表示させる表現

・マテリアルの表現を変更する

などなど様々な表現があります。

簡単なディゾルブマテリアルを作る

実際にディゾルブのマテリアルを作っていこうと思います。

まずはマテリアルファイルを作成していきます。

コンテンツブラウザ右クリックしてマテリアルを選択します。

マテリアルの追加

マテリアルの追加

実際にマテリアルを作成していきます。

IFというマテリアル関数を使用することで作ってみます。

下記リンクの計算関連のマテリアルを紹介しているリファレンスがあるので、

こちらにもIFのノードが紹介されています!

docs.unrealengine.com

実際のマテリアルノードは下記になります。

IFを使用した表現

IFを使用した表現

まず行っていることを説明していきます。

1.マスクとなるTextureSampleから赤色を取り出してAの値としています。

2.Aの比較対象の値をMaskというパラメータでBの値として割り当てています。

※AとBに指定する値はFloat(値が一つのみ)で指定する必要があります。

3.BよりもAの値が大きい(赤色が強い)場合にその場所を青に設定します。

4.AよりもBが大きいまたはAとBが同じ値の場合は黄色に設定します。

上記のようにすることによってBの値の強さに合わせて、

テクスチャの赤色の部分の色が変化します。

実際に変化させると下の画像のようになります。

色の変化の動き

色の変化の動き

これを応用することで透明に見せる方法も作れたりします。

実際に透明にするマテリアルを作りましょう。

まず透明にするには結果マテリアルノードのBlendModeを変更します。

※詳細のマテリアルの項目にあります。

マテリアルのブレンドモードをTranslucentに変更


先ほど作成したマテリアルノードと同じように作成して、

今回は白黒の色にします。

※白黒で作成する理由は白い部分が表示される個所で、

 黒い箇所が透明になる箇所になるためです。

作成したIFのマテリアルノードをオパシティに設定してあげれば完了です。

オパシティを変更するマテリアル

オパシティを変更するマテリアル

実際に半透明にさせた状態のマテリアルの結果が下記になります。

半透明マテリアルの結果

半透明マテリアルの結果

※補足になりますがIFの関数を使用しなくても作成すること自体は可能です。

Lerpを使用したマテリアルノード

Lerpを使用したマテリアルノー

簡単なディゾルブマテリアルの作り方は以上になります。

動的に変化するマテリアルを作る

今回は境界から上下で変化するマテリアルを作成します。

実際に工程を3段階に分けて作成しています。

※もっと効率の良い方法があると思いますのでぜひ研究してみましょう(^ω^)

淵に合わせて変化するマテリアル

淵に合わせて変化するマテリアル

まずは上下に動く部分を作成していきます。

LinearGradientに対してTimerに合わせて変化する数値と減算します。

下から上へのグラデーション

下から上へのグラデーション

続いて先ほどの動作に対して10乗算して、

Clampを用いて最大と最小を1・0に変更します。

変更したら3ColorBlendで色の強度に合わせて3色に分解します。

3ColorBlendでそれぞれの色を抽出

3ColorBlendでそれぞれの色を抽出

実際に分解した状態のノードは下の絵のような表現になります。

赤が淵上部になり、緑が淵で青が淵を通過した後のマテリアルになります。

3ColorBlendの結果

3ColorBlendの結果

あとはそれぞれの色の箇所に対してマテリアルの構造を指定するだけです。

赤では白の箇所に色を乗算して配色しています。

赤の箇所のマテリアルノード

赤の箇所のマテリアルノー

淵の箇所についてはTextureSampleにPannerで動くように設定して、

テクスチャの情報とGに割り当てられた箇所を乗算して組み合わせます。

その後10かけて色を配色しています。

淵の配色のマテリアル

淵の配色のマテリアル

青の箇所についても赤と一緒で、

白の箇所に色を乗算して配色しています。

青の箇所のマテリアルノード

青の箇所のマテリアルノー

最後にすべてのマテリアルを加算して、

結果ノードのエミッシブカラーに割り当てれば作成は完了です。

マテリアルの加算と結果ノードへの結合

マテリアルの加算と結果ノードへの結合

 実際にうごかしたMaterialは下記のようになります。

今回もだいぶ長くなりましたが以上になります。