みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

マテリアルで目パチ2

過去記事にコメントを頂いたので、アップデートの意味も込めつつさっそく試してみました

limesode.hatenablog.com

2パターンの絵を IF ノードを使って切り替えていました。(↓UE5で作成)

IFノードの A==B って判定がシビアで、個人的に観測をできた経験がないんですよね。

 

記事の終わりのほうで

あと、if ノードのピンが1つ空いているので、もう1枚 絵入れて3パターンにすることもできます。

などと無責任なことを書いてました。できないわけではないけども・・・

うぅ、ごめんなさい。

 

最近の IFノードには、イコールの判定に含めるためのしきい値が設定できるようになってたので試してみました。

テクスチャに RGB(128, 128, 128) のグレーを2か所に追加

        ↓           ↓

(x4)

 

IFノードの Equals Threshold を  初期値 0.00001 から 大きく 0.25に変更

3枚目のイラストが用意できなかったので無理やり着色して A==B に接続

あとテクスチャサンプラーノードの設定で、Automatic View Mip Bias を無効にして

ようやく観測できました。これで許していただけるでしょうか。。。

 

ただ調整内容が繊細な印象です。

一応 IF ノードを使わないのも作りました。こちらは2パターンのみですが。

Stepノードで 0か1 にして Lerpノードでスイッチしています。

 

 

さてさて

2023年です

UEもバージョン5になりました。

この目パチの記事はなんと2016年!実に7年前!!

 

ということで、自身の成長を確かめるべく、思い切ってパターンを増やす大作戦を敢行しました。

 

さっそくパターン制御用のテクスチャ 128x4px

(x4)

これがタイムラインの役割になります。

テクスチャの設定は

Mip Gen Settings : NoMipmaps

CompressionSettings  : Grayscale ※重要

Filter : Nearest ※重要

ピクセルが圧縮されると台無しなので、ピクセルが劣化しないようにするのが重要。

Nearest は、中間色が生じないようにするためです

 

イラストは新たに描き起こしました 512x512px

のっぺらぼうですね。

テクスチャの設定は

Mip Gen Settings : NoMipmaps

CompressionSettings  : UserInterface2D (RGBA)

Filter : Default

 

 

目パチのパターン数は4

256 x 512px

テクスチャの設定は

Mip Gen Settings : NoMipmaps

CompressionSettings  : UserInterface2D (RGBA)

Filter : Default

※各パターンの内側 1pxは透明にする等、バイリニア対策をしっかり

 

この3枚を使います

UMGで重ねるとこんな感じです

 

動いてるところ



ではマテリアルを見ていきましょう

あまり変わり映えしてませんね。

今回 重要なのがこの部分。

このグレースケールのテクスチャに使っているカラーは黒も入れた4色。

 

0~255(8bpp) の値 をシェーダーでは 0~1.0 に正規化して扱われます。

あえて分かりやすい値にしているために若干ズレが出ますが許容範囲ということにしたいのでこれを4倍して切り捨てると

0、1.0、 2.0、 3.0 になります。

これに 0.25 をかけることで、パターンを切り出すためのオフセット位置が得られます。

256 x 512px 解像度のテクスチャで、ひとつのパターンが 256 x 128 で計 4枚。

べき乗大好き!

UV の U方向は全部をそのまま使うので UTiling は 1.0。

V方向は 128 ÷ 512 で 一枚あたりの高さが 0.25 これが VTiling かつ、移動量。

切り出すサイズは、TexCoordノードの Tilingで固定しているので、上下に 0.25 ずつずらしていくとパターンアニメーションができます。

 

 

ブループリントは使わずマテリアル(シェーダー)だけで実現できました。

ランダム要素が入らない作りですが、テクスチャをタイムライン代わりにするので、ブループリントやマテリアルに触れない方でもテクスチャを更新するだけで調整ができるのがウリです。

 

 

少しは成長できてるんだろうか? いまいち実感はないけど、まぁそれなりに長くやってれば、という程度には慣れてきてると思う。

シェーダーは基礎だけならそんなに難しくはないと思う。何よりも大変なのは、アイデアを形にするまでの道のり。状況次第だけどいろんなやり方があって、複雑だけど汎用性が高いものもあれば汎用性はないけどシンプルに軽いのも作れたりする。この臨機応変さ個人的に好きです。答えは一つであってほしいという方には辛いかもしれませんね。

思い立ったらすぐに試すというのを繰り返すことが大事で、試行錯誤の回数が多いほど新しいアイデアへの扉を見つけるのが早くなると思う。

料理みたいなもので、いろんな食材と調理法を知っていれば自然とレシピなんかなくてもレパートリーが増える。

と偉そうなことを書きましたが 今回はこの辺にしておきます。

 

 

ではでは

ステキな目パチライフを!