![](https://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00000.png)
目次
※この記事で使用しているUnrealのVersionは04.23.0です。
※この記事のサンプルプロジェクトは以下URLにアップされています。
サンプルプロジェクト
Post Processで白黒ドット表現 レベル【★☆】
![](http://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00000-1024x577.png)
今回は、Post Process Materialを使って、お手軽にドット絵の表現を行ってみたいと思います。
まずはPostProcess用のMaterialアセットを作成しましょう
Content Browser左上の「Add New」から「Material」を選択します。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt.png)
Materialアセットを作成しましたら、最初にPost Process用のMaterial設定にします。
作成したMaterialを開き、「Details」ウィンドウから、「Material Domain」の項目を見つけ、設定を「Post Process」にします。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt2-1024x443.png)
次に、同じく「Details」ウィンドウ内の「Blendable Location」という項目を「Before Tonemapping」に設定しておきます。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt3-1024x530.png)
では、早速Materialを書いていきます。
いきなりすべての処理を書くとすごい長いMaterialをいきなり見せられて「全然お手軽じゃない…」となってしまうので、この表現の重要な部分の「Pixel Art表現」だけに絞ってまずは処理を書いてみます。
※最終的なものの処理は長ったらしいですが、白黒とPixel Art表現部分だけを切り取ればそこまで難しくありませんので、予めご了承ください。
![](http://kinnaji.com/wp-content/uploads/2019/10/image-37-1024x573.png)
特に難しいことはしていません。
現在のViewSizeを分割したいピクセルのScaleを指定して割ってあげ、UVと掛けたものを小数点切り捨てしただけです。
それをScene TextureのPostProcessInput0につなげることで、画面のUVをドット調に改編してくれます。
Materialの処理を書きましたら、見た目を確認してみましょう。
レベル上に「Post Process Volume」アクターを配置します。
エディター上の「Modes」ウィンドウの「Place」モード状態で、中から「Post Process Volume」というものを見つけ、Viewport上にドラッグ&ドロップします。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt4-1024x549.png)
出来ましたら、 配置したPost Process Volumeアクターを選択した状態で 「Details」 ウィンドウ内の「Post Process Settings」→「Infinite Extent(Unbound)」という項目のチェックを入れてあげます。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt8.png)
次に、同じく「Details」ウィンドウ内の「Rendering Features」→「Post Process Materials」という部分のArrayの+を押します。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt5.png)
その後、出てきたプルダウンから「Asset Reference」を選択します。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt6.png)
すると、Materialを選択するプロパティが現れるので、作成したMaterialを設定してあげます。
![](http://kinnaji.com/wp-content/uploads/2019/10/KA_PixelArt7.png)
これで、作成したPost Process Materialをレベル上に適応できたかと思います。
↓結果
処理前
![](http://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00001-1024x577.png)
処理後
![](http://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00002-1024x577.png)
まあこれだけでは味気がないので、もう少し肉付けをしてみましょう。
とりあえず、このピクセルに境界線をつけてみましょう。
![](http://kinnaji.com/wp-content/uploads/2019/10/image-40-1024x573.png)
![](http://kinnaji.com/wp-content/uploads/2019/10/image-39-1024x573.png)
CustomNodeの中身
float2 v2 = step(uv,percent);
return v2.x + v2.y;
CustomNode2の中身
return step(x,y);
追加した部分の処理は、パラメーターに応じてライン状の境界線や、円形の境界線を作ってくれます。
結果↓(ピクセルを丸く区切った場合)
![](http://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00003-1024x577.png)
少しわかりづらいので、ピクセルのサイズを大きくしたもので見てみます。
![](http://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00005-1024x577.png)
ちょっと面白い表現になってきました。
今度は色を白黒に分けてみたいと思います。
![](http://kinnaji.com/wp-content/uploads/2019/10/image-41-1024x299.png)
![](http://kinnaji.com/wp-content/uploads/2019/10/image-42-1024x349.png)
MF_NTSCの中身
![](http://kinnaji.com/wp-content/uploads/2019/10/image-43-1024x573.png)
NTSCとは、白黒テレビの時代に使用していた色の識別の計算のための値です。
(今回は簡易的に解釈して値を代入しています)
詳しくはWikiをご覧ください。
→NTSC
結果↓
![](http://kinnaji.com/wp-content/uploads/2019/10/ScreenShot00006-1024x577.png)
なんか味が出ましたね。
白黒だけを使いたい方は、この部分だけを使ってPost Processを作ればそれっぽい表現になるかと思います。
最後におまけで画面ノイズをつけてみます。
![](http://kinnaji.com/wp-content/uploads/2019/10/image-44-1024x445.png)
![](http://kinnaji.com/wp-content/uploads/2019/10/image-45-1024x530.png)
Noiseノードで、Functionを「Gradient」で使用し、サンプリングし、一定以上の値のみを使って画面のUVをいじるという処理を行っています。
Pixel Artでやるとなんかいまいちかもですが、普通にこのNoiseだけで使ってもいい感じの見た目を作ることができます。
結果↓
おまけ
※この記事のサンプルプロジェクトは以下URLにアップされています。
サンプルプロジェクト