3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-12-09

目次

1. はじめに
2. ゲームボーイ風ポストプロセスの作り方

3. サンプルプロジェクト
4. おわりに

1. はじめに

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

image.png
result2.png
result3.png
result4.png

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

2. ゲームボーイ風ポストプロセスの作り方

ポストプロセスとは

  • 「ポストプロセス(ポストプロセスエフェクト)」とは、「レンダリング」という描画処理の際に、全体的な見た目や雰囲気を設定できる機能です。
  • ポストプロセスボリュームを利用することで設定を行うことができます。

2.1. 解像度を調整する

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

ポストプロセスマテリアルとは

  • ポストプロセスで適応できるマテリアルです。

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

moza.png

まずマテリアルを作成します。ポストプロセスマテリアルなのでプレフィックスはPPM_です。
PPM_2.png

次にMaterial DomainをPost Processに変更します。
MD.png

そして、以下のようにノードを繋げます。
ResolutionX,ResolutionYが縦横の分割数(解像度)になります。
Node.png

完成したマテリアルのマテリアルインスタンスを作成します。
これにより、値の調節がしやすくなります。
PPMI.png
スクリーンショット 2024-12-08 025132.png

レベルに配置されているポストプロセスボリュームに、作成したマテリアルインスタンスを設定します。
ppmate.png

この時点で、モザイクがかかったような粗い見た目になります。
moza.png

2.2. 色を調整する

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

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

カラーグレーディングとは

  • 映像や写真に色彩補正を加え、雰囲気を調節することです。

2.2.1. カラーグレーディングLUTを使う

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

LUT(LookupTable,ルックアップテーブル)テクスチャとは

  • カラーグレーディングに利用するテクスチャです。

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

ニュートラルなLUT
rgbtable16x1.png

次に画像編集ソフトで色味を変更します。自分はGIMPを使いました。
彩度を0にして、全体的に色を緑色にし、ベベルを調整します。
(詳しくは参考動画をご覧ください。参考動画:https://youtu.be/5k3g4CNCSvg?si=1APYyK8HVy4l2ZPL&t=257
GIMP.png

変更後のLUT
rgbtable16x1_GAMEBOYLOOKS.png

完成したLUTをUEにインポートします。
LUT_samune.png

インポートしたテクスチャのミップ全般設定をNoMipmapsに、Texture GroupをColorLookupTableに変更します。
LUT_Settings.png

LUTをポストプロセスボリュームのカラーグレーディングLUTに設定します。
PPVLUT.png

これでゲームボーイ風ポストプロセスの完成です!
result.png

2.2.2. ポストプロセスマテリアルを使う

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

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

mc2nodo.png

これでポストプロセスマテリアルだけでゲームボーイ風の見た目にすることができました!
m2res.png
自分にはできなかったんですが、値を調節することでゲームボーイカラー風の見た目にもできそうですね!
m2gbc.png

2.2.3. ポストプロセスのカラーグレーディングを使う

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

image.png

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

ウィンドウのカラーグレーディングから開くことができます。
cgp.png
ちょっと自分には難しかったですが、調整すればゲームボーイ感を出せそうですね!
「DaVinciResolveを使っている人におすすめ!」って先輩にお聞きしました!
cbp2.png

3. サンプルプロジェクト

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

4. おわりに

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

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?