蝉の声はまだ数が数えられるくらいしか聞こえてこないけど、確実に夏に向かっていることを感じます。この時期なると現れるジャンボタニシの卵塊を見るたびに、早く駆除されてほしいと願いつつ、アクセントカラーはいくら綺麗な色でも場所を選ばないとダメだなと改めて強く思う今日この頃です。またひとつ自然から学ばせてもらいました。
さてさて
UE4 の Widgetブループリント は独自のアニメーションタイムラインを持っています。配置したWidgetパーツに対して動きをコントロールする以外に、オーディオの再生、タイミングを見て関数を呼び出すEventTrack、マテリアルパラメータコレクションの値を制御といったものが用意されています。
最近 この Material Parameter Collection Track の有効利用方法を考えていて思いついた一つが、パターンアニメーションのコントロール。
基本構造のイメージが先で、いい見せ方ないかな～と考えていろいろやっているうちに結構日が経ってしまった。
Twitterに貼った動画がこれ。
UMGでパターンアニメーションを試しててようやく形が見えてきた気がする。UVに関するパラメータは個別にインスタンスに持たせておいて、Timeノードに相当するのを、パラメータコレクション経由でUMGでキー制御。#UE4 #ue4UMG pic.twitter.com/He5EYOPtIp
— みつまめ杏仁 (@MMAn_nin) 2020年7月11日
見た目にワールドフリッパーのタッチエフェクトのモロパクリです。再現方法をいろいろ悩みつつ試していたら、なかなか複雑でよくできてるなと感心させられました。ランダム要素を入れつつもきちんと制御するところはされていて、アーティストとプログラマの仕事の境界が大変気になります。アーティスト比重が高ければ素晴らしいツールを使えていることになるので、それはそれで羨ましいし、逆にプログラマ比重が高ければ、アーティストとプログラマの協業レベルがとても高くないとできない仕事で、そんなプログラマとタッグを組めるアーティストが羨ましい。
てなわけで
今回の内容はマテリアルパラメータコレクションを使ったアニメーション制御ということで、複数のWidgetパーツを、ひとつのアニメーショントラックを共有して動かすという方法になります。
とりあえず基本的な構成をメモとして残しておくことにします。
必要なアセットはだいたい４つ
今回テクスチャを節約したかったのでグレースケールテクスチャを採用。色付けにカーブアトラスを使ってます。
アニメーションを作る
パターンはPhotoshopで作りました。
タイムラインパネルから、フレームアニメーションモードに切り替えたら、レイヤーをアニメのセルに見立ててモリモリ描いていきます。
各レイヤーを順番に表示する、しないを切り替えるだけの単純なアニメーション。
サイズは 64ｘ64px。
512pxのテクスチャに収めたかったのと、キリよく8パターンにしたかったので、
これだけだと、MaterialParameterCollectionを使う楽しみが少ないな・・・と考えてたところに ワーフリ と出会ったのでした。
同じ要領でもう２種類、パターン数の違うのを作りました。
←４パターン (128x128px)
←5パターン (102x48px)
このパターンズを１枚のテクスチャにアトラスとして並べます。
これをUE4にインポートします。
重要な設定が3つあります。
ひとつは タイリング設定。
テクスチャを繰り返さない Clamp にしておかないと、パターンが終わらなくなります。
２つめは MipMap、３つめはTextureGroupです。
基本 UI にミップマップは不要です。テクスチャグループもUIに設定するので、ミップマップが作られることはないと思いますが、明示的に NoMipMapsを選択しておきます。
マテリアルパラメーターコレクションを作る
マテリアルパラメータコレクションはプロジェクト全体で利用できるので、管理しやすいように名付けます。
ここではScalar値を一つだけ登録しました。パラメーター名は time としています。
Widget用のマテリアルを作る
ベースとなるマテリアルの全体図
マテリアルドメイン（右端のノード）は User Interface にします。
普通にカラーテクスチャを使う場合は下のようにつなぎます
マテリアルパラメータコレクションを利用するには専用のノード
検索で coll と入力すると出てきます
このノードの設定値として、に用意しておいたマテリアルパラメータコレクションをセットします。
プロジェクトが認識しているマテリアルパラメータコレクションがプルダウンから選択できるので、名前を憶えていれば簡単に選択できます。
マテリアルパラメータコレクションを選んだら、ParameterNameも簡単に選べます。
今回はインスタンス化して汎用的に使いたいのでパラメータはそれなりに用意。
キラキラパターンについては、４色の固定カラーにしたかったのもあって、若干ノードを組み替えてスリムにしたベースマテリアルを用意しています。画像は省きますが、マテリアルパラメータコレクションの使い方は同じ要領です。
TilingU と TilingV でテクスチャの切り出す大きさを指定、OffsetV で切り出す位置を指定します。
値は UVなので、 対象のピクセル数をテクスチャ解像度で割り算します。上図の場合、左上が（0, 0）で、上から64ピクセル下あるパターンだから
64÷256 ＝ 0.25 OffsetV は 0.25
今回全て左端から並んでいるので、OffsetUは考慮しません。
切り出すサイズは 128x128px なのですが、 今回のテクスチャサイズが長方形なので TilingU と TilingV の値は異なります。
128÷512 ＝ 0.25 TilingU は 0.25
128÷256 ＝ 0.5 TilingV は 0.5
上のベースマテリアルから、マテリアルインスタンスを作って、計算した値をセットするだけで、一枚のテクスチャからいろんなパーツを切り出して、Widgetで利用できます。
マテリアルインスタンスはコンテンツブラウザの対象のベースマテリアルのアイコンで右クリックして作ります。
ダブルクリックするとパラメータだけが編集できます。
Widgetブループリントを作る
あとは表示のための用意としてUMGのキャンバスにImageパーツを配置して、マテリアルインスタンスをセット。
新しくアニメーションを追加して、さらにトラックを追加します。
プルダウンリストから Material Parameter Collection Track を選択。
用意しておいたマテリアルパラメータコレクションを選んだら、今度は変化させるパラメータを追加して、キーを打ちます。
パーツごとのアニメーションがあれば合わせて追加しておきます。
あとは、このアニメーションを、カスタムイベントで呼び出して再生するようにすれば勝手にアニメーションします。
今回のサンプルは目コピーなので、記事にするのはここまでにしておきます。
マテリアルパラメータコレクションをUMGで制御できるということ
かつて、まだこの方法に気づいていなかった頃、トリッキーな方法でやってました。
無駄にアニメーション用のパーツやプロパティを消費してさらに、EventTick で値を移すという処理を行っていました。
タイムラインを使えば、アナログみのある味わい深いアニメーションを作ることができます。
追記： 7/14
この記事を公開したところ、マテリアルパラメータコレクションを使わずとも、直接Imageパーツなどにセットしたマテリアルのパラメータもアニメーショントラックでキーを打つことができるのを教えていただきました。
こんにちは、いつも記事を拝見させていただいております。今回の問題点に同じMPCを使用するマテリアルと共有してしまうことが問題かも、とありましたが、マテリアルのScalarParameterのみ、VectorParameterのみの編集も可能です。見つけるのが大変な場所にありますが・・・MPC無しでＯＫです。 pic.twitter.com/FJxwkYtVsX
— イテばし (@re_itabashi) 2020年7月14日
ヒストリアさんとこのブログでも扱っておられました。
イテばし さん情報ありがとうございます。
実はものすごく欲しかった仕様で、「なんで無いんだろう・・・」で時間が止まってました。いやもう恥ずかしい限りです。ありましたね。
Unity触っててアニメーションキーを打てると分かった時にすごく悔しかった思い出がよみがえりました。でももう大丈夫です。もうUE4さえあれば何もいらないｗ
というわけで、以下の記事を手直します。
<<<
Material Parameter Collection Trackを使えば、EventTickを使わずに済みます。
ひとつ問題があるとすれば、それは Material Parameter Collection の持つ値は『共有』しているということ。シングルトン的なユニークUIであれば、全く気にしなくてもよいのですが、インスタンス化したり、汎用的に扱う場合は注意が必要です。同じパラメータを参照していれば、タイミングが同期してしまうからです。かといってコレクション内にパラメータを増やすのも、メモリの消費が増えるし、だれがいつどの値を書き換えるか管理が必要になってきて、却って面倒な状況になりそうです。
なので、UI表示での使いどころとして提案したいのが
- ダイアログウィンドウ（モーダルなやつ）
- 画面フェード
- ロゴやチャプター名表示、画面見出し
- 字幕
- NowLoding
あたりでしょうか。
アニメーションでキーを打てるので、もうEventTickを使わずに済みます。
当時は何を思って使えないとなっていたのか今となっては謎ですが、これでもっと凝ったことが気軽にできそうな予感。多分気づけていなかっただけだと思う。悔しい。
今回は、マテリアルパラメータコレクションで値を共有しているのを踏まえたアニメーション制御の方法ということで、一例をご紹介させていただきました。
ちなみに
今回作ったマテリアルでは、引き算を加えてるので、試しにパーツごとに時間差を作ってみたのが以下
アニメーションパターンを作るのはそれなりに大変だけど、フェードやスケールアニメーションに飽きてきたなーと思い始めたら試してみてはいかがでしょうか。
ぜひぜひ
パターンアニメーションでユニークなUI演出ライフを！
