ついに燃やすときがきました。
グリッチやディゾルブと並んでテクスチャに対する依存度と演出目的の度合が高いので優先を下げていました。
2Dの絵素材が燃えるという表現はそれなりに目を引くものの、ゲームの世界観やシチュエーションが合わないと不自然になるので使いどころが限られるのも、優先を下げていた理由の一つです。
この企画もそろそろ終盤にあって基礎的なものは堀つくした感があるのも確かで、そろそろやってもいい頃合いかなと思った次第。
今回紹介する方法は過去にツイートしていました。
Xユーザーのみつまめ杏仁さん: 「Step 使わないでディゾルブできた #UE4 #UE4Study https://t.co/aoFMte0iWi」 / X
簡単に言うと、グレイスケールの絵を、テクスチャの UVとして扱う方法、となります。
まだ UV空間の扱い方に自信がついていない状態だと、むしろ不安が増すのではないかという気もしますが体感してしまえばきっと理解できるはず。
Lerpノードで線形補間するのは、もうおなじみだと思います。
改めて おさらいしておくと、２つの値をブレンドした結果を返してくれます。
Lerpノードの Alpha につなぐ（入力する）値によって表現結果が変わります。
上の例だと、固定のひとつの値を渡すと、ひとつの値が返ってきます。
シェーダーというのは、描画する領域をすべて埋めるのがお仕事です。埋める領域のピクセル全部で Lerp に 0.5を渡すことになるので、同じ色で埋められます。
下の例では、UV の Uの値を渡しています。
埋める領域の左端から右端に至るまでがグラデーションになります。
次にモノクロの絵を渡すと、
渡した絵の輝度を0～1.0として着色されます。このしくみを利用します。
試しに 横に長いテクスチャを作って、
そのテクスチャサンプラーのUVとして、別のグレイスケールのテクスチャサンプラーの値を渡してみます。
カラーのチョイスは、置いておくとして、うまくいっています。
Photoshopのレイヤー効果にある「グラデーションマップ」と同じ効果です。
グレースケールの輝度分布を上手にコントロールできれば、なかなか面白いカラーバリエーションが作れそうです。
今回作ったテクスチャは以下。
256ｘ8 px
グラデーションは縦方向でも問題ないです。
横方向のほうがPhotoshopで作成するときに作りやすいです。
8倍に拡大
アルファチャンネル↓
タイリング設定は Clampにします。左端のピクセルが 黒＝ 0 なのがポイント。
上下に分けているのは、燃え表現に対するちょっとしたこだわりです。
燃えるときは先に焦げてから高温になって光を放って消えていくほうが雰囲気がでるので、焦がすためのグラデーションと、光らせるためのグラデーションに分けています。
焦がすには乗算、光らせるのは加算を使います。
グラデーションの内容で見え方が変わるので、色の幅や位置などを調整するといいでしょう。
86. 真ん中から燃える
GIFでキャプチャしたので色数が減ってますね。
グラデーションのテクスチャは
256ｘ8px
と
中央から外に向けて変化するグレイスケールのテクスチャを使用。
256ｘ256px
意図的にムラを作ることで自然な感じを演出できます。
暗い部分から明るい部分に進むので、グラデーションの勾配を加減して進み具合に緩急をつけます。
このテクスチャは解像度によって動きの滑らかさが変わるので、メモリと相談しつつ適切なサイズを決めます。解像度を下げても動くスピードが速ければ結構気づかれません。
右のほうにあるタテに並んだテクスチャサンプラーは２つとも以下のテクスチャがセットしてあります。
それぞれ上段と下段で UV の Vの値を固定して使っています。
（16倍に拡大）
テクスチャのカラーを確実に拾ってもらうための値です。
左端のパラメータ ScalarParameterノードをUMGのタイムラインから制御します。
タイミングをみてお好みの速度で再生するだけです。
で、動きのカラクリはグレイスケールテクスチャの輝度を引き算で下げていきます。
パラメータを 0 から 1 に変化させた場合の動きは以下のようになります。
これを、グラデーションテクスチャの UV の U に流します。
乗算は暗い色を掛けると暗くなって、白を掛けても変化しません。
一方 加算は明るい色を足すと明るくなって、黒を足しても変化しません。
そこを利用して、焦げと発光を表現します。
上段のアルファチャンネルで、左端に 0 のピクセルがあるので、
それをシェーダーの Opacity（不透明度） につなぐことで穴が開きます。
グラデーションテクスチャは、アンリアルエンジンのカーブテクスチャでも作れます。
87. 端から燃える
基本の原理は 86.と同じです。
下から上に向かって燃えるので下のようなテクスチャを用意しました。
256ｘ256px
違うのはグレイスケールテクスチャの引き算にひと工夫を加えているところ。
ComponentMaskノードで方向を決めています。
Lerpノードで値の変化する幅を調整しています。テクスチャの内容に合わせて上限と下限を設定します。
動きの滑らかさは、テクスチャの解像度と輝度の勾配で調整できますが、テクスチャだけでは限界があります。しかもsRGB環境だと暗い部分の編集が難しいので、見た目にはわからない暗さのところで雑になりがちです。ピクセルの編集はそこそこにして、UVのVを利用することで滑らかさをアップさせます。
左が 86. のシェーダーで補正なし、右が 87. で補正あり。
30fpsのキャプチャで GIF にしたのでピクセルが多少荒れていますが、趣（おもむき）に差が出ますね。86. についても中心からのグラデーションを補正に使うと、滑らかさが変化します。
この補正方法を使うことで、もう一つ表現が増やせます。
グレイスケールテクスチャの上下左右をシームレスにすると Pannerノードが効果を発揮します。
着色用のグラデーションも少し改造（端の1ピクセルを埋める）してやると・・・
大炎上！
とまぁ こういう遊びもできます。
LerpのAlphaにつなぐ値で炎の高さを調整できます。
ループするのがばれるので、グレイスケールのテクスチャサンプラーを追加し、位置とスピードをずらしてブレンドするとランダム感がアップします。
グレイスケールテクスチャの解像度を落としたものを試してみたので載せておきます。
まずは横方向を50％ダウン
128x256
縦方向を50％ダウン
1/4にダウン
実は差し替わっていないんじゃないかと思うくらいに変化が弱いですね。
動きの印象もほぼ変わらないので、1/4サイズまで下げても大丈夫そうです。
時にはこういう検証をしながら、表示解像度とテクスチャ解像度のバランス感覚を磨いていくといいですよ。出力前の素材は表示サイズの4倍相当で作っておくのをおすすめします。大は小を兼ねるのですが、大きすぎても、縮小したときにドット欠けやエッジの強調などのがおこりやすくなるのでご注意を。
UIのTA（テクニカルアーティスト）を目指す場合、こういった地味な検証はとても大事です。プロジェクトで目指したい表現って、たいてい誰もやってなかったりするものが多くなりがちで、実現したいビジュアルをどうにかして実装の道筋を立て、工期に影響が出にくい座組を提案したり、リスクについての説明ができるようになるために、自身の経験はとても強い味方になってくれますよ。
一応テーマ回収としてゲージを燃やしたものを作りました。
上で公開したシェーダーのイラストのところをゲージに置き換えるだけでＯＫ。
動きを存分にアピールしたかったので、正方形のイラストを使いました。
矩形じゃなくシルエットが複雑な形状でもアルファチャンネルをブレンド（乗算）すれば、ピクセルの見えている部分だけを燃やすことができます。
ここまでついてこれた方ならきっと大丈夫。
今回はここまでです
先にも書いていますが、ぶっちゃけ Photoshopのグラデーションマップ効果です。
アルファチャンネルの利用でディゾルブとしても十分使えます。
グレイスケールテクスチャと、着色用のグラデーションテクスチャ、この２つが組み合わさることで、いろんな見せ方が工夫できるので、ぜひいろいろ試してみてください。
グラデーションテクスチャのほうをPannerノードで動かしてみるのも面白そうです。
凍結表現とかもできそうですよ。
ではでは
すてきなゲージライフを！
