わかゲームスタジオ

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

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