UE4 グラデーションテクスチャを使ったゲージ表現
今回は0-1のグラデーションをテクスチャで作成し、その値に沿って遷移するゲージをマテリアルで作成したいと思います。
エフェクトの魔法陣や複雑な形をしたゲージUIなど幅広く使用できるかと思います。
今回できること↓
使用したテクスチャはこちら
今回は外周、円内の三角形、円内の点、の順番に描画しようと思いましたので、各値は以下のようになります。
1,外周 0~0.5
2,円内の三角形(上向き)0.5~0.75
3,円内の三角形(下向き)0.75~0.9
4,円内の点 0.9~1.0
マテリアルのオパシティマスクにはTextureのAlphaチャンネルをそのまま使用するので背景は透過しています。
マテリアルの全貌です。
詳細と考え方
グラフにするとイメージしやすいと思いましたのでグラフベースで紹介します。
①Rの値を逆数にする。
Textureのままだと左のようになっているので、ー1をかけて右のようにします。
②逆数にした値に描画したい分のParameterを足す
足すと描画したい分だけ0以上になることがわかります。
③Clampをかける
マテリアル内で都合の悪いマイナスを0に戻します。
④Ceilをかける
0より上の数を1に繰り上げします。
⑤Colorをかける
でた値にColorをかけて色づけすれば完成です。
この要領でやればTextureのグラデーションや形次第で様々な表現ができそうですね。
以上です。
追記:あるノードを忘却していた筆者
その名もValueStep
上記の方法でも同じ表現が可能です。
このノードよく使うのに、、、
前回の記事でもまとめたのに、、、、
不覚。
UE4 よく使うけどよく忘れるノードまとめ ~Material編~
今回は完全に備忘録です。
個人的に忘れやすいノードとまとめておきます。
UE4 Var.4.26
①棒ゲージ
詳細は過去に紹介しているので、今回はノード紹介のみです。
過去記事はこちら↓
- LinearGradientとValueStepを使用します。
- 左右の指定はLinearGradientのOutputから1-すれば変更可能です。
- 上下ゲージに変更したい場合は
- LinearGradientのVGradientを使用すれば適応可能です。
②円形ゲージ
こちらも過去に記事をUPしていますので詳細はそちらをご参照ください。
過去記事はこちら↓
- こちらもValueStepを使用、LinearGradientの代わりにVectorToRadialValueを使用します。
- このまま使用するとゲージの開始位置が3時の方向からになり、都合が悪い場合が多いです。そこでゲージの開始位置を変更したいと思います。
③円形テクスチャの節約術
単純な円形の為にテクスチャを書くのも面倒ですし、容量の圧迫にもつながります。
そこで、Material内で完結する方法です。
- SinのPeriodをいじればもっと多彩な表現ができます。
- Ceil(少数繰り上げ)も試してくださいね。
④少数の小数点以下のみ出力
- その名もFracです。
- Timeと組み合わせるだけで簡単に0~1の遷移が表現できます。
⑤Textureの回転
- Time→Fracを利用すればスマートに回転ができます。
- また、Textureの繰り返しが見えてしまう問題はTexture側の設定で解決できます。
⑥Textureのタイリング
⑦PostProcessMaterialで表現するブラー効果
- Customノードの中身は以下です。
- コード詳細は以下の通りです。
const float2 ScreenMult = View.ViewSizeAndInvSize.xy * View.BufferSizeAndInvSize.zw;
const int TexIndex = 14;
const float Samples[11] = {-0.08,-0.05,-0.03,-0.02,-0.01,0,0.01,0.02,0.03,0.05,0.08};
float2 dir = float2(0.5,0.5) - ScreenUV;
float4 sum = float4(0.0, 0.0, 0.0, 0.0);
for(int i = 0; i<11; i++)
{
float2 pos = ScreenUV + dir * Samples[i] * BlurDist;
pos = clamp(pos, float2(0.0,0.0), float2(1.0, 1.0));
sum += SceneTextureLookup(pos * ScreenMult, TexIndex, false);
}
return sum / 11.0;
参考元
くろれきし on Twitter: "UE4のマテリアルで基本的な図形をテクスチャ抜きで表示してみる。個人的な備忘録を兼ねてツイート。#UE4Study… "
UE4 中心から左右に伸縮するゲージを作る
今回は単純なゲージではなく、中心から左右(上下)に伸縮するゲージを作ろうと思います。
単純なゲージの作り方↓
↓今回することです↓
今回組んだマテリアルの前景です。
考え方紹介
- パラメーターで0~1の値を外部から設定します。
- 入力した値を/2して0.5~1.0で遷移するようにします。
- 0.0~0.5に調整した値を先日紹介した方法のゲージで使用します。ーゲージ①
- 上記のほかに0.0~0.5をOneMinusしてもう一本ゲージを作成します。ーゲージ②
- 前回同様Lerpで色を設定するのですが、ゲージ①とゲージ②で入力方向が違うので注意してください。
- 各ゲージ(上の画像だとFrontColor色部分)に余分な部分があるので、TexCoord[0]のMask(R)を使用して黒に塗り替えます。
- 不要部分を除いた各ゲージを足してあげると完成です。
UE4 画面キャプチャ時の謎の余白を消す方法
これまで制作した作品を動画に撮って、Youtubeにアップしたり提出したりしてきました。
その際、UE4で制作した作品では必ず起こるキャプチャ時の不具合があります。
なぜか動画の右と下に余白ができてしまいます。
この問題に長らく悩まされてきたのですが、その解決方法が分かったので紹介します。
BeginPlayでユーザー設定を上書きしています。
IntPointを設定では、画面のピクセル数を指定しています。
オプション画面などで解像度を設定できるようにするなど使い方はいろいろありそうです。
また、全画面モードの設定では、フルスクリーンにするか、Window表示にするかが設定できます。
こちらもオプション画面作成の際に使えそうですね。
ApplySetteingsノードのチェックはデフォルトでTrueになっていますが、Falseに変更しないと設定が適応されませんのでご注意ください。
UE4 マクロ内でローカル変数を使う
これまでマクロ内でしか使わない変数をローカルとして格納したいんだけどできないのかしら?と思っていたのですが、使えることが判明したので残しておきます。
変数自体はlocalと検索するか、ユーティリティ/マクロに各型が用意されています。
変数に値をSetするときは割り当てるノードを使用します。これもユーティリティ/マクロ内にあります。
ただし、標準の変数型以外(構造体や列挙体)を使うときは工夫が必要で、ローカルワイルドカードなるものを使います。
- 今回は変数を作成して使用していますが、マクロの引数を使用しても問題ありません。
以上です。
これをもっと早く知っておけばマクロ内でしか使わないであろう関数を別で追加することもなくなり、よりスマートなノードが書けるようになりますね。
UE4 WorldLocationをRelativeLocationに変換する方法
今回は表題の通り、WorldLocationをRelativeLocationに変換する方法と標準のGetRelativeLocationとの違いをまとめたいと思います。
①WorldLocationをRelativeLocationに変換する方法
- ノードはInverse Transform Locationを使用します。
- Tに親のTransformを指定すると、Locationに指定したWorldLocationを親に対する相対座標を返してくれます。
②Inverse Transform LocationとRelativeLocationの違いについて
例えばComponentの構造が以下の用になっていた場合
Children1のRelativeLocation↓
-
Children0に対する相対座標が取得できます。
Children1でInverse Transform Locationを使用、親にActorRootを指定した場合↓
-
ActorRootに対する相対座標が取得できます。
この2つを使い分けることによって状況に応じた相対座標の取得ができますね。
Location以外にもInverse Transform ノードは存在します。
以上です。
上記のノードを使って快適な相対ライフを送れそうですね。