Unreal Engineで作るゲームボーイ風ポストプロセス

# 目次
[1. はじめに](#1-はじめに)
[2. ゲームボーイ風ポストプロセスの作り方](#2-ゲームボーイ風ポストプロセスの作り方)
- [2.1. 解像度を調整する](#21-解像度を調整する)
- [2.2. 色を調整する](#22-色を調整する)
-  - [2.2.1. カラーグレーディングLUTを使う](#221-カラーグレーディングLUTを使う)
-  - [2.2.2. ポストプロセスマテリアルを使う](#222-ポストプロセスマテリアルを使う)
-  - [2.2.3. ポストプロセスのカラーグレーディングを使う](#223-ポストプロセスのカラーグレーディングを使う)

[3. サンプルプロジェクト](#3.-サンプルプロジェクト)
[4. おわりに](#4.-おわりに)

# 1. はじめに
**概要**
この記事は[Unreal Engine (UE) Advent Calendar 2024](https://qiita.com/advent-calendar/2024/ue)、シリーズ3の10日目の投稿記事です！
本記事では**UnrealEngineで作るゲームボーイ風ポストプロセス**について紹介させていただきます！
サンプルプロジェクトも用意してあります！
この記事を参考にポストプロセスを作られる方はもちろん、ポストプロセスの作り方はよくわかんないけど、ゲームボーイ風のUEで遊びたいという方にぜひ使っていただきたいです！

https://x.com/yu4ki20/status/1842756879979774250

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/da80dc66-c4c4-b2c4-6d03-1133fa1a1783.png)
![result2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/45c187d8-26bf-27a0-9df3-045f77ab9c72.png)
![result3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/5947b6c9-6341-5994-d06b-ac46be124ab5.png)
![result4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/a818b8cf-5062-1ad3-7dd3-b8e016d6933d.png)


**参考文献**
この記事で紹介する作り方はこちらの海外のYoutubeの動画を元にしたものです。
英語に抵抗がなければこの動画を見るだけで作成できます。

https://youtu.be/5k3g4CNCSvg?si=-yUclvYfKCRORyff


# 2. ゲームボーイ風ポストプロセスの作り方
:::note info
**ポストプロセスとは**
* 「ポストプロセス（ポストプロセスエフェクト）」とは、「レンダリング」という描画処理の際に、全体的な見た目や雰囲気を設定できる機能です。
* ポストプロセスボリュームを利用することで設定を行うことができます。
:::

## 2.1. 解像度を調整する

解像度を調整するポストプロセスマテリアルを作ります。

:::note info
**ポストプロセスマテリアルとは**
* ポストプロセスで適応できるマテリアルです。
:::

モザイクがかかったような、解像度の落ちた見た目を目指します。

![moza.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/57c2ddd8-a879-8e1e-fa3f-051cd6007887.png)

まずマテリアルを作成します。ポストプロセスマテリアルなのでプレフィックスは`PPM_`です。
![PPM_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/11fc1369-cb75-3622-1d4d-1308023ddb14.png)

次にMaterial DomainをPost Processに変更します。
![MD.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/c07ee1cc-77af-9576-58d0-27e5caa3e241.png)

そして、以下のようにノードを繋げます。
`ResolutionX`,`ResolutionY`が縦横の分割数（解像度）になります。
![Node.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/2aa65917-1d83-589a-0230-a8a567bea4a8.png)


完成したマテリアルのマテリアルインスタンスを作成します。
これにより、値の調節がしやすくなります。
![PPMI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/649df1aa-31f9-9b4a-37ea-a7a2b245a807.png)
![スクリーンショット 2024-12-08 025132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/6d4f1447-40d0-f40b-9258-f99b8dae390b.png)

レベルに配置されているポストプロセスボリュームに、作成したマテリアルインスタンスを設定します。
![ppmate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/d44fb9ae-83bf-b7de-2752-51f8e41c09bc.png)

この時点で、モザイクがかかったような粗い見た目になります。
![moza.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/5dbe17b5-4506-0cdf-9499-6e70a35bc1b3.png)

## 2.2. 色を調整する
ゲームボーイ独特の緑っぽい色をだしていきます。
方法としては3つあります。

1\. カラーグレーディングLUTを使う。
2\. ポストプロセスマテリアルを使う。
3\. ポストプロセスのカラーグレーディングを使う。

:::note info
**カラーグレーディングとは**
* 映像や写真に色彩補正を加え、雰囲気を調節することです。
:::


### 2.2.1. カラーグレーディングLUTを使う
LUT(LookupTable,ルックアップテーブル)テクスチャを作成します。
LUTをポストプロセスボリュームに設定することで、ゲームボーイのような緑色を出していきます。
この方法はフォトショップやGIMPなどの画像編集ソフトを使う方におすすめです。

:::note info
**LUT(LookupTable,ルックアップテーブル)テクスチャとは**
* カラーグレーディングに利用するテクスチャです。
:::

まず公式ドキュメントからLUT用テクスチャ画像をダウンロード。

https://dev.epicgames.com/documentation/ja-jp/unreal-engine/using-lookup-tables-luts-for-color-grading?application_version=4.27

:::note info
**ニュートラルなLUT**
![rgbtable16x1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/f134394d-39f5-7368-2ed5-80fc398c7bd2.png)
:::

次に画像編集ソフトで色味を変更します。自分はGIMPを使いました。
彩度を0にして、全体的に色を緑色にし、ベベルを調整します。
（詳しくは参考動画をご覧ください。参考動画：https://youtu.be/5k3g4CNCSvg?si=1APYyK8HVy4l2ZPL&t=257 ）
![GIMP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/739e728f-ffc4-db87-38f3-9608c4e99af6.png)

:::note info
**変更後のLUT**
![rgbtable16x1_GAMEBOYLOOKS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/318c7a5d-314a-b8e4-b157-647f5c1df05a.png)
:::

完成したLUTをUEにインポートします。
![LUT_samune.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/d9a1ef6b-67dc-929f-d89d-88440ca301d1.png)

インポートしたテクスチャのミップ全般設定をNoMipmapsに、Texture GroupをColorLookupTableに変更します。
![LUT_Settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/d94db613-886b-8480-fd7a-1c87f60e8e8f.png)

LUTをポストプロセスボリュームのカラーグレーディングLUTに設定します。
![PPVLUT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/2eebc28f-7552-7d22-047f-963199b1636a.png)

これでゲームボーイ風ポストプロセスの完成です！
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/1a3eb7fd-0d6b-26ba-46ed-01948e5ea4ea.png)

### 2.2.2. ポストプロセスマテリアルを使う
作成したポストプロセスマテリアルを拡張することで、ゲームボーイの緑色を出していきます。画像編集ソフト使わずにUEだけで済ませたい人におすすめです。

作成したポストプロセスマテリアルに以下のノードを追加します。
彩度を下げて、緑色を加算します。

![mc2nodo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/bf72c873-74e1-28d0-c7dd-cad29ba8814e.png)

これでポストプロセスマテリアルだけでゲームボーイ風の見た目にすることができました！
![m2res.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/138d4738-05b5-23fa-4cfe-359217371bce.png)
自分にはできなかったんですが、値を調節することでゲームボーイカラー風の見た目にもできそうですね！
![m2gbc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/485fd329-c299-411c-8c71-60d736c789ca.png)

### 2.2.3. ポストプロセスのカラーグレーディングを使う
実はポストプロセスボリュームの詳細をスクロールしていくとカラーグレーディングの項目があります。
ここからカラーグレーディングを調整することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/adf3fff6-ff67-9a95-6902-839ea44507f9.png)

**でもこんなの見ずらい！**
**そんな皆さんに朗報です！**
**UE5.5.0からカラーグレーディングのパネルが追加されました！**

ウィンドウのカラーグレーディングから開くことができます。
![cgp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/f24c4a59-1133-9705-7d61-8d2e4536b37b.png)
ちょっと自分には難しかったですが、調整すればゲームボーイ感を出せそうですね！
「DaVinciResolveを使っている人におすすめ！」って先輩にお聞きしました！
![cbp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954674/9197a9ea-b2d8-f8c0-66c1-6ccf4fe926e4.png)


# 3. サンプルプロジェクト
GitHubにてゲームボーイ風ポストプロセスのサンプルプロジェクトをアップロードしています！（RLPPはRetroLooksPostProcessのつもり。）
環境はUE5.5.0です！
興味のある方はぜひダウンロードして遊んでみてください！

https://github.com/Yuki-46/RLPP

# 4. おわりに
いかがでしたでしょうか。
自分もまだポストプロセスについてすべてを把握できているわけではありませんが、とても自由度が高く、たくさんの可能性があるものだと改めて感じました！
本記事やサンプルプロジェクトに間違いなどありましたら、連絡をいただければ幸いです。

自分はゲームボーイ世代ではありませんが、ゲームボーイの見た目は何とも言えない良さがあると思ってます！
本記事やサンプルプロジェクトが、みなさんのお役に立てれば幸いです！