[UE4] [UMG] UIデザイナーのマテリアル中級。動かす1「角度」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。

今回の内容

この後の5回は、マテリアルに慣れてきたら知りたくなる、
角度・位置・大きさ・動きの波形・その複合技 について、
順次紹介します。

今回は角度についてです。
角度の調整とアニメーションの方法を紹介ます。

使用する主なノード

CustomRotator
Rotator
TextureCoordinate （ショートカット [U]＋クリック）
Time

初期状態の確認

まずは、イメージを動かす前の状態を確認します。
背景の位置確認用グリッド、色、マスクイメージの3つの要素を Lerp で合成しています。

角度・回転は、CustomRotator

角度・回転は CustomRotator です。

 CustomRotator 、TextureCoordinate 、 Constant を用意ます。

まずは、 TextureCoordinate と、CustomRotator をつなげて、回転させたいイメージのUVsに繋げると、プレビューにイメージが表示されます。

Rotation Angle(0-1) に Constant をつなげて０から1の値を入力します。

値は、0が0度、1が360度です。
プラス値で反時計回り、マイナス値で時計回りです。
プラス値を時計回りにしたい場合は、
下の画像のように Multiply で -1 を 掛けて ください。

あと、”RotationCenter” というピンがありますが、こちらは感覚的に扱いにくいので、気にしない方がいいかもしません。

一応、Rotator についても解説

Rotator ノードは TextureSample などのイメージにつなぐだけで回りだすので、便利そうにみえます。ただ、90度や45度などきっちりした角度を出したいときに、入力すべき値がはっきりしないので、使いどころを選びます。

アニメーション

イメージをぐるぐる回転してみましょう。

まずは、回転させるためには「何をすればよいのか？」を考えます。

 CustomRotator では、
Rotation Angle(0-1) につなげた値が角度になります。
値は、0が0度、0.25で90度、0.5で180度、1が360度です。

ということはこの値を、

0から小数の値が増えて1になったらもう一度0から、これを繰り返せばイメージはぐるぐる回ります。

これには Time ノードを使います。

Timeは時間を推移させます。
その際に小数点以下の値も出力するのでその値を使います。

早速、つないでみましょう。

ぐるぐる回りだしました。

1秒で1回転しています。
速度調節をしましょう。
Multiply で調節できます。
この場合の 1 回転する値と秒数は、
値が 0.5 で 2 秒、
値が ２ で 0.5 秒です。

値＝秒数 にしたければ、
Time の後ろの Multiply を Divide に変更します。

値 2 で 2 秒で1回転になりました。

まとめ

簡単ですね。

次回は「大きさ」、スケールです。