【UE5】水玉模様 - Unreal Engine 5.4

水ノ茉の宣伝
始まり
実装
おわり!!!
雑談

水ノ茉の宣伝

準備中... ゲームを作る予定なの水ノ茉こおり

始まり

先日のヤエカさんをきっかけに、顔陰作成ツールが一気に進みました。

前提オトメきを購入して遊びましょう。最初の方は湊くんの幻影がチラつきます。ﾌﾟﾝｽｶした時のお声が本当にそっくりなの（そりゃそう）始まりお姉さん想いの可愛くて心強い妹さんでしたね。ユイちゃんはユイちゃんなのです。湊くんだって湊くんというカテ...

その関連でWidgetを触っていたのですが、ちょっと楽しくなってしまいました。

実装

こんな感じでノードを組みます。

WidgetのBorderで使いたかったのでMaterial DomainをUser Interfaceにしています。

とはいえ所詮はSvPositionを元に描いているだけです。
PixelPositionの振る舞いが似ていれば、ポストプロセスマテリアルやマテリアルでも使えると思います。

カスタムノードはこんな感じ。

水玉を描画するセルサイズを作って、それを段々にズラして、fractで0..1にして、-0.5して中心座標をズラして、lengthで円形を作っているだけです。

PixelPosition = PixelPosition / max(1.0, TilePixelSize);
PixelPosition.x += ceil(PixelPosition.y) * 0.5;  // ズラして段々にする

float2 UV = frac(PixelPosition);  // int to 0.0..1.0
UV -= 0.5;  // 円を作りたいので中心座標をズラす

// lengthの結果が0..1じゃないので適当にclamp
return 1.0 - saturate(smoothstep(DotScale - DotFeather, DotScale + DotFeather, length(UV)));