わかゲームスタジオ

ゲーム制作初心者専門学生の備忘録

UE4 グラデーションテクスチャを使ったゲージ表現

今回は0-1のグラデーションをテクスチャで作成し、その値に沿って遷移するゲージをマテリアルで作成したいと思います。

エフェクトの魔法陣や複雑な形をしたゲージUIなど幅広く使用できるかと思います。

 

 

今回できること↓


www.youtube.com


使用したテクスチャはこちら

f:id:WakaiGames:20220222174845p:plain

今回は外周、円内の三角形、円内の点、の順番に描画しようと思いましたので、各値は以下のようになります。

1,外周 0~0.5

2,円内の三角形(上向き)0.5~0.75

3,円内の三角形(下向き)0.75~0.9

4,円内の点 0.9~1.0

マテリアルのオパシティマスクにはTextureのAlphaチャンネルをそのまま使用するので背景は透過しています。

 

マテリアルの全貌です。

f:id:WakaiGames:20220222174700p:plain

 

詳細と考え方

グラフにするとイメージしやすいと思いましたのでグラフベースで紹介します。

①Rの値を逆数にする。

Textureのままだと左のようになっているので、ー1をかけて右のようにします。

f:id:WakaiGames:20220222181613p:plain
f:id:WakaiGames:20220222181615p:plain

②逆数にした値に描画したい分のParameterを足す

足すと描画したい分だけ0以上になることがわかります。

f:id:WakaiGames:20220222181615p:plain
f:id:WakaiGames:20220222181921p:plain

Clampをかける

マテリアル内で都合の悪いマイナスを0に戻します。

f:id:WakaiGames:20220222182146p:plain

④Ceilをかける

0より上の数を1に繰り上げします。

f:id:WakaiGames:20220222182146p:plain
f:id:WakaiGames:20220222182320p:plain

⑤Colorをかける

でた値にColorをかけて色づけすれば完成です。

 

この要領でやればTextureのグラデーションや形次第で様々な表現ができそうですね。

以上です。

 

追記:あるノードを忘却していた筆者

f:id:WakaiGames:20220224181311p:plain

その名もValueStep

上記の方法でも同じ表現が可能です。

このノードよく使うのに、、、

前回の記事でもまとめたのに、、、、

不覚。

wakagamestudio.hatenablog.jp

 

UE4 よく使うけどよく忘れるノードまとめ ~Material編~

今回は完全に備忘録です。

個人的に忘れやすいノードとまとめておきます。

UE4 Var.4.26

 

①棒ゲージ

詳細は過去に紹介しているので、今回はノード紹介のみです。

過去記事はこちら↓

wakagamestudio.hatenablog.jp

f:id:WakaiGames:20220129164849p:plain

  • LinearGradientとValueStepを使用します。
  • 左右の指定はLinearGradientのOutputから1-すれば変更可能です。
  • 上下ゲージに変更したい場合は
  • LinearGradientのVGradientを使用すれば適応可能です。

 

②円形ゲージ

こちらも過去に記事をUPしていますので詳細はそちらをご参照ください。

過去記事はこちら↓

wakagamestudio.hatenablog.jp

f:id:WakaiGames:20220129165812p:plain

  • こちらもValueStepを使用、LinearGradientの代わりにVectorToRadialValueを使用します。
  • このまま使用するとゲージの開始位置が3時の方向からになり、都合が悪い場合が多いです。そこでゲージの開始位置を変更したいと思います。

f:id:WakaiGames:20220129171310p:plain

f:id:WakaiGames:20220129171318p:plain

f:id:WakaiGames:20220129171324p:plain

 

③円形テクスチャの節約術

単純な円形の為にテクスチャを書くのも面倒ですし、容量の圧迫にもつながります。

そこで、Material内で完結する方法です。

f:id:WakaiGames:20220129172010p:plain

f:id:WakaiGames:20220129172640p:plain

  • SinのPeriodをいじればもっと多彩な表現ができます。
  • Ceil(少数繰り上げ)も試してくださいね。

 

④少数の小数点以下のみ出力

f:id:WakaiGames:20220129173935p:plain

  • その名もFracです。
  • Timeと組み合わせるだけで簡単に0~1の遷移が表現できます。


www.youtube.com

 

⑤Textureの回転

f:id:WakaiGames:20220129174427p:plain

  • Time→Fracを利用すればスマートに回転ができます。
  • また、Textureの繰り返しが見えてしまう問題はTexture側の設定で解決できます。

f:id:WakaiGames:20220129175004p:plain


www.youtube.com

 

⑥Textureのタイリング

f:id:WakaiGames:20220129180734p:plain

 

⑦PostProcessMaterialで表現するブラー効果

f:id:WakaiGames:20220129181923p:plain

  • Customノードの中身は以下です。

