このブログもそろそろ2年目を迎えます。よく続いたもんです。さすがにネタに困ってきてる気がしないではない・・・というかちょっと困ってます。
朝、駅のホームで突然ひらめいたりしますが、地下鉄の駅から地上に出たところでスッカリ忘れていたりするので、もうどうしたものか・・・。
さてさて
そんな ネタ貧困生活のなかでようやく思いついたのがマスクテクスチャを使った絵の切り替え。どこらへんに需要があるか分かりませんが、工夫次第で面白い表現が出せそうです。
ではまず
マスクテクスチャを作ります
解像度はかなり小さく作ります。
40x23 px ↓これは400%に拡大した状態
ノイズを乗せます。このときヒストグラムが確認できるのであれば、確認しながら掛けるといいと思います。なるべく両サイドの分布が少なくなるようにする方がいい感じになります。
仕上げにトーンカーブで(0,0,0)と(255,255,255)を無くします。
試せばわかるのですが、無くしておかないと、マスクで使う際に完全な白と黒にならないからです。
このトーンカーブは調整レイヤーで作業すると使い回しができて便利です。
このテクスチャをUE4にインポートします。
Grayscale で sRGB を使わない設定にします。
最後に大事なのが、Filter設定。これを、Nearest にしておきます。
あとは適当な絵を2枚用意してマテリアルを作ります。
ValueStep ノードはPhotoshopでいうところの『2階調化』っていうやつです。
Gradientのピンにグレイスケールの絵を流して、Mask Offset Value のピンで閾値を加減します。
これを、Widgetで確認します。
このマテリアルをキャンバスのImageパーツにセットします。
グラフに置いてある Event Pre Construct で ダイナミックマテリアル化しておきます。
アニメーションのために、隠しパーツをキャンバスに一つ置いておきます。
この辺の操作は過去記事でもやってたので一応貼っておきます。
このパーツの Pivot あたりにアニメーションを付けます。値は 1.0 → 0.0 になるようにします。
もちろん非表示なので、 Visibility は Collapse にしておきます。
全開の記事では Hidden にしていましたけど、Hidden よりも Collapse の方が処理がかからないそうです。
あとはこの隠しパーツ(今回 Invisibleと名付けました)の値を拾って、ダイナミックマテリアルに渡すようにしておいて、
アニメーションを再生すればOK。
再生用のイベントを用意しました。
レベルブループリントで確認用の CreateWidget → Add to Viewport をつなぎます。
そして、Input ~ で再生用のイベントを呼び出せば簡単に確認できます。
繰り返し確認するために、リセットするイベントを用意しました。
では再生してみると・・・
(実際はもっと速いのですがGIFの再生速度が限界っぽい)
再生速度はタイムラインで調整できます。
ポストプロセスマテリアルに応用すると、画面遷移として使えそうです。
マスクテクスチャをグレイスケールで作れば、StepValue で段階的なアニメーション表現ができるので楽しいです。
今回はデジタルノイズっぽくランダムにしたかったのと、テクスチャを安く作りたかったので、普段あんまり使わないNearestを使ってみました。
こんなやつだと
64x64px をマテリアルでタイリングしました。
同じサイズで円形のグラデーションにすると
階調を反転すると、また違った見え方になります。
ではでは今回はこの辺で。
ステキな画像切り替えライフを!