ゲームを作ったり作らなかったり

ゲームを作ったり作らなかったり。作ってる時はUE4/モデリング/レベル・サウンドデザイン等、作ってない時はインディゲーム・SteamやModの話題等。

[UE4]Spriteノードを利用して常に同じ大きさで表示するマテリアルを作る

今回はいつもよりちょっとだけ実用的な、UE4のマテリアルについてのお話です。

Spriteというノードを利用して、いくら離れても画面比率的に同じ大きさのまま描画するマテリアルを作ります。

2D的表現の為ではなく、火花のような小さく明るいものを遠くから視認出来るようにする為のマテリアルです。

 

UE4のバージョン:4.21.2

 

まずは空のマテリアルから進めます。

f:id:tekktekk:20190319212540p:plain

SpriteというノードのWorld positon offsetからワールドポジションオフセットに繋ぐと、このマテリアル自体がスプライトのように表示されます。

つまり常にカメラ方向を向いてくれる訳です。

このノードについてはヒストリアさんのこちらの記事を参考にさせてもらいました。

historia.co.jp

Spriteノードをワールドポジションオフセットに繋いだ時点でこのようになります。

f:id:tekktekk:20190319212138p:plain

このマテリアルをキューブのメッシュに適用してみると、このように平面になります。

f:id:tekktekk:20190319212317p:plain

3D空間上に平面で表示してくれているので、これがスプライトという事ですね。

f:id:tekktekk:20190319212651p:plain

離れるとちゃんと小さくなります。カメラアングルが変わっても常にこちらを向いているのも確認出来ます。

ではここから、カメラを離しても同じ大きさになるようにします。

f:id:tekktekk:20190319213058p:plain

SpriteノードのXY scaleにPixel Depthを繋ぐことで、カメラを離す=Depthの値が大きくなる=Scaleの値が大きくなるという仕組みで画面に対して一定の大きさを保てるようになります。(他にもViewSize等を利用しても出来ると思います。今回はとりあえずこれを使用しました。)

Divideで割り算しているのはそのままだと大きすぎる為です。

f:id:tekktekk:20190319213828p:plain

f:id:tekktekk:20190319213854p:plain

隣のキューブと比較すると分かる通り、カメラを離しても小さくなっていません。
なお、画像2枚を比較すると若干形が違います。これはマテリアルをキューブに適用している為です。通常は平面のメッシュを使う方が良いと思います。

 

これで画面比率的に同じ大きさを保って描画するマテリアルが出来ました。

但し、スプライト的な平面の表示になるので、立体感のある3Dメッシュとして表示したい場合には使えません。

今回このマテリアルを作った目的は、「曳光弾」という光る事で遠くからでも弾道が分かりやすい砲弾を表現するためです。

この場合は平面でもある程度許容出来るので使用しています。


ではその表現を実装するにはどうすればいいかと考えたところ、

・メッシュをエミッシブなどで光らせて表現する

・パーティクル等のエフェクトで表現する

などが思いつきました。

しかしどちらもメッシュ又はパーティクルが遠くから見ると小さくなります。

これは3D空間上で正しい表示結果ですが、これを実際にインゲームで見た場合、すぐ極小の粒になって視認出来なくなります。

これでは「弾道を分かりやすくする」という表現の目的が果たせません。

表示されるものを大きくしてしまえば解決出来ますが、今度は近くで見た際に大きすぎてしまいます。

そこで今回のマテリアルを使います。

光るメッシュを画面に対して常に同じ大きさで表示する事で、いくら離れても視認出来るようにします。

f:id:tekktekk:20190319221513p:plain

Spriteノードを使って大きさを同じにしつつ、エミッシブを使って光らせます。

いくら離れても全く同じ表示だと違和感があるので、今回はメッシュとカメラの距離を利用してエミッシブの出力を下げるようにしてみました。

f:id:tekktekk:20190319221431p:plain

平面のメッシュにマテリアルを適用し、1000m以上離れた山の上に置いて見てみます。

本来は山の上のメッシュが1mx1mの大きさなのでほぼ見えないはずですが、ちゃんと見えています。

手前のメッシュはカメラから数十mの位置です。やや大きく見えるのは、エミッシブが強いので膨張して見える為です。

距離でエミッシブを下げる処理を入れなければほぼ同じに見えます。

 

これで遠く離れても視認出来る光の表現が出来ました。

但し問題点があり、遠すぎるとエミッシブがチラついてしまいます。

また、例のようなサイズだとカメラを近づけても小さくてあまり見えません。

なので、あくまでも遠距離での視認性を担保する為のマテリアル表現ですね。

実際に使う場合は、近距離では別のマテリアルを使うか、パーティクルを使う等して組み合わせる事になります。

 

 曳光弾として使ってみた例。音が出ます。