f:id:WakaiGames:20220129182037p:plain

  • コード詳細は以下の通りです。

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;

 

 

参考元

マテリアルを使ったゲージ - みつまめ杏仁

UE4小ネタ : 円形ゲージの作り方 - ぼっちプログラマのメモ

くろれきし on Twitter: "UE4のマテリアルで基本的な図形をテクスチャ抜きで表示してみる。個人的な備忘録を兼ねてツイート。#UE4Study… "

UE4 MaterialでTextureを回転させる - PaperSloth’s diary

[UE4] Material Instanceで役立つUV座標のパラメータ化について|株式会社ヒストリア

UE4 Tutorial: Radial Blur (Request) - YouTube

UE4 EpicGamesLauncherのウィッシュリストがなくなった時

今回はEpicGamesLauncherのマーケットプレイスウィッシュリストが消えることが度々起こります。

f:id:WakaiGames:20211029163919p:plain

始めてみたときだいぶ焦るので、解決方法を残しておきます。

進行形で焦っているあなたの役に立てば幸いです。

f:id:WakaiGames:20211029164124p:plain

画面左下のユーザー名の部分をクリックしてサインアウトしてください。

サインアウトが完了するとサインインを求められるので、再度サインインします。

 

これだけですべてのウィッシュリストが返ってきます。

単純な解決ですが、知っておくとふとした時の気持ちに余裕ができる、、かも?

UE4 中心から左右に伸縮するゲージを作る

今回は単純なゲージではなく、中心から左右(上下)に伸縮するゲージを作ろうと思います。

単純なゲージの作り方↓

wakagamestudio.hatenablog.jp

 

↓今回することです↓


www.youtube.com

今回組んだマテリアルの前景です。

f:id:WakaiGames:20210907175823p:plain
f:id:WakaiGames:20210907175819p:plain


考え方紹介

  • パラメーターで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で制作した作品では必ず起こるキャプチャ時の不具合があります。

www.youtube.com

なぜか動画の右と下に余白ができてしまいます。

この問題に長らく悩まされてきたのですが、その解決方法が分かったので紹介します。

 

f:id:WakaiGames:20210816152505p:plain

BeginPlayでユーザー設定を上書きしています。

IntPointを設定では、画面のピクセル数を指定しています。

オプション画面などで解像度を設定できるようにするなど使い方はいろいろありそうです。

また、全画面モードの設定では、フルスクリーンにするか、Window表示にするかが設定できます。

こちらもオプション画面作成の際に使えそうですね。

ApplySetteingsノードのチェックはデフォルトでTrueになっていますが、Falseに変更しないと設定が適応されませんのでご注意ください。

youtu.be

UE4 マクロ内でローカル変数を使う

これまでマクロ内でしか使わない変数をローカルとして格納したいんだけどできないのかしら?と思っていたのですが、使えることが判明したので残しておきます。

 

変数自体はlocalと検索するか、ユーティリティ/マクロに各型が用意されています。

f:id:WakaiGames:20210621121412p:plain

 

変数に値をSetするときは割り当てるノードを使用します。これもユーティリティ/マクロ内にあります。

f:id:WakaiGames:20210621122319p:plain

 

ただし、標準の変数型以外(構造体や列挙体)を使うときは工夫が必要で、ローカルワイルドカードなるものを使います。

f:id:WakaiGames:20210621122557p:plain

  • 今回は変数を作成して使用していますが、マクロの引数を使用しても問題ありません。

 

以上です。

これをもっと早く知っておけばマクロ内でしか使わないであろう関数を別で追加することもなくなり、よりスマートなノードが書けるようになりますね。

UE4 WorldLocationをRelativeLocationに変換する方法

今回は表題の通り、WorldLocationをRelativeLocationに変換する方法と標準のGetRelativeLocationとの違いをまとめたいと思います。

 

①WorldLocationをRelativeLocationに変換する方法

f:id:WakaiGames:20210609165811p:plain

  • ノードはInverse Transform Locationを使用します。
  • Tに親のTransformを指定すると、Locationに指定したWorldLocationを親に対する相対座標を返してくれます。

②Inverse Transform LocationとRelativeLocationの違いについて

例えばComponentの構造が以下の用になっていた場合

f:id:WakaiGames:20210609170522p:plain

Children1のRelativeLocation↓

f:id:WakaiGames:20210609170825p:plain

  • Children0に対する相対座標が取得できます。

 

Children1でInverse Transform Locationを使用、親にActorRootを指定した場合↓

f:id:WakaiGames:20210609165811p:plain

  • ActorRootに対する相対座標が取得できます。

この2つを使い分けることによって状況に応じた相対座標の取得ができますね。

 

Location以外にもInverse Transform ノードは存在します。f:id:WakaiGames:20210609173431p:plain

 

以上です。

上記のノードを使って快適な相対ライフを送れそうですね。